'Select All' for Select Component

[muratcorlu]

No description provided.

[muratcorlu]

Design Meeting Report

Date: 2023-04-18 14:00 GMT+3

---

• "Select All" functionality will be visible by default in multi-select mode
• "Select All" will be sticky on popover. Will not disappear with scroll
• Popover height will still include up to 6 items even if "select all" visible. That means popover height in multi-select mode will be able to bigger than single select mode.
• To make all of the selected items easily visible, selected items will be moved to the top of the list when popover opened (order will not change immediately, when user select/deselect an item)
• "Select all" checkbox will be "indeterminate" mode if some of the options are un-selected.
• "Select all" will not effect current behaviour on showing selected options inside select input. That means, it will still show like "label 1, label 2, label 3, +21" as in if user selects all of the items one-by-one.

[buseselvi]

We are planning to make a prototype test with the ux research team about select all and select search to designs before handing 🙏🏻

[muratcorlu]

Our UX Research started on this together with #265. Results will come soon.

[buseselvi]

Here is the design documentation link 🚀

[ogunb]

• To make all of the selected items easily visible, selected items will be moved to the top of the list when popover opened (order will not change immediately, when user select/deselect an item)

This seems beyond the scope of the issue. I created another one for it.

[ogunb]

Design

Figma Design Document

Implementation

General usage example:

<bl-select 
  multiple 
  placeholder="Choose countries"
  hide-select-all
  select-all-text="Tümünü Seç"
>
  <bl-select-option value="tr">Turkiye</bl-select-option>
  <bl-select-option value="nl">The Netherlands</bl-select-option>
  <bl-select-option value="de">Germany</bl-select-option>
  <bl-select-option value="uk">United Kingdom</bl-select-option>
</bl-select>

Rules

• hide-select-all attribute will hide the "select all" option. False by default.
• select-all-text attribute will change the text of the "select all" option. This will be removed when localization is implemented.
• "Select all" option is sticky.
• Popover height will still include up to 6 items even if "select all" visible. That means popover height in multi-select mode will be able to bigger than single select mode.
• "Select all" checkbox will be "indeterminate" mode if some of the options are un-selected.
• "Select all" will not effect current behaviour on showing selected options inside select input. That means, it will still show like "label 1, label 2, label 3, +21" as in if user selects all of the items one-by-one.
• "Select all" will not take any action on disabled options.

API Reference

New attributes:

Attribute	Description	Default Value
hide-select-all	Hides the "select all" option.	false
select-all-text	Changes the text of the "select all" option.	Select All

[leventozen]

Hey @ogunb, I think it's good to go. However, would be a good idea to verify performance and usability when dealing with a very large number of options, as this could impact rendering and user experience. To accomplish this we may need to optimize the current code a little bit. Avoiding unnecessary dom access' would be enough imo. Let's keep it in mind.

[github-actions]

🎉 This issue has been resolved in version 2.4.0-beta.5 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 3.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀