fluentui
fluentui copied to clipboard
[Bug]: Button Styling in Pickers not correct since 8.121.6
Package
react
Package version
8.121.6
React version
17.0.1
Environment
System: OS: Windows 11 10.0.22631 CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz Memory: 47.39 GB / 63.72 GB Browsers: Edge: Chromium (127.0.2651.105) Internet Explorer: 11.0.22621.3527 npmPackages: @fluentui/react: ^8.121.5 => 8.121.6 @types/react: 17.0.45 => 17.0.45 react: 17.0.1 => 17.0.1
Current Behavior
In our SPFx 1.20.0 webpart we updated to @fluentui/react 8.121.6 today and experienced an issue with the latest update (at least I think it is an issue and not by design) - the problem seems to be related to this commit https://github.com/microsoft/fluentui/commit/263ead68a05ac23499be137b41e02a5579522c08 from @Hotell and results in an incorrect display of Buttons inside suggestions of Pickers - e.g. in our use case we have a custom taxonomy picker based on Fluent UI Base Picker (but we experience the same issue in People-Picker as well):
When we revert the changes to display, align-items and justify-content the Picker suggestions render correctly again.
Expected Behavior
The change of the Button stylings should not have a negative effect to suggestion items (itemButton css class below ms-Suggestions-item).
Reproduction
https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers
Steps to reproduce
Open the FluentUI Pickers page (https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers) and type in "r" to see "red" + "rose" suggestion centered (wrong)
- Update to @fluentui/react v8.121.6
- Use a Picker (e.g. People Picker)
- Open the suggestion items and see the display of items is now centered and not aligned correctly
Are you reporting an Accessibility issue?
None
Suggested severity
High - No workaround
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
Validations
- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [x] The provided reproduction is a minimal reproducible example of the bug.