feat: add select component #4074
Conversation
radium-v
requested review from
awentzel,
chrisdholt,
EisenbergEffect,
Falkicon,
janechu and
nicholasrice
as code owners
packages/web-components/fast-foundation/src/listbox/listbox.spec.ts
Outdated
Show resolved
Hide resolved
packages/web-components/fast-foundation/src/select/select.template.ts
Outdated
Show resolved
Hide resolved
| * Option role. | ||
| * @public | ||
| */ | ||
| export enum OptionRole { |
There was a problem hiding this comment.
I don't see this used (though I could be missing it) - can it be removed?
There was a problem hiding this comment.
Do options have roles, if so, maybe it's just missing the example/unit test?
There was a problem hiding this comment.
I'd actually prefer we stay away from an enum here personally for option. I see this being used for checking the value in certain places, but enums can be costly as they grow over time and an option only ever should have a role of option. If we can remove this I think it would be better.
|
|
||
| if (matches) { | ||
| // this.setFocusOnOption(element); | ||
| console.log(element); |
There was a problem hiding this comment.
does this area still need work?
There was a problem hiding this comment.
This entire handleTypeAhead function is left mostly as-is from the original draft implementation. It needs to be fixed and cleaned up.
packages/web-components/fast-components/src/listbox/listbox.styles.ts
Outdated
Show resolved
Hide resolved
packages/web-components/fast-components/src/option/option.styles.ts
Outdated
Show resolved
Hide resolved
packages/web-components/fast-components/src/select/select.styles.ts
Outdated
Show resolved
Hide resolved
| * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA menuitem }. | ||
| * | ||
| * @public | ||
| */ |
There was a problem hiding this comment.
Does this need proxy logic? I don't think it is form-associated is it?
There was a problem hiding this comment.
The listbox-option isn't form-associated but it does hold its own option element to make option manipulation with the form-associated select significantly easier.
- Adds the select, listbox, and option components
- rename option to listbox-option - add high contrast styles
- reduce id collisions for options
radium-v
force-pushed
the
users/jokreitl/select-component
branch
from
35d9783 to
2ba7a49
Compare
radium-v
force-pushed
the
users/jokreitl/select-component
branch
from
2ba7a49 to
9bcf8ee
Compare
Description
This PR adds the
<fast-option>,<fast-listbox>, and<fast-select>components.Motivation & context
The
fast-optionis a fast version of the HTMLoptionelement. The component uses theoptionARIA role. Clicking afast-optionwill set itsselectedstate totrue.The
fast-listboxis a fast component that uses thelistboxARIA role. It can holdfast-optionelements, and will be able to hold container elements (similar tooptgroup) in the future. The arrow keys allow users to cycle through its children to change whichfast-optionis selected.The
fast-selectis a fast version of the HTMLselectelement. It contains a button, a slottablefast-listbox, and slottedfast-options. The button is displayed by default. Clicking the button will toggle the listbox to display the available options. Clicking an option will close the menu and change the button's display to reflect the selected option.Issue type checklist
Is this a breaking change?
Adding or modifying component(s) in
@microsoft/fast-componentschecklistProcess & policy checklist