-
Notifications
You must be signed in to change notification settings - Fork 54
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ODS > Forms > Dropdown List #943
Comments
I need this component for my project and I will be glad to help. I'm considering the alternatives about how boosted should provide this component. Implementation choice
I'm really considering the first option because the Dropdown List is part of the form section of the design system indicating that the By the way, some details are missing in the design system and questions must be answered before implementing this component: UX / UI
A11Y
|
I've made a codepen to see how this component can be implemented with current dropdown css and what is needed to be done (without any javascript logic beside actual dropdown) |
Hi, I updated my codepen according to our last discussion: https://codepen.io/razyon/full/rNYjQBm The code basis is from accessible select. |
Not sure about where this link should be, but here is an example of the a11y team expectations for the multiple selection dropdown : https://adrianroselli.com/2022/05/under-engineered-multi-selects.html |
Looking forward to this pls. Any chance to get released? |
@Dorian-Grim It's one of the components we'd like to continue working on after the release of the dark mode. More information will come in this issue or the corresponding PR when it'll be started. |
Mentioning #2513 as this feature is needed by another project (more details in the closed issue). Note: If the DSM's Dropdown Specifications change during the specifications/development process, think to ping @MathieuPomm whose teams have started to develop some variants on their own. |
Forms > Dropdown List
Requirement
As a developer
I want to insert a Dropdown List
So That I will get this ready to use component compatible with Orange design specifications and a11y requirements
DSM reference
General description
A dropdown is used for selecting one or multiple options from a predefined list of options.
UI specifications
Anatomy
Variants
For all variants of the dropdown component, there are 2 options:
Single selection
The single selection variants allow users to select one single option from the drop down.
Multiple selection
The multiple selection variants allow users to select one or more options simultaneously. When there are a large number of options available, consider using the optional search field to allow users to narrow down the list of options and find the option they want to select.ℹ️ Multiple selection version is dropped. We only keep the version with the tags
Multiple selection with tags
The multiple selection variant also includes the option of using tags. This option allows users to quickly remove unwanted selections using the remove icon in the tag. This option is also available with a search field if needed.
Dropdown with search
This is a separate component that needs to be defined outside this component.
States
The dropdown field has four possible states:
The dropdown menu has three possible states:
Internationalisation
For RTL (right-to-left) languages, the layout of the dropdown is mirrored. The label is right-aligned.
Appearance
Label position
Labels can be positioned on top or to the side of the dropdown. Top labels are the default and are recommended because they work better with long copy and responsive layouts. Side labels are useful when vertical space is limited.
Placeholder text
By default, the dropdown displays placeholder text in the dropdown when closed. The placeholder text prompts the user to select an option from the dropdown menu.
Width
The width of a dropdown can be set based on the width of the menu items or the page layout.
Height
A scrollbar should appear when the number of items extends beyond the height of the menu.
Required dropdown
Dropdowns can be marked as required if needed by including an asterisk after the label. Include hint text on the page to explain what the asterisk means.
Placement
xxx
UX specifications
Interaction
For the multiple selection dropdown, the text field can display up to two rows of selected options by expanding vertically. If the number of selections exceeds the available space of the text box, an indicator appears to display the additional number selected. Opening the menu will show all the selected options.
Dropdown multiple selection overflowin order for the user to view all selected items, when you open the dropdown, the first part of the list will show the items already selected under the search bar, and the rest of the list would show under (the selected items are not in the rest of the list anymore, just at the top). (To Be Confirmed) This behavior is available in all multiple selection otpion with or without the searchMouse:
Keyboard:
Touch (mobile): same as the mouse interaction
Animations
Accessibility
Visual Accessibility
Usage Accessibility
Ressources
General infos
Best example to follow
Technical specifications
Let's start prototyping from https://www.24a11y.com/2019/select-your-poison-part-2/!
We could look at https://ng-select.github.io/ng-select#/data-sources for ideas about arguments, attributes and explanations in the documentation. It is really close to https://www.24a11y.com/2019/select-your-poison-part-2/.
First tries by David
Example? https://www.w3schools.com/howto/howto_js_filter_dropdown.aspThe component need to expose (Note After the latest discussions, the following list must be to adapt)
an optional attribute that turns on the search box(an optional attribute that defines the number over wich to display the searchbox option)HTML Structure
xxx
JavaScript
xxx
Documentation in Boosted
xxx
Implementation tasks
Related issues that could be closed
The text was updated successfully, but these errors were encountered: