uui-menu-item: custom expand symbol render method (#1198)

* enable parsing a custom expand symbol render method

* fix docs

Author: nielslyngsoe

packages/uui-menu-item/lib/uui-menu-item.element.ts

@@ -6,7 +6,7 @@ import {
 } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -122,6 +122,12 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
   @property({ type: String, attribute: 'caret-label' })
   public caretLabel = 'Reveal the underlying items';
 
+  /**
+   * Overwrite the expand symbol rendering, this replaces the Expand Symbol from UI Library.
+   */
+  @property({ attribute: false })
+  public renderExpandSymbol?: () => Element | TemplateResult<1> | undefined;
+
   @state()
   private iconSlotHasContent = false;
 
@@ -223,9 +229,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
               id="caret-button"
               aria-label=${this.caretLabel}
               @click=${this._onCaretClicked}>
-              <uui-symbol-expand
-                aria-hidden="true"
-                ?open=${this.showChildren}></uui-symbol-expand>
+              ${this.#renderExpandSymbol()}
             </button>`
           : ''}
         ${this.href && this.selectOnly !== true && this.selectable !== true
@@ -241,6 +245,19 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
     `;
   }
 
+  #renderExpandSymbol() {
+    if (this.renderExpandSymbol) {
+      const result = this.renderExpandSymbol();
+      if (result) {
+        return result;
+      }
+    }
+
+    return html`<uui-symbol-expand
+      aria-hidden="true"
+      ?open=${this.showChildren}></uui-symbol-expand>`;
+  }
+
   static styles = [
     css`
       :host {

packages/uui-menu-item/lib/uui-menu-item.story.ts

@@ -126,6 +126,40 @@ export const Nested: Story = {
   },
 };
 
+export const CustomExpandSymbol: Story = {
+  render: args => html`
+    ${labelNames.map(
+      (name: string) =>
+        html` <uui-menu-item
+          label="${name}"
+          .caretLabel="${args.caretLabel}"
+          .renderExpandSymbol=${() => {
+            return html`<uui-icon name="favorite"></uui-icon>`;
+          }}
+          has-children>
+          ${renderItems()}
+        </uui-menu-item>`,
+    )}
+  `,
+  parameters: {
+    docs: {
+      source: {
+        code: html`
+          <uui-menu-item
+            label="Menu Item 1"
+            has-children
+            .renderExpandSymbol=${() => {
+              return html`<uui-icon name="favorite"></uui-icon>`;
+            }}>
+            <uui-menu-item label="Nested Menu Item 1"></uui-menu-item>
+            <uui-menu-item label="Nested Menu Item 2"></uui-menu-item>
+          </uui-menu-item>
+        `.strings,
+      },
+    },
+  },
+};
+
 export const Active: Story = {
   render: () => {
     const [activeIndex, setActiveIndex] = useState<number>(1);