feat(select): add slot selectedLabel

ovh · Sep 8, 2023 · 8029fa3 · 8029fa3
1 parent 116d583
commit 8029fa3
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 12 deletions.
diff --git a/packages/components/select/src/components/osds-select-option/osds-select-option.scss b/packages/components/select/src/components/osds-select-option/osds-select-option.scss
@@ -22,6 +22,8 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     word-break: break-all;
+    display: inline-flex;
+    align-items: flex-end;
   }
 }
 
@@ -31,6 +33,10 @@
   outline-offset: var(--ods-size-inset-02);
 }
 
+slot[name="selectedLabel"] {
+  display: none;
+}
+
 // apply the theme template for the component
 @include ods-theme-component() {
   @include osds-select-option-theme-color();

diff --git a/packages/components/select/src/components/osds-select-option/osds-select-option.spec.ts b/packages/components/select/src/components/osds-select-option/osds-select-option.spec.ts
@@ -16,7 +16,8 @@ describe('spec:osds-select-option', () => {
   const baseAttribute = { value: '' };
   let page: SpecPage;
   let instance: OsdsSelectOption;
-  let slotPlaceholder: HTMLElement | null | undefined;
+  let slotLabel: HTMLElement | null | undefined;
+  let slotSelectedLabel: HTMLElement | null | undefined;
 
   afterEach(() => {
     jest.clearAllMocks();
@@ -34,7 +35,8 @@ describe('spec:osds-select-option', () => {
     });
 
     instance = page.rootInstance;
-    slotPlaceholder = page.root?.shadowRoot?.querySelector('slot');
+    slotLabel = page.root?.shadowRoot?.querySelector('slot:not([name])');
+    slotSelectedLabel = page.root?.shadowRoot?.querySelector('slot[name="selectedLabel"]');
   }
 
   it('should render', async () => {
@@ -44,9 +46,14 @@ describe('spec:osds-select-option', () => {
   });
 
   describe('contents', () => {
-    it('should have a placeholder slot', async () => {
+    it('should have a label slot', async () => {
       await setup({ attributes: {} });
-      expect(slotPlaceholder).toBeTruthy();
+      expect(slotLabel).toBeTruthy();
+    });
+
+    it('should have a selected label slot', async () => {
+      await setup({ attributes: {} });
+      expect(slotSelectedLabel).toBeTruthy();
     });
   });
 

diff --git a/packages/components/select/src/components/osds-select-option/osds-select-option.tsx b/packages/components/select/src/components/osds-select-option/osds-select-option.tsx
@@ -70,7 +70,12 @@ export class OsdsSelectOption implements OdsSelectOptionAttribute, OdsSelectOpti
    */
   @Method()
   async getLabel() {
-    return this.el.innerText;
+    const selectedLabel = this.el.querySelector('[slot="selectedLabel"]');
+    if (selectedLabel) {
+      return selectedLabel.innerHTML;
+    } else {
+      return this.el.innerHTML;
+    }
   }
 
   @Watch('value')
@@ -115,6 +120,7 @@ export class OsdsSelectOption implements OdsSelectOptionAttribute, OdsSelectOpti
             <slot></slot>
           </span>
         </div>
+        <slot name="selectedLabel"></slot>
       </Host>
     );
   }

diff --git a/packages/components/select/src/components/osds-select/osds-select.e2e.ts b/packages/components/select/src/components/osds-select/osds-select.e2e.ts
@@ -23,8 +23,14 @@ describe('e2e:osds-select', () => {
 
     await page.setContent(`
       <osds-select ${odsStringAttributes2Str(stringAttributes)}>
-        <osds-select-option value="42">value</osds-select-option>
-        <osds-select-option value="43">value2</osds-select-option>
+        <osds-select-option value="42">
+          value1
+          <span slot='selectedLabel'>1</span>
+        </osds-select-option>
+        <osds-select-option value="43">
+          value2
+          <span slot='selectedLabel'>2</span>
+        </osds-select-option>
       </osds-select>
     `);
     await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
@@ -52,6 +58,21 @@ describe('e2e:osds-select', () => {
       expect(divElement).not.toBeNull();
       expect(optionDivElement).not.toBeNull();
     });
+
+    it('should display selectedLabel as selected option', async () => {
+      await setup({ attributes: { } });
+      const secondOption = await page.find('osds-select osds-select-option:last-child');
+      await el.click();
+      await page.waitForChanges();
+
+      await secondOption.click();
+      await page.waitForChanges();
+
+      const selectedLabel = await secondOption.find('[slot="selectedLabel"]');
+      const selectedOption = await page.find('osds-select >>> .label');
+
+      expect(selectedOption.innerHTML).toEqual(selectedLabel.innerHTML);
+    });
   });
 
     // TODO getValidity

diff --git a/packages/components/select/src/components/osds-select/osds-select.scss b/packages/components/select/src/components/osds-select/osds-select.scss
@@ -43,6 +43,7 @@
 
   .select-trigger > .label {
     flex: 1;
+    display: inline-flex;
     max-width: calc(100% - 24px);
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/packages/components/select/src/components/osds-select/osds-select.tsx b/packages/components/select/src/components/osds-select/osds-select.tsx
@@ -327,11 +327,8 @@ export class OsdsSelect implements OdsSelectAttribute, OdsSelectEvent, OdsSelect
         <div {...{
           class: `select-trigger${this.opened ? ' opened' : ''}${this.hasError() ? ' error' : ''}`,
         }}>
-          <div class={'label'}>
-            { (!value) ?
-              <slot name={'placeholder'}>&nbsp;</slot>
-              : this.selectedOptionLabel
-            }
+          <div class={'label'} innerHTML={ (value) ? this.selectedOptionLabel : undefined } >
+            { (value) ? undefined : <slot name={'placeholder'}>&nbsp;</slot> }
           </div>
           <osds-icon size={ODS_ICON_SIZE.sm} color={color} name={ODS_ICON_NAME.CHEVRON_DOWN}></osds-icon>
         </div>

diff --git a/packages/components/select/src/index.html b/packages/components/select/src/index.html
@@ -21,6 +21,19 @@
   }
 </style>
 
+<h3>With selected label</h3>
+<osds-select id="withSelectedlabel" inline="">
+  <span slot="placeholder"><i>Select</i> option</span>
+  <osds-select-option value="FR">
+    France
+    <span slot='selectedLabel'>Fr</span>
+  </osds-select-option>
+  <osds-select-option value="Home">
+    <osds-icon name='home' size='sm'></osds-icon> Home
+    <span slot='selectedLabel'><osds-icon name='home' size='sm'></osds-icon></span>
+  </osds-select-option>
+</osds-select>
+
 <h3>default</h3>
 <div style="text-align:center">
   <osds-select id="select1">