search

microsoft / fluent-ui-react

An ecosystem for building highly customizable enterprise class user interfaces.
https://aka.ms/fluent-ui
MIT License
433 stars 54 forks source link

fix(Chat): properly position `actions` with `overflow` #2363

Closed layershifter closed 4 years ago

layershifter commented 4 years ago

Fixes #2298.

DustyTheBot commented 4 years ago

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.48 0.41 1.17:1 2000 959
🦄 Button.Fluent 0.11 0.18 0.61:1 1000 111
🔧 Checkbox.Fluent 0.79 0.28 2.82:1 1000 789
🔧 Dialog.Fluent 0.37 0.19 1.95:1 5000 1833
🔧 Dropdown.Fluent 3.62 0.4 9.05:1 1000 3618
🔧 Icon.Fluent 0.13 0.03 4.33:1 5000 643
🦄 Image.Fluent 0.05 0.08 0.63:1 5000 234
🔧 Slider.Fluent 1.47 0.28 5.25:1 1000 1471
🔧 Text.Fluent 0.05 0.02 2.5:1 5000 257
🦄 Tooltip.Fluent 0.11 18.25 0.01:1 5000 528

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions Scenario | Current PR Ticks | Baseline Ticks | Ratio :--- | ---:| ---:| ---: ProviderMergeThemesPerf.default | [1451](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default.html) | [1148](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default_base.html) | 1.26:1 SegmentMinimalPerf.default | [1520](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default.html) | [1266](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default_base.html) | 1.2:1 Icon.Fluent | [643](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent.html) | [560](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent_base.html) | 1.15:1 BoxMinimalPerf.default | [260](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default.html) | [231](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default_base.html) | 1.13:1 ImageMinimalPerf.default | [244](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default.html) | [215](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default_base.html) | 1.13:1 RadioGroupMinimalPerf.default | [466](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default.html) | [417](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default_base.html) | 1.12:1 HeaderMinimalPerf.default | [455](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default.html) | [410](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default_base.html) | 1.11:1 AccordionMinimalPerf.default | [211](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default.html) | [192](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default_base.html) | 1.1:1 FlexMinimalPerf.default | [365](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default.html) | [336](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default_base.html) | 1.09:1 ItemLayoutMinimalPerf.default | [1776](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default.html) | [1631](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default_base.html) | 1.09:1 PopupMinimalPerf.default | [414](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default.html) | [379](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default_base.html) | 1.09:1 ToolbarMinimalPerf.default | [957](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default.html) | [879](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default_base.html) | 1.09:1 AlertMinimalPerf.default | [572](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default.html) | [532](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default_base.html) | 1.08:1 TextAreaMinimalPerf.default | [3108](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default.html) | [2869](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default_base.html) | 1.08:1 Dropdown.Fluent | [3618](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent.html) | [3376](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent_base.html) | 1.07:1 DialogMinimalPerf.default | [1667](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default.html) | [1571](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default_base.html) | 1.06:1 HeaderSlotsPerf.default | [1369](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default.html) | [1287](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default_base.html) | 1.06:1 ListWith60ListItems.default | [152](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListWith60ListItems.default.html) | [145](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListWith60ListItems.default_base.html) | 1.05:1 ChatDuplicateMessagesPerf.default | [352](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default.html) | [337](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default_base.html) | 1.04:1 DropdownManyItemsPerf.default | [413](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default.html) | [396](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default_base.html) | 1.04:1 FormMinimalPerf.default | [749](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default.html) | [722](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default_base.html) | 1.04:1 Image.Fluent | [234](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent.html) | [224](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent_base.html) | 1.04:1 Slider.Fluent | [1471](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent.html) | [1416](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent_base.html) | 1.04:1 SplitButtonMinimalPerf.default | [13229](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default.html) | [12887](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default_base.html) | 1.03:1 Text.Fluent | [257](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent.html) | [249](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent_base.html) | 1.03:1 DividerMinimalPerf.default | [890](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default.html) | [869](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default_base.html) | 1.02:1 SliderMinimalPerf.default | [1578](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default.html) | [1551](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default_base.html) | 1.02:1 AnimationMinimalPerf.default | [461](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default.html) | [455](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default_base.html) | 1.01:1 DropdownMinimalPerf.default | [3366](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default.html) | [3342](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default_base.html) | 1.01:1 MenuMinimalPerf.default | [1848](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default.html) | [1833](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default_base.html) | 1.01:1 RefMinimalPerf.default | [158](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default.html) | [156](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default_base.html) | 1.01:1 Avatar.Fluent | [959](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent.html) | [948](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent_base.html) | 1.01:1 Button.Fluent | [111](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent.html) | [110](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent_base.html) | 1.01:1 CarouselMinimalPerf.default | [1889](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default.html) | [1896](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default_base.html) | 1:1 ChatMinimalPerf.default | [407](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default.html) | [409](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default_base.html) | 1:1 ListNestedPerf.default | [668](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListNestedPerf.default.html) | [668](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListNestedPerf.default_base.html) | 1:1 Dialog.Fluent | [1833](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent.html) | [1841](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent_base.html) | 1:1 AvatarMinimalPerf.default | [531](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default.html) | [537](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default_base.html) | 0.99:1 HierarchicalTreeMinimalPerf.default | [761](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default.html) | [765](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default_base.html) | 0.99:1 AttachmentSlotsPerf.default | [3255](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default.html) | [3317](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default_base.html) | 0.98:1 ButtonSlotsPerf.default | [570](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default.html) | [580](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default_base.html) | 0.98:1 GridMinimalPerf.default | [776](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default.html) | [793](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default_base.html) | 0.98:1 ListMinimalPerf.default | [312](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default.html) | [320](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default_base.html) | 0.98:1 LoaderMinimalPerf.default | [2351](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default.html) | [2392](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default_base.html) | 0.98:1 ReactionMinimalPerf.default | [2684](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default.html) | [2737](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default_base.html) | 0.98:1 CheckboxMinimalPerf.default | [3522](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default.html) | [3621](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default_base.html) | 0.97:1 EmbedMinimalPerf.default | [5948](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default.html) | [6125](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default_base.html) | 0.97:1 TableMinimalPerf.default | [570](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default.html) | [589](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default_base.html) | 0.97:1 TextMinimalPerf.default | [271](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default.html) | [280](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default_base.html) | 0.97:1 LayoutMinimalPerf.default | [491](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default.html) | [510](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default_base.html) | 0.96:1 CustomToolbarPrototype.default | [3610](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default.html) | [3774](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default_base.html) | 0.96:1 TreeWith60ListItems.default | [233](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeWith60ListItems.default.html) | [243](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeWith60ListItems.default_base.html) | 0.96:1 AttachmentMinimalPerf.default | [877](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default.html) | [925](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default_base.html) | 0.95:1 InputMinimalPerf.default | [874](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default.html) | [919](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default_base.html) | 0.95:1 ListCommonPerf.default | [698](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default.html) | [736](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default_base.html) | 0.95:1 LabelMinimalPerf.default | [825](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default.html) | [874](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default_base.html) | 0.94:1 ProviderMinimalPerf.default | [664](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default.html) | [707](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default_base.html) | 0.94:1 TreeMinimalPerf.default | [849](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default.html) | [903](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default_base.html) | 0.94:1 Tooltip.Fluent | [528](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent.html) | [563](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent_base.html) | 0.94:1 ButtonMinimalPerf.default | [112](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default.html) | [122](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default_base.html) | 0.92:1 ChatWithPopoverPerf.default | [487](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default.html) | [532](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default_base.html) | 0.92:1 MenuButtonMinimalPerf.default | [1413](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default.html) | [1529](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default_base.html) | 0.92:1 TooltipMinimalPerf.default | [702](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default.html) | [762](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default_base.html) | 0.92:1 StatusMinimalPerf.default | [236](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default.html) | [263](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default_base.html) | 0.9:1 VideoMinimalPerf.default | [756](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default.html) | [879](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default_base.html) | 0.86:1 IconMinimalPerf.default | [292](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default.html) | [346](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default_base.html) | 0.84:1 Checkbox.Fluent | [789](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent.html) | [939](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent_base.html) | 0.84:1 PortalMinimalPerf.default | [241](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default.html) | [335](https://23185-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default_base.html) | 0.72:1

Generated by :no_entry_sign: dangerJS