feat(picker): support for icons

src/components/picker/picker.mdx

@@ -15,3 +15,6 @@ menu: Components
 ### Multiple values
 
 <limel-example name="limel-example-picker-multiple" path="picker" />
+
+### With icons
+<limel-example name="limel-example-picker-icons" path="picker" />

src/components/picker/picker.tsx

@@ -125,8 +125,18 @@ export class Picker {
     }
 
     public render() {
+        const iconColors = this.chips.some((chip: Chip) => {
+            return 'iconColor' in chip && !!chip.iconColor;
+        });
+        const style = {};
+
+        if (iconColors) {
+            style['--icon-color'] = 'white';
+        }
+
         return [
             <limel-chip-set
+                style={style}
                 tabindex="0"
                 type="input"
                 label={this.label}
@@ -164,6 +174,8 @@ export class Picker {
             id: `${id}`,
             text: listItem.text,
             removable: true,
+            icon: listItem.icon,
+            iconColor: listItem.iconColor,
         };
     }
 
@@ -197,6 +209,10 @@ export class Picker {
             return;
         }
 
+        const hasIcons = this.items.some(item => {
+            return 'icon' in item && !!item.icon;
+        });
+
         return (
             <div
                 style={{
@@ -205,6 +221,7 @@ export class Picker {
                 class="dropdown--list mdc-elevation-transition mdc-elevation--z4"
             >
                 <limel-list
+                    badgeIcons={hasIcons}
                     onChange={this.handleListChange}
                     selectable={true}
                     items={this.items}

src/examples/picker/picker-icons.tsx

@@ -0,0 +1,156 @@
+import { Component, State } from '@stencil/core';
+import { ListItem } from '../../interface';
+
+const NETWORK_DELAY = 500;
+
+@Component({
+    tag: 'limel-example-picker-icons',
+    shadow: true,
+})
+export class PickerIconsExample {
+    private allItems: ListItem[] = [
+        {
+            text: 'Admiral Swiggins',
+            secondaryText:
+                'Anchor Hook, Anchor Drop, Ink Spray, Ink Propulsion',
+            id: 1,
+            icon: 'animals/octopus',
+            iconColor: '#ff7043',
+        },
+        {
+            text: 'Ayla',
+            secondaryText: 'Evil Eye, Rage, Chain Whack, Hop Skip',
+            id: 2,
+            icon: 'Messaging/visible',
+            iconColor: '#ff3195',
+        },
+        {
+            text: 'Clunk',
+            secondaryText: 'Vacuum Bite, Explode, Missiles, Jet Boost',
+            id: 3,
+            icon: 'Industry/robot_3',
+            iconColor: '#57879f',
+        },
+        {
+            text: 'Coco',
+            secondaryText: 'Ball Lightning, Blaze, Shock, Ollie',
+            id: 4,
+            icon: 'Sports/surfing',
+            iconColor: '#29b6f6',
+        },
+        {
+            text: 'Derpl',
+            secondaryText: 'Grid Trap, Siege Mode, Cat Shot, Booster Rocket',
+            id: 5,
+            icon: 'animals/cat',
+            iconColor: '#66bb6a',
+        },
+        {
+            text: 'Froggy G',
+            secondaryText:
+                'Splash Dash, Tornado Move, Bolt .45 Fish-gun, Frog Jump',
+            id: 6,
+            icon: 'animals/frog',
+            iconColor: '#26a69a',
+        },
+        {
+            text: 'Gnaw',
+            secondaryText: 'Acid Spit, Grow Weedling, Bite, Skroggle Jump',
+            id: 7,
+            icon: 'animals/dog',
+            iconColor: '#ffb03b',
+        },
+        {
+            text: 'Lonestar',
+            secondaryText:
+                'Dynamite Throw, Summon Hyper Bull, Blaster, Double Jump',
+            id: 8,
+            icon: 'city/sheriff',
+            iconColor: '#f05750',
+        },
+        {
+            text: 'Leon',
+            secondaryText: 'Tounge Snatch, Cloaking Skin, Slash, Reptile Jump',
+            id: 9,
+            icon: 'Cultures/croissant',
+            iconColor: '#ffcf3d',
+        },
+        {
+            text: 'Raelynn',
+            secondaryText:
+                'Timerift, Snipe, Protoblaster, Six Million Solar Human Jump',
+            id: 10,
+            icon: 'Military/sniper_rifle',
+            iconColor: '#575756',
+        },
+        {
+            text: 'Skølldir',
+            secondaryText: 'Mighty Throw, Earthquake, Bash, Explosive Fart',
+            id: 11,
+            icon: 'food/beer',
+            iconColor: '#ffb03b',
+        },
+        {
+            text: 'Voltar',
+            secondaryText:
+                'Suicide Drones, Healbot, Techno Synaptic Wave, Hover',
+            id: 12,
+            icon: 'Healthcare/brain',
+            iconColor: '#ff3195',
+        },
+        {
+            text: 'Yuri',
+            secondaryText: 'Mine Deploying, Time Warp, Laser, Jet Pack',
+            id: 13,
+            icon: 'Astrology/year_of_monkey',
+            iconColor: '#adadad',
+        },
+    ];
+
+    @State()
+    private selectedItems: ListItem[] = [];
+
+    public render() {
+        return [
+            <limel-picker
+                multiple={true}
+                onChange={event => {
+                    this.selectedItems = [...event.detail];
+                }}
+                label="Favorite awesomenaut"
+                searcher={this.search.bind(this)}
+                value={this.selectedItems}
+            />,
+            <br />,
+            <br />,
+            <div>
+                Value: <code>{JSON.stringify(this.selectedItems)}</code>
+            </div>,
+            <hr />,
+            <p>
+                When importing ListItem or PickerSearchResult, see{' '}
+                <a href="/usage#import-statements">Usage</a>
+            </p>,
+        ];
+    }
+
+    private search(query: string) {
+        return new Promise(resolve => {
+            if (query === '') {
+                resolve([]);
+            }
+            // Simulate some network delay
+            setTimeout(() => {
+                const filteredItems = this.allItems.filter(item => {
+                    const searchText =
+                        item.text.toLowerCase() +
+                        ' ' +
+                        item.secondaryText.toLowerCase();
+
+                    return searchText.includes(query.toLowerCase());
+                });
+                resolve(filteredItems);
+            }, NETWORK_DELAY);
+        });
+    }
+}