fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[Bug]: Button Styling in Pickers not correct since 8.121.6

Open chr-sad opened this issue 4 months ago • 0 comments

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): Image

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)

  1. Update to @fluentui/react v8.121.6
  2. Use a Picker (e.g. People Picker)
  3. 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.

chr-sad avatar Oct 17 '24 17:10 chr-sad