Adds Dropdown and Option Web Components

[brianchristopherbrady]

Removal the dependency on the FAST Foundation's Select component. Instead, integrated the necessary code directly into our project. This change aims to enhance control over the component's functionality and streamline its integration with our existing codebase.

Dropdown

A dropdown is a user interface component that presents a collapsible list of selectable options to users.

Design Spec

Link to Dropdown Design Spec in Figma

Engineering Spec

The Fluent WC3 Dropdown is a form associated component that extends from the FAST Select FAST Select and is intended to be as close to the Fluent UI React 9 Dropdown implementation as possible. However, due to the nature of web components there will not be 100% parity between the two.

Class: Dropdown

Component Name: fluent-dropdown

Superclass

Name	Module	Package
FormAssociatedSelect	select.form-associated.js	@microsoft/fast-foundation

Static Fields

Name	Privacy	Description	Inherited Form
slottedOptionFilter		A static filter to include only selectable options.	FASTListbox

Fields

Name	Privacy	Type	Default	Description
appearance	public	{ outline: 'outline', underline: 'underline', filledDarker: 'filled-darker', filledLighter: 'filled-lighter' }	outline	Sets style variations.
cleanup	public	() => void		Cleanup function for the listbox positioner.
disabled	public	boolean		The disabled state of the listbox.
displayValue	public	string		The value displayed on the button.
length	public	number		The number of options.
multiple	public	boolean		Indicates if the listbox is in multi-selection mode.
open	public	boolean	false	The open attribute.
options	public	FlunetListboxOption[]		The list of options.
proxy	public
selectedIndex	public	number	-1	The index of the selected option.
selectedOptions	public	FluentListboxOption[]	[]	A collection of the selected options.
size	public	number		The maximum number of options to display.
control-size	public	{ small: 'small', medium: 'medium', large: 'large' }		Sets the size of the dropdown.
value	public	string		Sets the value of the dropdown.

Attributes

Name	Field	Inherited From
appearance	appearance
disabled	disabled
multiple	multiple	FASTListbox
open	open
control-size	control-size

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
selectFirstOption	public	Moves focus to the first selectable option.		void	FASTListbox
setPositioning	public	Calculate and apply listbox positioning based on available viewport space.		void
setSelectedOptions	public	Sets an option as selected and gives it focus.			FASTListbox

Events

Name	Type	Inherited From
change		Fires a custom 'change' event when the value updates
input		Fires a custom 'input' event when the value updates

CSS Parts

Name	Description
control	The element representing the select invoking element
indicator	The element wrapping the visual indicator
listbox	The listbox element
selected-value	The element wrapping the selected value

Slots

Name	Description
	the list of options, either or elements with role="option".
button-container	contains the selected value and indicator slots inside the control element.
content	the content of the button
end	often times a glyph, icon, or button follows the content
indicator	holds the glyph indicating that the select can be expanded. This slot is only available if the button-container slot is not filled.
selected-value	displays the currently selected value text. This slot is only available if the button-container slot is not filled.

---

Suggested Template

selectTemplate from FastFoundation

---

Accessibility

W3 Select Spec

WAI-ARIA Roles, States, and Properties

<fluent-dropdown>

Attributes	value	Description
aria-activedescendant		Indicates the currently active or focused child element within a composite component.
aria-controls		Identifies the element(s) whose contents or presence are controlled by the current element, establishing a relationship between a controlling element and the controlled element(s).
aria-expanded		Indicates the current state of a collapsible element.
aria-haspopup	listbox	Indicates that the current element has a popup context menu or submenu.
current-value		Stores the current value of an input element. RFC
role	combobox	Specifies the purpose or type of an element in the context of user interface components.
tabindex	0	Determines the order in which an element receives focus when navigated using the keyboard.

<div class="listbox".. />

Attributes	value	Description
role	listbox	Specifies the purpose or type of an element in the context of user interface components.

---

Preparation

Fluent Web Component v3 v.s Fluent React 9

Component and Slot Mapping

Fluent UI React 9	Fluent Web Components 3
<Dropdown>	<fluent-dropdown>
<Option>	<fluent-option>

Additional Deltas and Future Work

Persona Component - The Persona component which can be used inside an Option to create additional styling for options is available in FUIRv9 but not yet in the FUI WC3 component library.

Option Grouping - Our dropdown component currently does not support option grouping. In order to provide this functionality, we need to add support for grouped options to the FAST implimentation.

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 12da47698c9121c0345c2f0db481cbae7a91b66e}

[size-auditor[bot]]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 12da47698c9121c0345c2f0db481cbae7a91b66e (build)

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 54335d93aa4244029fb606915ce81ebf50be101b:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

[JustSlone]

@brianchristopherbrady please update your PR to point to master following this guide: https://github.com/microsoft/fluentui/pull/31361