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 (or total of 8px left padding)
• Content in large variant should have spacingHorizontalSNudge left and right padding (or total of 18px left padding)

2. Truncation handling

Actual Behavior

If the string of the option selected is longer than the field can hold, the field width stretches indefinitely.

Expected Behavior

If string is too long for the field to hold, it should truncate instead of widening the field.

3. Need more right padding in Large Select

Actual Behavior

Chevron is too close to the right edge of the Large Select

Expected Behavior

Large Select has a right padding of spacingHorizontalM

4. 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

5. Cursor

Actual Behavior

No cursor change when hovering or pressing on Select

Expected Behavior

Cursor changes to pointer when hovering or pressing on Select

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.