fix(ui-library): remove slot from select component (#1131)

deven-org · Jul 4, 2024 · 2f9be81 · 2f9be81
1 parent a6e38ad
commit 2f9be81
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 183 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "types": "",
   "scripts": {
     "start:storybook": "yarn tokens:generate && yarn compile:icons && yarn workspace @boiler/ui-library start:storybook",
+    "build:js-example-app": "yarn workspace @boiler/js-example-app build:dev",
     "start:js-example-app": "yarn workspace @boiler/js-example-app start:dev",
     "build:storybook": "yarn tokens:generate && yarn compile:icons && yarn workspace @boiler/ui-library build:storybook",
     "build:ui-library": "yarn tokens:generate && yarn compile:icons && yarn workspace @boiler/ui-library build && yarn workspace @boiler/ui-library compile",

diff --git a/packages/js-example-app/src/index.server.ts b/packages/js-example-app/src/index.server.ts
@@ -61,14 +61,15 @@ export function* renderIndex() {
                 aria-label="Select"
                 select-id="selectId"
                 name="select"
+                options=${JSON.stringify([
+                  { label: '--Please choose an option--', value: '' },
+                  { label: 'option 1', value: 'option1' },
+                  { label: 'option 2', value: 'option2' },
+                  { label: 'option 3', value: 'option3', disabled: true },
+                  { label: 'option 4', value: 'option4' },
+                  { label: 'option 5', value: 'option5', selected: true },
+                ])}
               >
-                <option value="" label="--Please choose an option--"></option>
-                <option value="option1" label="Option 1"></option>
-                <option value="option2" label="Option 2"></option>
-                <option value="option3" label="Option 3"></option>
-                <option value="option4" label="Option 4"></option>
-                <option value="option5" label="Option 5"></option>
-                <option value="option6" label="Option 6"></option>
               </blr-select>
             </div>
 

diff --git a/packages/ui-library/src/components/select/index.css.ts b/packages/ui-library/src/components/select/index.css.ts
@@ -22,10 +22,6 @@ export const staticStyles = css`
     display: flex;
   }
 
-  slot {
-    display: none;
-  }
-
   .blr-select-inner-container {
     flex-grow: 1;
     flex-shrink: 1;

diff --git a/packages/ui-library/src/components/select/index.stories.ts b/packages/ui-library/src/components/select/index.stories.ts
@@ -37,6 +37,14 @@ const defaultParams: BlrSelectType = {
   arialabel: 'Select',
   selectId: 'selectId',
   name: 'select',
+  options: [
+    { label: '--Please choose an option--', value: '' },
+    { label: 'option 1', value: 'option1' },
+    { label: 'option 2', value: 'option2' },
+    { label: 'option 3', value: 'option3', disabled: true },
+    { label: 'option 4', value: 'option4' },
+    { label: 'option 5', value: 'option5', selected: true },
+  ],
 };
 
 export default {
@@ -232,17 +240,7 @@ Select presents users with a list of options from which they can make a single s
   },
 };
 
-const optionsAsChildren = html`
-  <option value="" label="--Please choose an option--"></option>
-  <option value="option1" label="Option 1"></option>
-  <option value="option2" label="Option 2"></option>
-  <option value="option3" label="Option 3"></option>
-  <option value="option4" label="Option 4"></option>
-  <option value="option5" label="Option 5"></option>
-  <option value="option6" label="Option 6"></option>
-`;
-
-export const BlrSelect = (params: BlrSelectType) => BlrSelectRenderFunction(params, optionsAsChildren);
+export const BlrSelect = (params: BlrSelectType) => BlrSelectRenderFunction(params);
 
 BlrSelect.storyName = 'Select';
 BlrSelect.args = defaultParams;
@@ -293,33 +291,24 @@ export const SizeVariant = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction(
-        {
-          ...defaultParams,
-          sizeVariant: 'sm',
-          label: 'Select SM',
-          labelAppendix: '',
-        },
-        optionsAsChildren
-      )}
-      ${BlrSelectRenderFunction(
-        {
-          ...defaultParams,
-          sizeVariant: 'md',
-          label: 'Select MD',
-          labelAppendix: '',
-        },
-        optionsAsChildren
-      )}
-      ${BlrSelectRenderFunction(
-        {
-          ...defaultParams,
-          sizeVariant: 'lg',
-          label: 'Select LG',
-          labelAppendix: '',
-        },
-        optionsAsChildren
-      )}
+      ${BlrSelectRenderFunction({
+        ...defaultParams,
+        sizeVariant: 'sm',
+        label: 'Select SM',
+        labelAppendix: '',
+      })}
+      ${BlrSelectRenderFunction({
+        ...defaultParams,
+        sizeVariant: 'md',
+        label: 'Select MD',
+        labelAppendix: '',
+      })}
+      ${BlrSelectRenderFunction({
+        ...defaultParams,
+        sizeVariant: 'lg',
+        label: 'Select LG',
+        labelAppendix: '',
+      })}
     </div>
   `;
 };
@@ -338,15 +327,12 @@ export const Disabled = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction(
-        {
-          ...defaultParams,
-          disabled: true,
-          label: 'Disabled',
-          labelAppendix: '',
-        },
-        optionsAsChildren
-      )}
+      ${BlrSelectRenderFunction({
+        ...defaultParams,
+        disabled: true,
+        label: 'Disabled',
+        labelAppendix: '',
+      })}
     </div>
   `;
 };
@@ -365,15 +351,12 @@ export const Required = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction(
-        {
-          ...defaultParams,
-          required: true,
-          label: 'Required',
-          labelAppendix: '',
-        },
-        optionsAsChildren
-      )}
+      ${BlrSelectRenderFunction({
+        ...defaultParams,
+        required: true,
+        label: 'Required',
+        labelAppendix: '',
+      })}
     </div>
   `;
 };
@@ -389,16 +372,13 @@ export const HasError = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction(
-        {
-          ...defaultParams,
-          hasError: true,
-          errorMessageIcon: undefined,
-          label: 'Error',
-          labelAppendix: '',
-        },
-        optionsAsChildren
-      )}
+      ${BlrSelectRenderFunction({
+        ...defaultParams,
+        hasError: true,
+        errorMessageIcon: undefined,
+        label: 'Error',
+        labelAppendix: '',
+      })}
     </div>
   `;
 };
@@ -415,22 +395,16 @@ export const FormLabel = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction(
-        {
-          ...defaultParams,
-          label: 'With Label',
-          labelAppendix: '(with Appendix)',
-        },
-        optionsAsChildren
-      )}
-      ${BlrSelectRenderFunction(
-        {
-          ...defaultParams,
-          label: ' ',
-          labelAppendix: ' ',
-        },
-        optionsAsChildren
-      )}
+      ${BlrSelectRenderFunction({
+        ...defaultParams,
+        label: 'With Label',
+        labelAppendix: '(with Appendix)',
+      })}
+      ${BlrSelectRenderFunction({
+        ...defaultParams,
+        label: ' ',
+        labelAppendix: ' ',
+      })}
     </div>
   `;
 };
@@ -446,24 +420,18 @@ export const Icon = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction(
-        {
-          ...defaultParams,
-          icon: 'blrArrowUp',
-          label: 'With Icon',
-          labelAppendix: ' ',
-        },
-        optionsAsChildren
-      )}
-      ${BlrSelectRenderFunction(
-        {
-          ...defaultParams,
-          icon: undefined,
-          label: 'Default Icon',
-          labelAppendix: ' ',
-        },
-        optionsAsChildren
-      )}
+      ${BlrSelectRenderFunction({
+        ...defaultParams,
+        icon: 'blrArrowUp',
+        label: 'With Icon',
+        labelAppendix: ' ',
+      })}
+      ${BlrSelectRenderFunction({
+        ...defaultParams,
+        icon: undefined,
+        label: 'Default Icon',
+        labelAppendix: ' ',
+      })}
     </div>
   `;
 };
@@ -477,28 +445,22 @@ export const FormCaptionGroup = () => {
   return html`
     ${sharedStyles}
     <div class="stories-select">
-      ${BlrSelectRenderFunction(
-        {
-          ...defaultParams,
-          hasHint: true,
-          label: 'Hint message',
-          labelAppendix: ' ',
-        },
-        optionsAsChildren
-      )}
-      ${BlrSelectRenderFunction(
-        {
-          ...defaultParams,
-          icon: undefined,
-          label: 'Hint and error message',
-          labelAppendix: '',
-          hasHint: true,
-          hasError: true,
-          errorMessage: "OMG it's an error",
-          errorMessageIcon: 'blrErrorFilled',
-        },
-        optionsAsChildren
-      )}
+      ${BlrSelectRenderFunction({
+        ...defaultParams,
+        hasHint: true,
+        label: 'Hint message',
+        labelAppendix: ' ',
+      })}
+      ${BlrSelectRenderFunction({
+        ...defaultParams,
+        icon: undefined,
+        label: 'Hint and error message',
+        labelAppendix: '',
+        hasHint: true,
+        hasError: true,
+        errorMessage: "OMG it's an error",
+        errorMessageIcon: 'blrErrorFilled',
+      })}
     </div>
   `;
 };

diff --git a/packages/ui-library/src/components/select/index.test.ts b/packages/ui-library/src/components/select/index.test.ts
@@ -1,10 +1,7 @@
 import '@boiler/ui-library';
-
 import { BlrSelectRenderFunction } from './renderFunction.js';
-
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
-import { html } from 'lit-html';
 import { BlrSelectType } from './index.js';
 
 const sampleParams: BlrSelectType = {
@@ -19,21 +16,18 @@ const sampleParams: BlrSelectType = {
   selectId: 'Peter',
   errorMessageIcon: 'blrErrorFilled',
   theme: 'Light',
+  options: [
+    { label: 'option 1', value: 'option1' },
+    { label: 'option 2', value: 'option2' },
+    { label: 'option 3', value: 'option3', disabled: true },
+    { label: 'option 4', value: 'option4' },
+    { label: 'option 5', value: 'option5', selected: true },
+  ],
 };
 
-const optionsAsChildren = html`
-  <option value="" label="--Please choose an option--"></option>
-  <option value="option1" label="Option 1"></option>
-  <option value="option2" label="Option 2"></option>
-  <option value="option3" label="Option 3"></option>
-  <option value="option4" label="Option 4"></option>
-  <option value="option5" label="Option 5"></option>
-  <option value="option6" label="Option 6"></option>
-`;
-
 describe('blr-select', () => {
   it('is having a select containing the right className', async () => {
-    const element = await fixture(BlrSelectRenderFunction(sampleParams, optionsAsChildren));
+    const element = await fixture(BlrSelectRenderFunction(sampleParams));
 
     const select = querySelectorDeep('select', element.getRootNode() as HTMLElement);
     const className = select?.className;
@@ -100,11 +94,4 @@ describe('blr-select', () => {
 
     expect(className).to.contain('sm');
   });
-
-  it('is rendering options inside slot', async () => {
-    const element = await fixture(BlrSelectRenderFunction({ ...sampleParams, sizeVariant: 'sm' }, optionsAsChildren));
-    const options = querySelectorAllDeep('.blr-select-option', element?.getRootNode() as HTMLElement);
-    const optionsLength = optionsAsChildren.strings[0].trim().split('</option>').filter(Boolean).length;
-    expect(options).to.be.lengthOf(optionsLength);
-  });
 });