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

Pompomon/table prototypes #2379

Closed pompomon closed 4 years ago

pompomon commented 4 years ago

Adding prototype for popover in Table header

DustyTheBot commented 4 years ago

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.46 0.37 1.24:1 2000 919
🦄 Button.Fluent 0.11 0.19 0.58:1 1000 113
🔧 Checkbox.Fluent 0.75 0.28 2.68:1 1000 745
🔧 Dialog.Fluent 0.32 0.17 1.88:1 5000 1577
🔧 Dropdown.Fluent 3.31 0.36 9.19:1 1000 3313
🔧 Icon.Fluent 0.12 0.03 4:1 5000 602
🦄 Image.Fluent 0.04 0.07 0.57:1 5000 224
🔧 Slider.Fluent 1.37 0.29 4.72:1 1000 1365
🔧 Text.Fluent 0.06 0.02 3:1 5000 276
🦄 Tooltip.Fluent 0.11 16.9 0.01:1 5000 562

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions Scenario | Current PR Ticks | Baseline Ticks | Ratio :--- | ---:| ---:| ---: RefMinimalPerf.default | [171](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default.html) | [143](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default_base.html) | 1.2:1 ProviderMinimalPerf.default | [626](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default.html) | [532](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default_base.html) | 1.18:1 DropdownMinimalPerf.default | [3779](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default.html) | [3301](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default_base.html) | 1.14:1 ImageMinimalPerf.default | [265](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default.html) | [232](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default_base.html) | 1.14:1 HierarchicalTreeMinimalPerf.default | [1045](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default.html) | [928](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default_base.html) | 1.13:1 ListNestedPerf.default | [746](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListNestedPerf.default.html) | [659](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListNestedPerf.default_base.html) | 1.13:1 TextAreaMinimalPerf.default | [3049](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default.html) | [2747](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default_base.html) | 1.11:1 ChatMinimalPerf.default | [458](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default.html) | [423](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default_base.html) | 1.08:1 TextMinimalPerf.default | [270](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default.html) | [251](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default_base.html) | 1.08:1 Tooltip.Fluent | [562](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent.html) | [522](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent_base.html) | 1.08:1 IconMinimalPerf.default | [345](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default.html) | [322](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default_base.html) | 1.07:1 ListCommonPerf.default | [914](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default.html) | [851](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default_base.html) | 1.07:1 DialogMinimalPerf.default | [1623](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default.html) | [1537](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default_base.html) | 1.06:1 ProviderMergeThemesPerf.default | [1219](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default.html) | [1154](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default_base.html) | 1.06:1 TableMinimalPerf.default | [587](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default.html) | [552](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default_base.html) | 1.06:1 ReactionMinimalPerf.default | [2377](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default.html) | [2268](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default_base.html) | 1.05:1 TreeMinimalPerf.default | [888](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default.html) | [845](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default_base.html) | 1.05:1 AnimationMinimalPerf.default | [519](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default.html) | [498](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default_base.html) | 1.04:1 InputMinimalPerf.default | [964](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default.html) | [926](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default_base.html) | 1.04:1 TooltipMinimalPerf.default | [659](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default.html) | [635](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default_base.html) | 1.04:1 VideoMinimalPerf.default | [699](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default.html) | [672](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default_base.html) | 1.04:1 AvatarMinimalPerf.default | [513](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default.html) | [499](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default_base.html) | 1.03:1 ButtonMinimalPerf.default | [133](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default.html) | [129](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default_base.html) | 1.03:1 LabelMinimalPerf.default | [856](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default.html) | [833](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default_base.html) | 1.03:1 CustomToolbarPrototype.default | [3601](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default.html) | [3500](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default_base.html) | 1.03:1 Dropdown.Fluent | [3313](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent.html) | [3231](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent_base.html) | 1.03:1 Icon.Fluent | [602](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent.html) | [587](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent_base.html) | 1.03:1 MenuMinimalPerf.default | [1879](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default.html) | [1846](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default_base.html) | 1.02:1 SliderMinimalPerf.default | [1376](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default.html) | [1343](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default_base.html) | 1.02:1 StatusMinimalPerf.default | [244](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default.html) | [239](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default_base.html) | 1.02:1 Checkbox.Fluent | [745](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent.html) | [731](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent_base.html) | 1.02:1 Dialog.Fluent | [1577](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent.html) | [1542](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent_base.html) | 1.02:1 AttachmentMinimalPerf.default | [874](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default.html) | [869](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default_base.html) | 1.01:1 EmbedMinimalPerf.default | [5927](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default.html) | [5891](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default_base.html) | 1.01:1 HeaderSlotsPerf.default | [1781](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default.html) | [1756](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default_base.html) | 1.01:1 LoaderMinimalPerf.default | [826](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default.html) | [818](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default_base.html) | 1.01:1 PortalMinimalPerf.default | [229](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default.html) | [227](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default_base.html) | 1.01:1 TreeWith60ListItems.default | [226](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeWith60ListItems.default.html) | [224](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeWith60ListItems.default_base.html) | 1.01:1 BoxMinimalPerf.default | [242](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default.html) | [241](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default_base.html) | 1:1 ChatWithPopoverPerf.default | [509](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default.html) | [507](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default_base.html) | 1:1 ItemLayoutMinimalPerf.default | [1627](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default.html) | [1620](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default_base.html) | 1:1 MenuButtonMinimalPerf.default | [1436](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default.html) | [1434](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default_base.html) | 1:1 Button.Fluent | [113](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent.html) | [113](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent_base.html) | 1:1 CheckboxMinimalPerf.default | [3621](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default.html) | [3663](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default_base.html) | 0.99:1 SegmentMinimalPerf.default | [1112](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default.html) | [1124](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default_base.html) | 0.99:1 SplitButtonMinimalPerf.default | [10955](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default.html) | [11093](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default_base.html) | 0.99:1 Slider.Fluent | [1365](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent.html) | [1382](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent_base.html) | 0.99:1 Text.Fluent | [276](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent.html) | [279](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent_base.html) | 0.99:1 DropdownManyItemsPerf.default | [462](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default.html) | [471](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default_base.html) | 0.98:1 RadioGroupMinimalPerf.default | [399](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default.html) | [406](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default_base.html) | 0.98:1 ToolbarMinimalPerf.default | [787](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default.html) | [804](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default_base.html) | 0.98:1 Avatar.Fluent | [919](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent.html) | [938](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent_base.html) | 0.98:1 CarouselMinimalPerf.default | [1931](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default.html) | [1996](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default_base.html) | 0.97:1 HeaderMinimalPerf.default | [530](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default.html) | [546](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default_base.html) | 0.97:1 Image.Fluent | [224](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent.html) | [230](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent_base.html) | 0.97:1 AttachmentSlotsPerf.default | [3085](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default.html) | [3206](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default_base.html) | 0.96:1 LayoutMinimalPerf.default | [536](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default.html) | [559](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default_base.html) | 0.96:1 ListWith60ListItems.default | [138](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListWith60ListItems.default.html) | [144](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListWith60ListItems.default_base.html) | 0.96:1 PopupMinimalPerf.default | [306](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default.html) | [320](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default_base.html) | 0.96:1 FlexMinimalPerf.default | [354](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default.html) | [371](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default_base.html) | 0.95:1 ListMinimalPerf.default | [322](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default.html) | [339](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default_base.html) | 0.95:1 AccordionMinimalPerf.default | [179](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default.html) | [191](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default_base.html) | 0.94:1 GridMinimalPerf.default | [981](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default.html) | [1043](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default_base.html) | 0.94:1 ButtonSlotsPerf.default | [594](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default.html) | [636](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default_base.html) | 0.93:1 AlertMinimalPerf.default | [530](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default.html) | [574](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default_base.html) | 0.92:1 DividerMinimalPerf.default | [887](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default.html) | [963](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default_base.html) | 0.92:1 ChatDuplicateMessagesPerf.default | [368](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default.html) | [403](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default_base.html) | 0.91:1 FormMinimalPerf.default | [758](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default.html) | [903](https://23227-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default_base.html) | 0.84:1

Generated by :no_entry_sign: dangerJS