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
+    tag?: { color: string; label: string }
   }>;
         "placeholder": string;
         "readonly"?: boolean;
+        "setTag": () => Promise<void>;
         "value"?: IonTypes.IonSelect['value'];
     }
     interface AtomTag {
@@ -730,6 +732,7 @@ declare namespace LocalJSX {
     label?: string
     selected?: boolean
     disabled?: boolean
+    tag?: { color: 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
+  tag?: { type: string; label: string }
 }[] = [
   { value: 'apple', selected: true },
   { value: 'banana', disabled: true },
-  { value: 'orange' },
+  { value: 'orange', tag: { 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 spySetTag = jest.spyOn(page.rootInstance, 'setTag')
 
-    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(spySetTag).toHaveBeenCalled()
   })
 
   it('emits atomCancel event on select cancel', async () => {
@@ -331,4 +336,17 @@ describe('AtomSelect', () => {
 
     expect(handleDismiss).not.toHaveBeenCalled()
   })
+
+  it('should filter options with tag', async () => {
+    const page = await newSpecPage({
+      components: [AtomSelect],
+      html: '<atom-select />',
+    })
+
+    await page.waitForChanges()
+    const mockFiltered = optionsMock.filter((option) => option?.tag?.label)
+    const instanceObjetct = page.rootInstance.filterOptionsWithTag(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,6 +41,7 @@ export class AtomSelect {
     label?: string
     selected?: boolean
     disabled?: boolean
+    tag?: { color: string; label: string }
   }> = []
 
   @Event() atomBlur!: EventEmitter<void>
@@ -48,10 +50,75 @@ export class AtomSelect {
   @Event() atomDismiss!: EventEmitter<void>
   @Event() atomFocus!: EventEmitter<void>
 
+  @Method()
+  setTag() {
+    const ionItemElements = document.querySelectorAll('ion-item')
+    const optionsWithTag = this.optionsWithTag
+
+    if (!ionItemElements || !optionsWithTag) return
+
+    ionItemElements?.forEach((itemElement) => {
+      const elementText = itemElement.textContent?.trim()
+      const optionWithTag = optionsWithTag[elementText]
+      const sideElement =
+        this.getSideElement(itemElement, 'ion-radio') ||
+        this.getSideElement(itemElement, 'ion-checkbox')
+
+      if (!optionWithTag || !itemElement) return
+
+      const tagElement = document.createElement('atom-tag')
+      const { color, label } = optionWithTag.tag
+
+      tagElement.setAttribute('color', color)
+      tagElement.textContent = label
+      tagElement.classList.add('atom-tag')
+      tagElement.style.marginLeft = '8px'
+
+      const insideElement = sideElement.shadowRoot
+        .firstElementChild as HTMLElement
+
+      insideElement.style.justifyContent = 'start'
+
+      insideElement.firstElementChild.insertAdjacentElement(
+        'afterend',
+        tagElement
+      )
+    })
+  }
+
+  getSideElement(element, name) {
+    return element.getElementsByTagName(name)[0] as HTMLElement
+  }
+  filterOptionsWithTag = (
+    options: Array<{
+      label?: string
+      value?: string
+      tag?: { label: string; color: string }
+    }>
+  ) => {
+    return options?.reduce((optionsWithTag, option) => {
+      if (option?.tag?.label) {
+        const label = option.label || option.value
+
+        if (label) {
+          optionsWithTag[label] = option
+        }
+      }
+
+      return optionsWithTag
+    }, {})
+  }
+
+  optionsWithTag = {}
+
   componentDidLoad() {
     this.selectEl.addEventListener('ionDismiss', this.handleDismiss)
   }
 
+  componentWillLoad() {
+    this.optionsWithTag = this.filterOptionsWithTag(this.options)
+  }
+
   disconnectedCallback() {
     this.selectEl.removeEventListener('ionDismiss', this.handleDismiss)
   }
@@ -67,6 +134,8 @@ export class AtomSelect {
   }
 
   private handleBlur = () => {
+    this.setTag()
+
     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,
+              tag: { color: 'success', label: 'New' },
+            },
             { id: '3', value: 'Blue', disabled: false },
             {
               id: '4',
               value: 'nice_blue',
               disabled: false,
               label: 'Nice Blue',
+              tag: { color: 'success', label: 'New' },
             },
             { id: '5', value: 'Disabled example', disabled: true },
           ]