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

Update themeing for hover/focus states to have a cyan background #680204 #2374

Open TanelVari opened 4 years ago

DustyTheBot commented 4 years ago
Warnings
:warning: There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.5 0.37 1.35:1 2000 997
🦄 Button.Fluent 0.1 0.17 0.59:1 1000 101
🔧 Checkbox.Fluent 0.75 0.27 2.78:1 1000 746
🔧 Dialog.Fluent 0.34 0.17 2:1 5000 1676
🔧 Dropdown.Fluent 3.28 0.39 8.41:1 1000 3283
🔧 Icon.Fluent 0.14 0.03 4.67:1 5000 692
🦄 Image.Fluent 0.05 0.08 0.63:1 5000 229
🔧 Slider.Fluent 1.45 0.32 4.53:1 1000 1445
🔧 Text.Fluent 0.05 0.02 2.5:1 5000 265
🦄 Tooltip.Fluent 0.1 16.85 0.01:1 5000 496

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions Scenario | Current PR Ticks | Baseline Ticks | Ratio :--- | ---:| ---:| ---: PopupMinimalPerf.default | [397](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default.html) | [316](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default_base.html) | 1.26:1 ChatDuplicateMessagesPerf.default | [480](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default.html) | [384](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default_base.html) | 1.25:1 SliderMinimalPerf.default | [1712](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default.html) | [1472](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default_base.html) | 1.16:1 Icon.Fluent | [692](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent.html) | [597](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent_base.html) | 1.16:1 ImageMinimalPerf.default | [268](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default.html) | [238](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default_base.html) | 1.13:1 BoxMinimalPerf.default | [248](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default.html) | [225](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default_base.html) | 1.1:1 Tooltip.Fluent | [496](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent.html) | [449](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent_base.html) | 1.1:1 InputMinimalPerf.default | [1031](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default.html) | [955](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default_base.html) | 1.08:1 TextMinimalPerf.default | [271](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default.html) | [250](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default_base.html) | 1.08:1 Avatar.Fluent | [997](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent.html) | [924](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent_base.html) | 1.08:1 HeaderSlotsPerf.default | [1502](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default.html) | [1402](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default_base.html) | 1.07:1 Dialog.Fluent | [1676](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent.html) | [1569](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent_base.html) | 1.07:1 AccordionMinimalPerf.default | [196](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default.html) | [185](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default_base.html) | 1.06:1 HeaderMinimalPerf.default | [463](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default.html) | [437](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default_base.html) | 1.06:1 RefMinimalPerf.default | [155](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default.html) | [146](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default_base.html) | 1.06:1 LayoutMinimalPerf.default | [688](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default.html) | [654](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default_base.html) | 1.05:1 Slider.Fluent | [1445](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent.html) | [1380](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent_base.html) | 1.05:1 ButtonSlotsPerf.default | [581](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default.html) | [561](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default_base.html) | 1.04:1 TableMinimalPerf.default | [558](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default.html) | [536](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default_base.html) | 1.04:1 Text.Fluent | [265](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent.html) | [254](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent_base.html) | 1.04:1 AnimationMinimalPerf.default | [466](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default.html) | [454](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default_base.html) | 1.03:1 ChatWithPopoverPerf.default | [522](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default.html) | [508](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default_base.html) | 1.03:1 DropdownManyItemsPerf.default | [414](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default.html) | [401](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default_base.html) | 1.03:1 StatusMinimalPerf.default | [235](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default.html) | [229](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default_base.html) | 1.03:1 CheckboxMinimalPerf.default | [3655](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default.html) | [3591](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default_base.html) | 1.02:1 HierarchicalTreeMinimalPerf.default | [843](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default.html) | [826](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default_base.html) | 1.02:1 LabelMinimalPerf.default | [1040](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default.html) | [1020](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default_base.html) | 1.02:1 ListNestedPerf.default | [731](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListNestedPerf.default.html) | [715](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListNestedPerf.default_base.html) | 1.02:1 PortalMinimalPerf.default | [235](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default.html) | [231](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default_base.html) | 1.02:1 SplitButtonMinimalPerf.default | [11447](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default.html) | [11231](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default_base.html) | 1.02:1 CustomToolbarPrototype.default | [3561](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default.html) | [3484](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default_base.html) | 1.02:1 Dropdown.Fluent | [3283](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent.html) | [3232](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent_base.html) | 1.02:1 MenuMinimalPerf.default | [1983](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default.html) | [1962](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default_base.html) | 1.01:1 RadioGroupMinimalPerf.default | [410](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default.html) | [405](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default_base.html) | 1.01:1 TreeWith60ListItems.default | [230](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeWith60ListItems.default.html) | [228](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeWith60ListItems.default_base.html) | 1.01:1 DividerMinimalPerf.default | [858](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default.html) | [854](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default_base.html) | 1:1 DropdownMinimalPerf.default | [3361](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default.html) | [3367](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default_base.html) | 1:1 EmbedMinimalPerf.default | [6154](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default.html) | [6162](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default_base.html) | 1:1 GridMinimalPerf.default | [818](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default.html) | [815](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default_base.html) | 1:1 ListMinimalPerf.default | [391](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default.html) | [390](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default_base.html) | 1:1 ToolbarMinimalPerf.default | [818](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default.html) | [815](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default_base.html) | 1:1 AlertMinimalPerf.default | [535](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default.html) | [541](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default_base.html) | 0.99:1 DialogMinimalPerf.default | [1630](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default.html) | [1647](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default_base.html) | 0.99:1 ProviderMinimalPerf.default | [571](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default.html) | [575](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default_base.html) | 0.99:1 ReactionMinimalPerf.default | [2604](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default.html) | [2622](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default_base.html) | 0.99:1 AvatarMinimalPerf.default | [490](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default.html) | [502](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default_base.html) | 0.98:1 CarouselMinimalPerf.default | [1986](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default.html) | [2027](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default_base.html) | 0.98:1 FlexMinimalPerf.default | [351](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default.html) | [359](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default_base.html) | 0.98:1 ListCommonPerf.default | [904](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default.html) | [925](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default_base.html) | 0.98:1 FormMinimalPerf.default | [701](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default.html) | [724](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default_base.html) | 0.97:1 TextAreaMinimalPerf.default | [2765](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default.html) | [2850](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default_base.html) | 0.97:1 TooltipMinimalPerf.default | [658](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default.html) | [679](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default_base.html) | 0.97:1 VideoMinimalPerf.default | [644](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default.html) | [662](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default_base.html) | 0.97:1 ButtonMinimalPerf.default | [109](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default.html) | [114](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default_base.html) | 0.96:1 ChatMinimalPerf.default | [441](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default.html) | [458](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default_base.html) | 0.96:1 LoaderMinimalPerf.default | [2477](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default.html) | [2585](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/LoaderMinimalPerf.default_base.html) | 0.96:1 IconMinimalPerf.default | [297](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default.html) | [315](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default_base.html) | 0.94:1 MenuButtonMinimalPerf.default | [1439](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default.html) | [1536](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default_base.html) | 0.94:1 Checkbox.Fluent | [746](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent.html) | [792](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent_base.html) | 0.94:1 AttachmentMinimalPerf.default | [871](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default.html) | [934](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default_base.html) | 0.93:1 TreeMinimalPerf.default | [849](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default.html) | [920](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default_base.html) | 0.92:1 ProviderMergeThemesPerf.default | [1152](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default.html) | [1263](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default_base.html) | 0.91:1 Image.Fluent | [229](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent.html) | [252](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent_base.html) | 0.91:1 AttachmentSlotsPerf.default | [3126](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default.html) | [3468](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default_base.html) | 0.9:1 SegmentMinimalPerf.default | [1362](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default.html) | [1515](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default_base.html) | 0.9:1 ListWith60ListItems.default | [170](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListWith60ListItems.default.html) | [190](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListWith60ListItems.default_base.html) | 0.89:1 Button.Fluent | [101](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent.html) | [118](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent_base.html) | 0.86:1 ItemLayoutMinimalPerf.default | [1702](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default.html) | [2084](https://23172-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default_base.html) | 0.82:1

Generated by :no_entry_sign: dangerJS