enable parsing a custom expand symbol render method

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>;
+
   @state()
   private iconSlotHasContent = false;
 
@@ -222,9 +228,11 @@ 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
+                ? this.renderExpandSymbol()
+                : html` <uui-symbol-expand
+                    aria-hidden="true"
+                    ?open=${this.showChildren}></uui-symbol-expand>`}
             </button>`
           : ''}
         ${this.href && this.selectOnly !== true && this.selectable !== true

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

@@ -126,6 +126,35 @@ 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>
+            <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);