fix(select): label property added to bl-select-option to fix #764 (#766)

closes #764

src/components/select/bl-select.stories.mdx

@@ -89,6 +89,20 @@ export const selectOpener = async ({ canvasElement }) => {
   }
 }
 
+export const SpecialUseCaseTemplate = () => html`<bl-select style="width: 50%" placeholder="Usage with custom bl-select-options">
+  <bl-select-option value="1" label="Custom Label 1">Option 1</bl-select-option>
+  <bl-select-option value="2" label="Option 2">
+    <div style="display: flex; align-items: center; column-gap: 4px;">
+      Option 2
+      <bl-tooltip placement="bottom">
+        <bl-button slot="tooltip-trigger" icon="check_fill" variant="tertiary" kind="success">Recommended</bl-button>
+        Some tooltip text
+      </bl-tooltip>
+    </div>
+  </bl-select-option>
+  <bl-select-option value="3">Option 3</bl-select-option>
+</bl-select>`;
+
 export const SelectTemplate = (args) => html`<bl-select
     label=${ifDefined(args.label)}
     class=${ifDefined(args.class)}
@@ -282,6 +296,18 @@ Display a loading icon in place of the search icon with using `search-bar-loadin
   </Story>
 </Canvas>
 
+## Special Use Cases
+
+Select component can render a custom option label if `bl-select-option` has a `label` attribute.
+
+This is useful when you want to show a custom label for an option inside a `bl-select`, but you want to show original content inside the option itself.
+
+<Canvas>
+  <Story name="Special Use Cases">
+    {SpecialUseCaseTemplate.bind({})}
+  </Story>
+</Canvas>
+
 ## `bl-select` Event
 
 Select component fires `bl-select` event once selection changes. This event has a payload in the type of

src/components/select/bl-select.test.ts

@@ -93,7 +93,29 @@ describe("bl-select", () => {
     expect(el.options.length).to.equal(2);
     expect(el.selectedOptions.length).to.equal(1);
   });
+  it("should render bl-select-option label correctly on bl-select", async () => {
+    const el = await fixture<BlSelect>(html`<bl-select>
+      <bl-select-option selected label="custom-label-1" value="1">Option 1</bl-select-option>
+      <bl-select-option value="2">Option 2</bl-select-option>
+    </bl-select>`);
 
+    const selectedOptions = el.shadowRoot?.querySelector<HTMLUListElement>(".selected-options");
+
+    expect(selectedOptions?.children[0].textContent).to.equal("custom-label-1");
+  });
+  it("should render bl-select-option label(s) correctly on bl-select when select is multiple", async () => {
+    const el = await fixture<BlSelect>(html`<bl-select multiple>
+      <bl-select-option selected label="custom-label-1" value="1">Option 1</bl-select-option>
+      <bl-select-option value="2">Option 2</bl-select-option>
+      <bl-select-option selected value="3">Option 3</bl-select-option>
+      <bl-select-option value="4" label="custom-label-4">Option 4</bl-select-option>
+    </bl-select>`);
+
+    const selectedOptions = el.shadowRoot?.querySelector<HTMLUListElement>(".selected-options");
+
+    expect(selectedOptions?.textContent).contains("custom-label-1");
+    expect(selectedOptions?.textContent).contains("Option 3");
+  });
   it("should open select menu", async () => {
     const el = await fixture<BlSelect>(html`<bl-select>button</bl-select>`);
 

src/components/select/bl-select.ts

@@ -358,7 +358,9 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
 
   private inputTemplate() {
     const inputSelectedOptions = html`<ul class="selected-options">
-      ${this._selectedOptions.map(item => html`<li>${item.textContent}</li>`)}
+      ${this._selectedOptions.map(
+        item => html`<li>${item.getAttribute("label") || item.textContent}</li>`
+      )}
     </ul>`;
 
     const isAllSelectedDisabled =

src/components/select/option/bl-select-option.ts

@@ -26,6 +26,12 @@ export default class BlSelectOption<ValueType extends FormValue = string> extend
     this._value = val;
   }
 
+  /**
+   * Sets the label for bl-select, and bl-select renders this value instead of the option's textContent
+   */
+  @property({ type: String, reflect: true, attribute: "label" })
+  label = "";
+
   /**
    * Sets option as disabled
    */