feat(menu): support for icons

Lundalogik · Sep 10, 2019 · bb57785 · bb57785
1 parent 20dc083
commit bb57785
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 1 deletion.
diff --git a/src/components/list/list-item.ts b/src/components/list/list-item.ts
@@ -15,7 +15,7 @@ export interface ListItem {
     disabled?: boolean;
 
     /**
-     * Name of the icon to use. Not valid for `filter`
+     * Name of the icon to use.
      */
     icon?: string;
 

diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
@@ -138,6 +138,7 @@ export class Menu {
                 data-index={index}
                 {...props}
             >
+                {item.icon ? this.renderIcon(item) : null}
                 <span class="mdc-list-item__text">
                     {this.renderText(item.text, item.secondaryText)}
                 </span>
@@ -164,6 +165,23 @@ export class Menu {
         ];
     }
 
+    /**
+     * Render an icon for a list item
+     *
+     * @param {ListItem} item the list item
+     *
+     * @returns {HTMLElement} the icon element
+     */
+    private renderIcon(item: ListItem) {
+        return (
+            <limel-icon
+                class="mdc-list-item__graphic"
+                name={item.icon}
+                size="medium"
+            />
+        );
+    }
+
     private renderTrigger() {
         return (
             <button

diff --git a/src/examples/menu/menu.tsx b/src/examples/menu/menu.tsx
@@ -1,6 +1,15 @@
 import { Component, State } from '@stencil/core';
 import { ListItem, ListSeparator } from '../../interface';
 
+const icons = [
+    'Editing/copy',
+    'Editing/cut',
+    'Editing/paste',
+    '',
+    'user_interface/add',
+    'Editing/delete',
+];
+
 @Component({
     tag: 'limel-example-menu',
     shadow: true,
@@ -61,6 +70,18 @@ export class MenuExample {
                     </limel-menu>
                 </p>
             </section>,
+            <section>
+                <h3>With icons</h3>
+                <p>
+                    <limel-menu
+                        label="Menu"
+                        items={this.items.map((item, index) => {
+                            return { ...item, icon: icons[index] };
+                        })}
+                        onSelect={this.onSelect}
+                    />
+                </p>
+            </section>,
             <hr />,
             <p>
                 When importing ListItem and ListSeparator, see{' '}