Library

React Components / v9 (@fluentui/react-components)

System Info

https://master--628d031b55e942004ac95df1.chromatic.com/?path=/docs/preview-components-select--default

Are you reporting Accessibility issue?

no

Reproduction

https://master--628d031b55e942004ac95df1.chromatic.com/?path=/docs/preview-components-select--default

Bug Description

1. Content padding

Actual Behavior

Content does not have interior left and right padding. This will cause misalignment with the Input component.

Expected Behavior

• Content in small and medium variants should have spacingHorizontalXXS left and right padding
• Content in large variant should have spacingHorizontalSNudge left and right padding

2. Border state changes

Actual Behavior

Borders don't change color in hover, pressed, and selected states (besides blue focus underline)

Expected Behavior

• Left, top, and right borders use colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected in hover, pressed, and selected states
• Bottom border uses colorNeutralStrokeAccessibleHover and colorNeutralStrokeAccessiblePressed in hover and pressed states

3. Listbox alignment

Actual Behavior

Listbox popup is slightly misaligned from the Dropdown field

Expected Behavior

• Listbox popup aligns to left of Dropdown field and matches the width of the field (unless the popup hits a min-width of 160px by default)
• Top of Listbox popup meets the bottom of Dropdown field with no spacing in between

4. Focus indicator

Actual Behavior

Focus indicator is always present on an option when popup is open

Expected Behavior

This one's more of a question: Can the focus indicator only appear once the user hits a character or an arrow key, or if the popup is triggered by SpaceKey/EnterKey? Wondering if there's a way to lessen visual weight for mouse users.

5. Cursor

Actual Behavior

No cursor change when hovering or pressing on Dropdown

Expected Behavior

Cursor changes to pointer when hovering or pressing on Dropdown

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.