chore: fix combobox extension demos

docs/components/combobox/extensions.md

@@ -46,7 +46,14 @@ export const Github = () => html`
 ## Whatsapp
 
 ```js preview-story
-export const Whatsapp = () => html`
+export const Whatsapp = () => {
+  const obamaImgUrl = new URL('../src/wa-combobox/assets/obama.jpeg', import.meta.url).href;
+  const trumpImgUrl = new URL('../src/wa-combobox/assets/trump.jpeg', import.meta.url).href;
+  const bidenImgUrl = new URL('../src/wa-combobox/assets/biden.jpeg', import.meta.url).href;
+  const bushImgUrl = new URL('../src/wa-combobox/assets/bush.jpeg', import.meta.url).href;
+  const clintonImgUrl = new URL('../src/wa-combobox/assets/clinton.jpeg', import.meta.url).href;
+
+  return html`
     <wa-combobox name="combo" label="Filter chats">
       <wa-option
         title="Barack Obama"
@@ -54,7 +61,7 @@ export const Whatsapp = () => html`
         time="15:02"
         is-user-text
         is-user-text-read
-      image="https://pbs.twimg.com/profile_images/822547732376207360/5g0FC8XX_400x400.jpg"
+        image="${obamaImgUrl}"
         .choiceValue=${'Barack Obama'}
       ></wa-option>
       <wa-option
@@ -62,32 +69,33 @@ export const Whatsapp = () => html`
         text="Take care!"
         time="14:59"
         is-user-text
-      image="https://pbs.twimg.com/profile_images/874276197357596672/kUuht00m_400x400.jpg"
+        image="${trumpImgUrl}"
         .choiceValue=${'Donald Trump'}
       ></wa-option>
       <wa-option
         title="Joe Biden"
         text="Hehe😅. You too, man, you too..."
         time="yesterday"
-      image="https://pbs.twimg.com/profile_images/1308769664240160770/AfgzWVE7_400x400.jpg"
+        image="${bidenImgUrl}"
         .choiceValue=${'Joe Biden'}
       ></wa-option>
       <wa-option
         title="George W. Bush"
         time="friday"
         text="You bet I will. Let's catch up soon!"
-      image="https://pbs.twimg.com/profile_images/828483922266877954/ljYUWUCu_400x400.jpg"
+        image="${bushImgUrl}"
         .choiceValue=${'George W. Bush'}
       ></wa-option>
       <wa-option
         title="Bill Clinton"
         time="thursday"
         text="Dude...😂 😂 😂"
-      image="https://pbs.twimg.com/profile_images/1239440892664086529/iY0Z83Dr_400x400.jpg"
+        image="${clintonImgUrl}"
         .choiceValue=${'Bill Clinton'}
       ></wa-option>
     </wa-combobox>
   `;
+};
 ```
 
 **Whatsapp example shows:**

docs/components/combobox/src/google-combobox/google-combobox.js

@@ -397,7 +397,10 @@ export class GoogleCombobox extends LionCombobox {
   get slots() {
     return {
       ...super.slots,
-      label: () => renderLitAsNode(html` <img alt="Google Search" src="${googleSearchLogoUrl}" />`),
+      label: () =>
+        renderLitAsNode(
+          html` <img alt="Google Search" src="${googleSearchLogoUrl}" style="width:auto; " />`,
+        ),
       prefix: () => renderLitAsNode(html` <span>${googleSearchIcon}</span> `),
       suffix: () =>
         renderLitAsNode(

docs/components/combobox/src/md-combobox/md-combobox.js

@@ -7,8 +7,7 @@ import './style/load-roboto.js';
 
 // TODO: insert ink wc here
 export class MdOption extends LionOption {
-  static get styles() {
+  static styles = [
-    return [
     ...super.styles,
     css`
       :host {
@@ -31,7 +30,6 @@ export class MdOption extends LionOption {
       }
     `,
   ];
-  }
 
   /**
    * @override
@@ -67,8 +65,7 @@ export class MdOption extends LionOption {
 customElements.define('md-option', MdOption);
 
 export class MdCombobox extends MdFieldMixin(LionCombobox) {
-  static get styles() {
+  static styles = [
-    return [
     ...super.styles,
     css`
       .input-group__container {
@@ -84,6 +81,11 @@ export class MdCombobox extends MdFieldMixin(LionCombobox) {
       }
     `,
   ];
+
+  constructor() {
+    super();
+
+    this.showAllOnEmpty = true;
   }
 }
 customElements.define('md-combobox', MdCombobox);

docs/components/combobox/src/wa-combobox/wa-combobox.js

@@ -15,8 +15,7 @@ class WaOption extends LionOption {
     };
   }
 
-  static get styles() {
+  static styles = [
-    return [
     ...super.styles,
     css`
       :host {
@@ -172,7 +171,6 @@ class WaOption extends LionOption {
       } */
     `,
   ];
-  }
 
   render() {
     return html`<div class="wa-option">
@@ -285,14 +283,12 @@ class WaOption extends LionOption {
 customElements.define('wa-option', WaOption);
 
 class WaCombobox extends LionCombobox {
-  static get styles() {
+  static styles = [
-    return [
     ...super.styles,
     css`
       :host {
-          font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui,
+        font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui, BlinkMacSystemFont,
-            BlinkMacSystemFont, Helvetica Neue, Helvetica, Lucida Grande, Kohinoor Devanagari,
+          Helvetica Neue, Helvetica, Lucida Grande, Kohinoor Devanagari, sans-serif;
-            sans-serif;
       }
 
       .input-group__container {
@@ -337,7 +333,6 @@ class WaCombobox extends LionCombobox {
       }
     `,
   ];
-  }
 
   get slots() {
     return {
@@ -360,7 +355,7 @@ class WaCombobox extends LionCombobox {
     /** @configure OverlayMixin */
     this.opened = true;
     /** @configure LionCombobox */
-    this.showAllOnEmpty = true;
+    this.showAllOnEmpty = false;
     /** @configure LionCombobox */
     this.rotateKeyboardNavigation = false;
   }