feat(picker): add optional message for empty search result

fix #307

src/components/picker/picker.mdx

@@ -25,3 +25,9 @@ When importing ListItem, see [Import Statements](/#import-statements).
 When importing ListItem, see [Import Statements](/#import-statements).
 
 <limel-example name="limel-example-picker-icons" path="picker" />
+
+### With no suggestions and a message for empty search results
+
+When importing ListItem, see [Import Statements](/#import-statements).
+
+<limel-example name="limel-example-picker-empty-suggestions" path="picker" />

src/components/picker/picker.scss

@@ -27,3 +27,12 @@
         overflow-y: auto;
     }
 }
+
+.dropdown--spinner {
+    padding-top: pxToRem(6);
+}
+
+.empty-result-message {
+    color: var(--lime-light-grey, #{$lime-light-grey});
+    text-align: center;
+}

src/components/picker/picker.tsx

@@ -48,6 +48,12 @@ export class Picker {
     @Prop()
     public searchLabel: string;
 
+    /**
+     * A message to display when the search returned an empty result
+     */
+    @Prop()
+    public emptyResultMessage: string;
+
     /**
      * True if the control requires a value
      */
@@ -255,7 +261,23 @@ export class Picker {
         }
 
         if (!this.items || !this.items.length) {
-            return;
+            if (!this.emptyResultMessage) {
+                return;
+            }
+
+            return (
+                <div
+                    style={{
+                        width: `${boundingRect.width}px`,
+                    }}
+                    class="dropdown--list mdc-elevation-transition mdc-elevation--z4 mdc-menu-surface mdc-menu-surface--open"
+                    tabindex="-1"
+                >
+                    <p class="empty-result-message">
+                        {this.emptyResultMessage}
+                    </p>
+                </div>
+            );
         }
 
         const hasIcons = this.items.some(item => {
@@ -271,7 +293,7 @@ export class Picker {
                         mdc-elevation-transition
                         mdc-elevation--z4
                         mdc-menu-surface mdc-menu-surface--open
-                        ${this.displayFullList ? 'display-full-list' : ''}	
+                        ${this.displayFullList ? 'display-full-list' : ''}
                         `}
                 tabindex="-1"
             >

src/examples/picker/picker-empty-suggestions.tsx

@@ -0,0 +1,79 @@
+import { Component, h, State } from '@stencil/core';
+import { ListItem } from '../../interface';
+
+const NETWORK_DELAY = 500;
+
+@Component({
+    tag: 'limel-example-picker-empty-suggestions',
+    shadow: true,
+    styleUrl: 'picker.scss',
+})
+export class PickerExample {
+    private allItems: Array<ListItem<number>> = [
+        { text: 'Admiral Swiggins', value: 1 },
+        { text: 'Ayla', value: 2 },
+        { text: 'Clunk', value: 3 },
+        { text: 'Coco', value: 4 },
+        { text: 'Derpl', value: 5 },
+        { text: 'Froggy G', value: 6 },
+        { text: 'Gnaw', value: 7 },
+        { text: 'Lonestar', value: 8 },
+        { text: 'Leon', value: 9 },
+        { text: 'Raelynn', value: 10 },
+        { text: 'Skølldir', value: 11 },
+        { text: 'Voltar', value: 12 },
+        { text: 'Yuri', value: 13 },
+    ];
+
+    @State()
+    private selectedItem: ListItem<number>;
+
+    constructor() {
+        this.search = this.search.bind(this);
+        this.onChange = this.onChange.bind(this);
+    }
+
+    public render() {
+        return [
+            <limel-picker
+                label="Favorite awesomenaut"
+                value={this.selectedItem}
+                searcher={this.search}
+                emptyResultMessage="No results"
+                onChange={this.onChange}
+                onInteract={this.onInteract}
+            />,
+            <p>
+                Value: <code>{JSON.stringify(this.selectedItem)}</code>
+            </p>,
+        ];
+    }
+
+    private search(query: string): Promise<ListItem[]> {
+        return new Promise(resolve => {
+            if (query === '') {
+                // Simulate some network delay
+                setTimeout(() => {
+                    resolve([]);
+                }, NETWORK_DELAY);
+            }
+            // Simulate some network delay
+            setTimeout(() => {
+                const filteredItems = this.allItems.filter(item => {
+                    return item.text
+                        .toLowerCase()
+                        .includes(query.toLowerCase());
+                });
+                resolve(filteredItems);
+            }, NETWORK_DELAY);
+        });
+    }
+
+    private onChange(event: CustomEvent<ListItem<number>>) {
+        this.selectedItem = event.detail;
+    }
+
+    private onInteract(event) {
+        console.log('Value interacted with:', event.detail);
+    }
+}