fixup! feat(menu): use primaryComponent from the limel-list

Author: LucyChyzhova

src/components/list-item/list-item.scss

@@ -67,7 +67,8 @@ limel-list-item[disabled]:not([disabled='false']) {
     .text,
     limel-icon,
     img,
-    .boolean-input {
+    .boolean-input,
+    limel-menu-item-meta {
         opacity: 0.4;
     }
 }

src/components/list-item/list-item.tsx

@@ -252,7 +252,7 @@ export class ListItemComponent implements ListItem {
         const PrimaryComponent: any = primary.name;
         const props = primary.props || {};
 
-        return <PrimaryComponent {...props} />;
+        return <PrimaryComponent {...props} disabled={this.disabled} />;
     };
 
     private renderImage = () => {

src/components/list-item/menu-item-meta/menu-item-meta.tsx

@@ -97,7 +97,7 @@ export class MenuItemMeta {
         const PrimaryComponent: any = primary.name;
         const props = primary.props || {};
 
-        return <PrimaryComponent {...props} />;
+        return <PrimaryComponent {...props} disabled={this.disabled} />;
     }
 
     private renderChevron() {

src/components/menu/examples/menu-primary-component.tsx

@@ -0,0 +1,77 @@
+import { LimelMenuCustomEvent, MenuItem } from '@limetech/lime-elements';
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * With a primary component
+ *
+ * Menu items can render a custom primary component using the
+ * `primaryComponent` prop, just like list items.
+ *
+ * The component is rendered before the item's text.
+ */
+@Component({
+    tag: 'limel-example-menu-primary-component',
+    shadow: true,
+})
+export class MenuPrimaryComponentExample {
+    @State()
+    private lastSelectedItem: string;
+
+    private items: MenuItem[] = [
+        {
+            text: 'Upload file',
+            secondaryText: 'Completed',
+            primaryComponent: {
+                name: 'limel-circular-progress',
+                props: {
+                    value: 10,
+                    maxValue: 10,
+                    suffix: '%',
+                    displayPercentageColors: true,
+                    size: 'small',
+                },
+            },
+        },
+        {
+            text: 'Sync contacts',
+            secondaryText: 'In progress…',
+            primaryComponent: {
+                name: 'limel-circular-progress',
+                props: {
+                    value: 4,
+                    maxValue: 10,
+                    suffix: '%',
+                    displayPercentageColors: true,
+                    size: 'small',
+                },
+            },
+        },
+        {
+            text: 'Generate report',
+            secondaryText: 'Just started',
+            primaryComponent: {
+                name: 'limel-circular-progress',
+                props: {
+                    value: 1,
+                    maxValue: 10,
+                    suffix: '%',
+                    displayPercentageColors: true,
+                    size: 'small',
+                },
+            },
+        },
+    ];
+
+    public render() {
+        return [
+            <limel-menu items={this.items} onSelect={this.handleSelect}>
+                <limel-button label="Tasks" slot="trigger" />
+            </limel-menu>,
+            <limel-example-value value={this.lastSelectedItem} />,
+        ];
+    }
+
+    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {
+        this.lastSelectedItem = event.detail.text;
+    };
+}

src/components/menu/menu.tsx

@@ -60,6 +60,7 @@ const DEFAULT_ROOT_BREADCRUMBS_ITEM: BreadcrumbsItem = {
  * @exampleComponent limel-example-menu-surface-width
  * @exampleComponent limel-example-menu-separators
  * @exampleComponent limel-example-menu-icons
+ * @exampleComponent limel-example-menu-primary-component
  * @exampleComponent limel-example-menu-badge-icons
  * @exampleComponent limel-example-menu-grid
  * @exampleComponent limel-example-menu-secondary-text

src/components/menu/menu.types.ts

@@ -124,8 +124,11 @@ export interface MenuItem<T = any> {
 
     /**
      * Component used to render additional content in the menu item.
-     * Rendered before the item's text, similar to `primaryComponent`
-     * on `ListItem`.
+     *
+     * When the menu item is disabled, the `disabled` prop is automatically
+     * propagated to the primary component.
+     *
+     * See `limel-example-menu-primary-component` for usage.
      */
     primaryComponent?: ListComponent;