fix(select): change select all default behaviour to off (#750)

Closes #749

src/components/select/bl-select.css

@@ -29,7 +29,7 @@
   --popover-position: var(--bl-popover-position, fixed);
 }
 
-:host([multiple]:not([hide-select-all])) .select-wrapper {
+:host([multiple][view-select-all]) .select-wrapper {
   --menu-height: 290px;
 }
 

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

@@ -98,7 +98,7 @@ export const SelectTemplate = (args) => html`<bl-select
     ?required=${args.required}
     ?disabled=${args.disabled}
     ?success=${args.success}
-    ?hide-select-all=${args.hideSelectAll}
+    ?view-select-all=${args.viewSelectAll}
     select-all-text=${ifDefined(args.selectAllText)}
     size=${ifDefined(args.size)}
     help-text=${ifDefined(args.helpText)}
@@ -163,12 +163,12 @@ Selected options will be visible on input seperated by commas.
 
 ## Select All
 
-The Select component features a 'Select All' option, which is automatically displayed when the `multiple` attribute is enabled. If you wish to hide this option, you can do so by adding the `hide-select-all` attribute to the Select component. Additionally, the text for the 'Select All' option can be customized by using the `select-all-text` attribute. Also 'Select All' feature will not have any effect on disabled options.
+The Select component features a 'Select All' option in the Multiple Select, which is displayed when the `view-select-all` attribute is enabled. The text for the 'Select All' option can be customized by using the `select-all-text` attribute. Additionally, 'Select All' feature will not have any effect on disabled options.
 
 <Canvas>
   <Story
     name="Select All"
-    args={{ placeholder: "Choose countries", multiple: true, selectAllText: 'Select All Countries', options: [{
+    args={{ placeholder: "Choose countries", multiple: true, viewSelectAll: true, selectAllText: 'Select All Countries', options: [{
       label: 'United States',
       value: 'us',
     }, ...defaultOptions]  }}
@@ -178,7 +178,7 @@ The Select component features a 'Select All' option, which is automatically disp
   </Story>
   <Story
     name="Select All with Disabled Options"
-    args={{ placeholder: "Choose countries", multiple: true, selectAllText: 'Select All Countries', options: [{
+    args={{ placeholder: "Choose countries", multiple: true, viewSelectAll: true, selectAllText: 'Select All Countries', options: [{
       label: 'United States',
       value: 'us',
       disabled: true
@@ -187,7 +187,7 @@ The Select component features a 'Select All' option, which is automatically disp
   >
     {SelectTemplate.bind({})}
   </Story>
-  <Story name="Select All Hidden" args={{ placeholder: "Choose countries", value: ['nl'], multiple: true, hideSelectAll: true  }} play={selectOpener}>
+  <Story name="Select All Hidden" args={{ placeholder: "Choose countries", value: ['nl'], multiple: true }} play={selectOpener}>
     {SelectTemplate.bind({})}
   </Story>
 </Canvas>

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

@@ -539,7 +539,7 @@ describe("bl-select", () => {
 
   describe("select all", () => {
     it("should select all options", async () => {
-      const el = await fixture<BlSelect>(html`<bl-select multiple>
+      const el = await fixture<BlSelect>(html`<bl-select multiple view-select-all>
         <bl-select-option value="1">Option 1</bl-select-option>
         <bl-select-option value="2">Option 2</bl-select-option>
         <bl-select-option value="3">Option 3</bl-select-option>
@@ -561,7 +561,7 @@ describe("bl-select", () => {
     });
 
     it("should deselect all options", async () => {
-      const el = await fixture<BlSelect>(html`<bl-select multiple .value=${["1", "2", "3", "4", "5"]}>
+      const el = await fixture<BlSelect>(html`<bl-select multiple view-select-all .value=${["1", "2", "3", "4", "5"]}>
         <bl-select-option value="1">Option 1</bl-select-option>
         <bl-select-option value="2">Option 2</bl-select-option>
         <bl-select-option value="3">Option 3</bl-select-option>
@@ -585,7 +585,7 @@ describe("bl-select", () => {
     });
 
     it("should not act on disabled options", async () => {
-      const el = await fixture<BlSelect>(html`<bl-select multiple>
+      const el = await fixture<BlSelect>(html`<bl-select multiple view-select-all>
         <bl-select-option value="1" disabled>Option 1</bl-select-option>
         <bl-select-option value="2">Option 2</bl-select-option>
         <bl-select-option value="3">Option 3</bl-select-option>
@@ -608,7 +608,7 @@ describe("bl-select", () => {
     });
 
     it("should display indeterminate state when some options are selected", async () => {
-      const el = await fixture<BlSelect>(html`<bl-select multiple>
+      const el = await fixture<BlSelect>(html`<bl-select multiple view-select-all>
         <bl-select-option value="1" selected>Option 1</bl-select-option>
         <bl-select-option value="2">Option 2</bl-select-option>
         <bl-select-option value="3">Option 3</bl-select-option>
@@ -623,7 +623,7 @@ describe("bl-select", () => {
     });
 
     it('should uncheck "select all" checkbox when all available options are selected', async () => {
-      const el = await fixture<BlSelect>(html`<bl-select multiple>
+      const el = await fixture<BlSelect>(html`<bl-select multiple view-select-all>
         <bl-select-option value="1" disabled>Option 1</bl-select-option>
         <bl-select-option value="2" selected>Option 2</bl-select-option>
         <bl-select-option value="3" selected>Option 3</bl-select-option>

src/components/select/bl-select.ts

@@ -145,10 +145,10 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
   customInvalidText?: string;
 
   /**
-   * Hides select all option in multiple select
+   * Views select all option in multiple select
    */
-  @property({ type: Boolean, attribute: "hide-select-all" })
-  hideSelectAll = false;
+  @property({ type: Boolean, attribute: "view-select-all" })
+  viewSelectAll = false;
 
   /**
    * Sets select all text in multiple select
@@ -353,7 +353,7 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
   }
 
   selectAllTemplate() {
-    if (!this.multiple || this.hideSelectAll) {
+    if (!this.multiple || !this.viewSelectAll) {
       return null;
     }