feat(select): add badge in select options

packages/core/src/components.d.ts

@@ -185,9 +185,11 @@ export namespace Components {
     label?: string
     selected?: boolean
     disabled?: boolean
+    badge?: { type: string; label: string }
   }>;
         "placeholder": string;
         "readonly"?: boolean;
+        "setBadge": () => Promise<void>;
         "value"?: IonTypes.IonSelect['value'];
     }
     interface AtomTag {
@@ -730,6 +732,7 @@ declare namespace LocalJSX {
     label?: string
     selected?: boolean
     disabled?: boolean
+    badge?: { type: string; label: string }
   }>;
         "placeholder"?: string;
         "readonly"?: boolean;

packages/core/src/components/select/select.spec.ts

@@ -7,10 +7,11 @@ const optionsMock: {
   selected?: boolean
   disabled?: boolean
   label?: string
+  badge?: { type: string; label: string }
 }[] = [
   { value: 'apple', selected: true },
   { value: 'banana', disabled: true },
-  { value: 'orange' },
+  { value: 'orange', badge: { type: 'success', label: 'New' } },
 ]
 
 describe('AtomSelect', () => {
@@ -252,17 +253,21 @@ describe('AtomSelect', () => {
     await page.waitForChanges()
 
     const selectEl = page.root?.shadowRoot?.querySelector('ion-select')
-    const spy = jest.fn()
+    const spyIonBlur = jest.fn()
+    const spySetBadge = jest.spyOn(page.rootInstance, 'setBadge')
 
-    page.root?.addEventListener('ionBlur', spy)
+    page.root?.addEventListener('ionBlur', spyIonBlur)
 
     if (selectEl) {
       selectEl.dispatchEvent(new Event('ionBlur'))
     }
 
+    await page.waitForChanges()
+
     page.root?.dispatchEvent(new CustomEvent('ionBlur'))
 
-    expect(spy).toHaveBeenCalled()
+    expect(spyIonBlur).toHaveBeenCalled()
+    expect(spySetBadge).toHaveBeenCalled()
   })
 
   it('emits atomCancel event on select cancel', async () => {
@@ -331,4 +336,18 @@ describe('AtomSelect', () => {
 
     expect(handleDismiss).not.toHaveBeenCalled()
   })
+
+  it('should filter options with badge', async () => {
+    const page = await newSpecPage({
+      components: [AtomSelect],
+      html: '<atom-select />',
+    })
+
+    await page.waitForChanges()
+    const mockFiltered = optionsMock.filter((option) => option?.badge?.label)
+    const instanceObjetct =
+      page.rootInstance.filterOptionsWithBadge(optionsMock)
+
+    expect(Object.keys(instanceObjetct).length).toEqual(mockFiltered.length)
+  })
 })

packages/core/src/components/select/select.tsx

@@ -8,6 +8,7 @@ import {
   Host,
   Prop,
   h,
+  Method,
 } from '@stencil/core'
 
 import { IconProps } from '../../icons'
@@ -40,18 +41,54 @@ export class AtomSelect {
     label?: string
     selected?: boolean
     disabled?: boolean
+    badge?: { type: string; label: string }
   }> = []
 
   @Event() atomBlur!: EventEmitter<void>
   @Event() atomCancel!: EventEmitter<void>
   @Event() atomChange!: EventEmitter<string>
   @Event() atomDismiss!: EventEmitter<void>
   @Event() atomFocus!: EventEmitter<void>
+  @Method() setBadge() {
+    const ionItemElements = document.querySelectorAll('ion-item')
 
+    ionItemElements.forEach((itemElement) => {
+      const elementText = itemElement.textContent
+      const optionWithBadge = this.optionsWhitBadge[elementText]
+
+      if (optionWithBadge) {
+        const badgeElement = document.createElement('atom-badge')
+        const { type, label } = optionWithBadge.badge
+
+        badgeElement.setAttribute('type', type)
+        badgeElement.textContent = label
+
+        itemElement.style.width = 'fit-content'
+        itemElement.appendChild(badgeElement)
+      }
+    })
+  }
+
+  filterOptionsWithBadge = (options) => {
+    return options?.reduce((optionsWhitBadge, option) => {
+      if (option?.badge?.label) {
+        const label = option.label || option.value
+
+        optionsWhitBadge[label] = option
+      }
+
+      return optionsWhitBadge
+    }, {})
+  }
+  optionsWhitBadge = {}
   componentDidLoad() {
     this.selectEl.addEventListener('ionDismiss', this.handleDismiss)
   }
 
+  componentWillLoad() {
+    this.optionsWhitBadge = this.filterOptionsWithBadge(this.options)
+  }
+
   disconnectedCallback() {
     this.selectEl.removeEventListener('ionDismiss', this.handleDismiss)
   }
@@ -67,6 +104,8 @@ export class AtomSelect {
   }
 
   private handleBlur = () => {
+    this.setBadge()
+
     this.selectEl.removeEventListener('ionBlur', this.handleBlur)
     this.atomBlur.emit()
   }

packages/core/src/components/select/stories/select.core.stories.tsx

@@ -32,13 +32,19 @@ const createSelect = (args) => {
         atomSelectElements.forEach((atomSelect) => {
           atomSelect.options = [
             { id: '1', value: 'Red', disabled: false },
-            { id: '2', value: 'Green', disabled: false },
+            {
+              id: '2',
+              value: 'Green',
+              disabled: false,
+              badge: { type: 'success', label: 'New' },
+            },
             { id: '3', value: 'Blue', disabled: false },
             {
               id: '4',
               value: 'nice_blue',
               disabled: false,
               label: 'Nice Blue',
+              badge: { type: 'success', label: 'New' },
             },
             { id: '5', value: 'Disabled example', disabled: true },
           ]