search

microsoft / fluent-ui-react

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

chore(Chat): move to functional component #2366

Closed layershifter closed 4 years ago

layershifter commented 4 years ago

BREAKING CHANGES

As in other components that are moved functional we limited sets of props that are passed to styles functions.

Chat
no props are passed
ChatItem
attached
contentPosition
ChatMessage
attached
badgePosition
mine
focused
hasBadge (replacement for badge)
hasReactionGroup (replacement for reactionGroup)
DustyTheBot commented 4 years ago
Warnings
:warning: 1 perf regressions detected

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.47 0.39 1.21:1 2000 948
🎯 Button.Fluent 0.11 0.15 0.73:1 1000 113
🔧 Checkbox.Fluent 0.8 0.3 2.67:1 1000 796
🔧 Dialog.Fluent 0.32 0.15 2.13:1 5000 1577
🔧 Dropdown.Fluent 3.53 0.36 9.81:1 1000 3528
🔧 Icon.Fluent 0.12 0.03 4:1 5000 594
🦄 Image.Fluent 0.05 0.08 0.63:1 5000 230
🔧 Slider.Fluent 1.42 0.3 4.73:1 1000 1417
🔧 Text.Fluent 0.06 0.02 3:1 5000 281
🦄 Tooltip.Fluent 0.09 17.76 0.01:1 5000 440

🔧 Needs work     🎯 On target     🦄 Amazing

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio
ChatMinimalPerf.default 412 1650 0.25:1
Perf tests with no regressions Scenario | Current PR Ticks | Baseline Ticks | Ratio :--- | ---:| ---:| ---: ButtonMinimalPerf.default | [127](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default.html) | [107](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default_base.html) | 1.19:1 TreeWith60ListItems.default | [254](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeWith60ListItems.default.html) | [220](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeWith60ListItems.default_base.html) | 1.15:1 IconMinimalPerf.default | [298](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default.html) | [267](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default_base.html) | 1.12:1 RefMinimalPerf.default | [174](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default.html) | [156](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default_base.html) | 1.12:1 LayoutMinimalPerf.default | [524](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default.html) | [478](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default_base.html) | 1.1:1 Text.Fluent | [281](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent.html) | [256](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent_base.html) | 1.1:1 CarouselMinimalPerf.default | [1982](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default.html) | [1855](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default_base.html) | 1.07:1 HeaderMinimalPerf.default | [439](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default.html) | [414](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default_base.html) | 1.06:1 HierarchicalTreeMinimalPerf.default | [832](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default.html) | [784](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default_base.html) | 1.06:1 ListMinimalPerf.default | [323](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default.html) | [305](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default_base.html) | 1.06:1 TextMinimalPerf.default | [258](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default.html) | [244](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default_base.html) | 1.06:1 TooltipMinimalPerf.default | [650](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default.html) | [615](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default_base.html) | 1.06:1 TreeMinimalPerf.default | [889](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default.html) | [842](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default_base.html) | 1.06:1 EmbedMinimalPerf.default | [6401](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default.html) | [6097](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default_base.html) | 1.05:1 StatusMinimalPerf.default | [239](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default.html) | [227](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default_base.html) | 1.05:1 Dropdown.Fluent | [3528](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent.html) | [3350](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent_base.html) | 1.05:1 DialogMinimalPerf.default | [1670](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default.html) | [1612](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default_base.html) | 1.04:1 HeaderSlotsPerf.default | [1280](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default.html) | [1234](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default_base.html) | 1.04:1 AttachmentSlotsPerf.default | [3442](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default.html) | [3349](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default_base.html) | 1.03:1 SplitButtonMinimalPerf.default | [11439](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default.html) | [11140](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default_base.html) | 1.03:1 Button.Fluent | [113](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent.html) | [110](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent_base.html) | 1.03:1 ImageMinimalPerf.default | [226](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default.html) | [222](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default_base.html) | 1.02:1 MenuMinimalPerf.default | [1936](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default.html) | [1897](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default_base.html) | 1.02:1 PopupMinimalPerf.default | [340](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default.html) | [332](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default_base.html) | 1.02:1 ProviderMinimalPerf.default | [555](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default.html) | [544](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default_base.html) | 1.02:1 Avatar.Fluent | [948](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent.html) | [928](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent_base.html) | 1.02:1 Checkbox.Fluent | [796](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent.html) | [778](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent_base.html) | 1.02:1 Slider.Fluent | [1417](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent.html) | [1396](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent_base.html) | 1.02:1 BoxMinimalPerf.default | [227](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default.html) | [224](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default_base.html) | 1.01:1 DropdownManyItemsPerf.default | [430](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default.html) | [425](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default_base.html) | 1.01:1 FlexMinimalPerf.default | [340](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default.html) | [336](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default_base.html) | 1.01:1 FormMinimalPerf.default | [749](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default.html) | [742](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default_base.html) | 1.01:1 ItemLayoutMinimalPerf.default | [1706](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default.html) | [1694](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default_base.html) | 1.01:1 MenuButtonMinimalPerf.default | [1502](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default.html) | [1485](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default_base.html) | 1.01:1 SegmentMinimalPerf.default | [1247](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default.html) | [1230](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default_base.html) | 1.01:1 TableMinimalPerf.default | [562](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default.html) | [554](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default_base.html) | 1.01:1 ToolbarMinimalPerf.default | [708](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default.html) | [703](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default_base.html) | 1.01:1 VideoMinimalPerf.default | [686](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default.html) | [682](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default_base.html) | 1.01:1 Icon.Fluent | [594](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent.html) | [591](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent_base.html) | 1.01:1 Tooltip.Fluent | [440](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent.html) | [436](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent_base.html) | 1.01:1 AvatarMinimalPerf.default | [513](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default.html) | [511](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default_base.html) | 1:1 ButtonSlotsPerf.default | [587](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default.html) | [586](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default_base.html) | 1:1 ListCommonPerf.default | [732](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default.html) | [735](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default_base.html) | 1:1 PortalMinimalPerf.default | [221](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default.html) | [220](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default_base.html) | 1:1 Image.Fluent | [230](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent.html) | [230](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent_base.html) | 1:1 AnimationMinimalPerf.default | [471](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default.html) | [477](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default_base.html) | 0.99:1 DividerMinimalPerf.default | [872](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default.html) | [878](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default_base.html) | 0.99:1 InputMinimalPerf.default | [889](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default.html) | [898](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default_base.html) | 0.99:1 RadioGroupMinimalPerf.default | [393](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default.html) | [396](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default_base.html) | 0.99:1 CustomToolbarPrototype.default | [3310](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default.html) | [3353](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default_base.html) | 0.99:1 CheckboxMinimalPerf.default | [3564](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default.html) | [3628](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default_base.html) | 0.98:1 LabelMinimalPerf.default | [828](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default.html) | [844](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default_base.html) | 0.98:1 LoaderMinimalPerf.default | [2367](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default.html) | [2406](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default_base.html) | 0.98:1 ProviderMergeThemesPerf.default | [1077](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default.html) | [1103](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default_base.html) | 0.98:1 AttachmentMinimalPerf.default | [883](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default.html) | [907](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default_base.html) | 0.97:1 TextAreaMinimalPerf.default | [2866](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default.html) | [2947](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default_base.html) | 0.97:1 Dialog.Fluent | [1577](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent.html) | [1622](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent_base.html) | 0.97:1 ReactionMinimalPerf.default | [2469](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default.html) | [2563](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default_base.html) | 0.96:1 DropdownMinimalPerf.default | [3372](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default.html) | [3537](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default_base.html) | 0.95:1 AlertMinimalPerf.default | [547](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default.html) | [585](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default_base.html) | 0.94:1 SliderMinimalPerf.default | [1370](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default.html) | [1460](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default_base.html) | 0.94:1 AccordionMinimalPerf.default | [187](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default.html) | [202](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default_base.html) | 0.93:1 ChatWithPopoverPerf.default | [500](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default.html) | [540](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default_base.html) | 0.93:1 GridMinimalPerf.default | [779](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default.html) | [840](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default_base.html) | 0.93:1 ListNestedPerf.default | [696](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListNestedPerf.default.html) | [746](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListNestedPerf.default_base.html) | 0.93:1 ListWith60ListItems.default | [170](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListWith60ListItems.default.html) | [213](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListWith60ListItems.default_base.html) | 0.8:1 ChatDuplicateMessagesPerf.default | [340](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default.html) | [516](https://23133-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default_base.html) | 0.66:1

Generated by :no_entry_sign: dangerJS