feat(design): create select component

[xelaint]

trafficstars

PR Checklist

Please check if your PR fulfills the following requirements:

• [x] The commit message follows our guidelines: https://github.com/graycoreio/daffodil/blob/develop/CONTRIBUTING.md#commit
• [x] Tests for the changes have been added (for bug fixes / features)
• [x] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

There is no dropdown components.

Things that need to be added:

• [ ] Loading state
• [x] Error state
• [x] When a user clicks somewhere outside a dropdown when it's open, the dropdown should close. (use cdk overlay)
• [ ] By default, a dropdown should either render a label text of what the dropdown is or one of the options as the selected value (i.e. shipping addresses, render the first available address as the selected option or the "default" address a user has set in their account)
• [x] Keyboard behavior for selecting options
• [ ] Accessibility considerations (aria label announcements for each option, selected option announcement)
• [x] Tests
• [x] Documentation
• [x] Implement as CVA
• [x] Don't render options when dropdown isn't open
• [x] Rename to DaffSelect
• [x] Block tab event if select is open

Fixes: #2467

What is the new behavior?

A dropdown component that displays a list of options.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[griest024]

By default, a dropdown should either render a label text of what the dropdown is or one of the options as the selected value (i.e. shipping addresses, render the first available address as the selected option or the "default" address a user has set in their account)

So does the dropdown track the selected state or is that the responsibility of the consuming component?

[xelaint]

By default, a dropdown should either render a label text of what the dropdown is or one of the options as the selected value (i.e. shipping addresses, render the first available address as the selected option or the "default" address a user has set in their account)

So does the dropdown track the selected state or is that the responsibility of the consuming component?

@damienwebdev any input on this?

[griest024]

@xelaint we discussed this on a call, the component implementation will change significantly. You will probably have some styling to do after

[griest024]

@xelaint this is ready for you to do some styling and fix skeleton. I haven't touched keyboard navigation or accessbility yet

[xelaint]

How does this component actually handle errors aside from having the daff-error-message slot? Do we need to add an error property? Since I need to add error styles to the component on top of showing an error message.

[xelaint]

TODO: An opened select should not be tabbable. Tab event needs to be blocked so focus is not lost on select. @griest024

[griest024]

TODO: An opened select should not be tabbable. Tab event needs to be blocked so focus is not lost on select. @griest024

done

[xelaint]

@griest024 Keyboard event handling needs to be added. I've also listed other features that will need to be added too.

Keyboard events:

• [x] up and down arrow keys increment and decrement the selected option
• [x] Enter and ESC keys close the options list
• [x] Enter, space, alt + up/down should open the options list. Should not have event bubbling
• [x] Up and down keys on button with the options list closed changes selected option, but don't update the control until field is blurred

Other features:

• [x] Focus should go back to the select component when options list is closed
• [ ] Selected option should not be updated until options list is closed
• [ ] Don't update the form control until menu is closed
• [x] Form control value should not be updated if options list is closed with the ESC key
• [x] Selected and active should be equivalent

[griest024]

@xelaint I added keyboard stuff

[xelaint]

@griest024 There's a weird scrolling behavior if I open the select using Alt + Down key. https://www.loom.com/share/3123202d6ece417f8d2bc4a3e18af75a?sid=2c2c9540-2563-48c8-85ff-1e4d87203151

[damienwebdev]

This needs a rebase against develop.

[xelaint]

To do for me: fix conflict, rebase against develop, convert to standalone

[xelaint]

Issues

• selectHighlighted is not updating the selected value
• Should (keydown.arrowdown)="selectNext($event)" and (keydown.arrowup)="selectPrevious($event)" be selecting a value? arrow down and up for native select only opens up the options overlay.

[xelaint]

@damienwebdev ready for review