[NodeJS] Add optional overflow menu icon rendering (#8847)

microsoft · Mar 5, 2024 · 7ed6fd0 · 7ed6fd0
1 parent feb326a
commit 7ed6fd0
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/source/nodejs/adaptivecards/src/card-elements.ts b/source/nodejs/adaptivecards/src/card-elements.ts
@@ -6629,7 +6629,7 @@ class OverflowAction extends Action {
             contextMenu.hostConfig = this.hostConfig;
 
             for (let i = 0; i < this._actions.length; i++) {
-                const menuItem = new MenuItem(i.toString(), this._actions[i].title ?? "");
+                const menuItem = new MenuItem(i.toString(), this._actions[i].title ?? "", this._actions[i].iconUrl);
                 menuItem.isEnabled = this._actions[i].isEnabled;
                 menuItem.onClick = () => {
                     const actionToExecute = this._actions[i];

diff --git a/source/nodejs/adaptivecards/src/controls/menu-item.ts b/source/nodejs/adaptivecards/src/controls/menu-item.ts
@@ -7,6 +7,7 @@ export class MenuItem {
     private _hostConfig?: HostConfig;
     private _element: HTMLElement;
     private _value: string;
+    private _iconUrl: string | undefined;
     private _isEnabled: boolean = true;
 
     private click() {
@@ -36,9 +37,10 @@ export class MenuItem {
 
     onClick?: (item: MenuItem) => void;
 
-    constructor(key: string, value: string) {
+    constructor(key: string, value: string, iconUrl?: string) {
         this.key = key;
         this._value = value;
+        this._iconUrl = iconUrl;
     }
 
     toString(): string {
@@ -50,13 +52,32 @@ export class MenuItem {
 
         if (!this._element) {
             this._element = document.createElement("span");
-            this._element.innerText = this.value;
             this._element.setAttribute("role", "menuitem");
+            this._element.style.display = "flex";
+            this._element.style.alignItems = "center";
+            this._element.style.justifyContent = "left";
 
             if (!this.isEnabled) {
                 this._element.setAttribute("aria-disabled", "true");
             }
 
+            if (this._iconUrl && this._hostConfig?.actions.showIconInOverflow) {
+                const iconSize = this._hostConfig?.actions.iconSize ?? 16;
+
+                const iconElement = document.createElement("img");
+                iconElement.style.width = iconSize + "px";
+                iconElement.style.height = iconSize + "px";
+                iconElement.style.marginRight = "6px";
+                iconElement.setAttribute("role", "presentation");
+                iconElement.src = this._iconUrl;
+                this._element.appendChild(iconElement);
+            }
+
+            const textElement = document.createElement("span");
+            textElement.style.flex = "0 1 auto";
+            textElement.innerText = this.value;
+            this._element.appendChild(textElement);
+
             this._element.setAttribute("aria-current", "false");
             this._element.onmouseup = (_e) => {
                 this.click();

diff --git a/source/nodejs/adaptivecards/src/controls/popup-menu.ts b/source/nodejs/adaptivecards/src/controls/popup-menu.ts
@@ -13,7 +13,7 @@ export class PopupMenu extends PopupControl {
     protected renderContent(): HTMLElement {
         const element = document.createElement("div");
         element.className = this.hostConfig.makeCssClassName("ac-ctrl ac-popup");
-        element.setAttribute("role", "listbox");
+        element.setAttribute("role", "menu");
 
         for (let i = 0; i < this._items.length; i++) {
             const renderedItem = this._items.get(i).render(this.hostConfig);
@@ -115,7 +115,4 @@ export class PopupMenu extends PopupControl {
             this._renderedItems[index].removeAttribute("aria-expanded");
         }
     }
-
-
-
 }
diff --git a/source/nodejs/adaptivecards/src/host-config.ts b/source/nodejs/adaptivecards/src/host-config.ts
@@ -380,6 +380,7 @@ export class ActionsConfig {
     actionAlignment: Enums.ActionAlignment = Enums.ActionAlignment.Left;
     iconPlacement: Enums.ActionIconPlacement = Enums.ActionIconPlacement.LeftOfTitle;
     allowTitleToWrap: boolean = false;
+    showIconInOverflow: boolean = false;
     iconSize: number = 16;
 
     constructor(obj?: any) {
@@ -414,6 +415,7 @@ export class ActionsConfig {
             );
             this.allowTitleToWrap =
                 obj["allowTitleToWrap"] != null ? obj["allowTitleToWrap"] : this.allowTitleToWrap;
+            this.showIconInOverflow = obj["showIconInOverflow"] ?? this.showIconInOverflow;
 
             try {
                 const sizeAndUnit = Shared.SizeAndUnit.parse(obj["iconSize"]);