fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[Bug]: Icon/Label Dropdown with long names are overflown

Open antrianis opened this issue 3 years ago • 0 comments

Library

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

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900K @ 3.50GHz
    Memory: 32.52 GB / 63.62 GB
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.42), ChromiumDev (107.0.1379.1)
    Internet Explorer: 11.0.22000.120

Are you reporting Accessibility issue?

no

Reproduction

https://codepen.io/andr33/pen/eYrRWKR

Bug Description

Actual Behavior

The text overflows in the label when using an icon. Both for the selected item and the rest of the dropdown items. image image

Expected Behavior

The text should be cropped by default or allow access to the text label in order to allow wrapping options by the user. Similar to the dropdown without icon which by default it crops the text: https://codepen.io/avenezia/pen/abLGbKp

Logs

No response

Requested priority

High

Products/sites affected

Power Query

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.

antrianis avatar Sep 20 '22 10:09 antrianis