Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Spinner: Fix HC styling for spinner to show spinner color #14372

Merged
merged 4 commits into from
Aug 6, 2020
Merged

Spinner: Fix HC styling for spinner to show spinner color #14372

merged 4 commits into from
Aug 6, 2020

Conversation

tomi-msft
Copy link
Contributor

@tomi-msft tomi-msft commented Aug 5, 2020 •
edited

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

Before in Edge chromium Spinner component shows as white in HC, making it hard to see. This fix shows the Spinner component with a highlight color to improve visibility.

Before
image

After
image

Part of #13012 mega issue list

Focus areas to test

(optional)

@tomi-msft tomi-msft requested a review from xugao August 5, 2020 22:45
@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 5, 2020 •
edited

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit de65310:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@size-auditor
Copy link

size-auditor bot commented Aug 5, 2020 •
edited

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-Spinner 37.982 kB 38.097 kB ExceedsBaseline     115 bytes
office-ui-fabric-react fluentui-react-next-DetailsList 212.981 kB 213.096 kB ExceedsBaseline     115 bytes
office-ui-fabric-react office-ui-fabric-react-GroupedList 119.971 kB 120.086 kB ExceedsBaseline     115 bytes
office-ui-fabric-react fluentui-react-next-Spinner 37.982 kB 38.097 kB ExceedsBaseline     115 bytes
office-ui-fabric-react fluentui-react-next-GroupedList 119.971 kB 120.086 kB ExceedsBaseline     115 bytes
office-ui-fabric-react office-ui-fabric-react-DetailsList 212.981 kB 213.096 kB ExceedsBaseline     115 bytes
office-ui-fabric-react office-ui-fabric-react-ShimmeredDetailsList 223.673 kB 223.681 kB ExceedsBaseline     8 bytes
office-ui-fabric-react office-ui-fabric-react-Pickers 273.295 kB 273.303 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-next-Pickers 273.295 kB 273.303 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-next-ShimmeredDetailsList 223.673 kB 223.681 kB ExceedsBaseline     8 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: ff937a44d7f5816532ff9894daac0d247cb778f5 (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Aug 5, 2020 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 892 898 5000
ButtonNext mount 606 575 5000
Checkbox mount 1535 1555 5000
CheckboxBase mount 1251 1184 5000
CheckboxNext mount 1560 1578 5000
ChoiceGroup mount 4637 4858 5000
ComboBox mount 874 860 1000
CommandBar mount 7770 7420 1000
ContextualMenu mount 17105 16158 1000
DefaultButton mount 1077 1070 5000
DetailsRow mount 3477 3641 5000
DetailsRowFast mount 3495 3443 5000
DetailsRowNoStyles mount 3400 3272 5000
Dialog mount 1541 1527 1000
DocumentCardTitle mount 1823 1821 1000
Dropdown mount 2495 2485 5000
FocusZone mount 1749 1692 5000
IconButton mount 1761 1658 5000
Label mount 337 334 5000
Link mount 436 439 5000
LinkNext mount 488 476 5000
MenuButton mount 1449 1456 5000
Nav mount 3247 3218 1000
Panel mount 1486 1474 1000
Persona mount 829 840 1000
Pivot mount 1376 1419 1000
PivotNext mount 1330 1368 1000
PrimaryButton mount 1268 1268 5000
SearchBox mount 1252 1255 5000
SearchBoxNext mount 1323 1290 5000
Slider mount 1449 1493 5000
SliderNext mount 1819 1853 5000
SpinButton mount 4656 4902 5000
SpinButtonNext mount 5014 5117 5000
Spinner mount 413 424 5000
SplitButton mount 3160 3121 5000
Stack mount 537 521 5000
StackWithIntrinsicChildren mount 1990 1970 5000
StackWithTextChildren mount 4892 5015 5000
TagPicker mount 2705 2716 5000
Text mount 431 446 5000
TextField mount 1379 1335 5000
ThemeProvider mount 3001 2988 5000
ThemeProvider virtual-rerender 523 508 5000
Toggle mount 819 838 5000
ToggleNext mount 840 857 5000
button mount 117 112 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.4 0.44 0.91:1 2000 803
🦄 Button.Fluent 0.1 0.17 0.59:1 5000 505
🔧 Checkbox.Fluent 0.62 0.35 1.77:1 1000 616
🎯 Dialog.Fluent 0.14 0.2 0.7:1 5000 707
🔧 Dropdown.Fluent 2.86 0.41 6.98:1 1000 2855
🔧 Icon.Fluent 0.12 0.05 2.4:1 5000 622
🎯 Image.Fluent 0.07 0.1 0.7:1 5000 332
🔧 Slider.Fluent 1.56 0.36 4.33:1 1000 1563
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 326
🦄 Tooltip.Fluent 0.1 17.18 0.01:1 5000 517

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ListCommonPerf.default 970 837 1.16:1
AttachmentMinimalPerf.default 166 148 1.12:1
BoxMinimalPerf.default 331 301 1.1:1
SplitButtonMinimalPerf.default 3592 3340 1.08:1
DropdownMinimalPerf.default 3181 2964 1.07:1
TableMinimalPerf.default 387 361 1.07:1
TreeWith60ListItems.default 220 208 1.06:1
AccordionMinimalPerf.default 147 140 1.05:1
AlertMinimalPerf.default 299 285 1.05:1
AnimationMinimalPerf.default 393 376 1.05:1
MenuButtonMinimalPerf.default 1544 1467 1.05:1
RadioGroupMinimalPerf.default 412 391 1.05:1
DialogMinimalPerf.default 745 718 1.04:1
GridMinimalPerf.default 344 332 1.04:1
ImageMinimalPerf.default 364 351 1.04:1
ItemLayoutMinimalPerf.default 1289 1235 1.04:1
PortalMinimalPerf.default 119 114 1.04:1
CarouselMinimalPerf.default 440 429 1.03:1
ChatDuplicateMessagesPerf.default 434 423 1.03:1
InputMinimalPerf.default 1321 1281 1.03:1
RefMinimalPerf.default 210 203 1.03:1
AvatarMinimalPerf.default 449 442 1.02:1
CheckboxMinimalPerf.default 2822 2766 1.02:1
EmbedMinimalPerf.default 1914 1870 1.02:1
HeaderMinimalPerf.default 351 344 1.02:1
TextMinimalPerf.default 325 318 1.02:1
CustomToolbarPrototype.default 3833 3748 1.02:1
ToolbarMinimalPerf.default 943 927 1.02:1
VideoMinimalPerf.default 610 598 1.02:1
Icon.Fluent 622 611 1.02:1
Image.Fluent 332 327 1.02:1
CardMinimalPerf.default 529 525 1.01:1
DividerMinimalPerf.default 329 327 1.01:1
ListNestedPerf.default 865 855 1.01:1
LoaderMinimalPerf.default 715 711 1.01:1
SliderMinimalPerf.default 1573 1553 1.01:1
TooltipMinimalPerf.default 782 778 1.01:1
Avatar.Fluent 803 798 1.01:1
Checkbox.Fluent 616 611 1.01:1
Tooltip.Fluent 517 514 1.01:1
ButtonMinimalPerf.default 156 156 1:1
ChatMinimalPerf.default 587 585 1:1
HeaderSlotsPerf.default 784 781 1:1
ListMinimalPerf.default 445 444 1:1
ListWith60ListItems.default 1022 1026 1:1
ProviderMinimalPerf.default 934 934 1:1
ChatWithPopoverPerf.default 453 459 0.99:1
LabelMinimalPerf.default 395 399 0.99:1
PopupMinimalPerf.default 648 657 0.99:1
ReactionMinimalPerf.default 373 378 0.99:1
IconMinimalPerf.default 632 637 0.99:1
Dialog.Fluent 707 713 0.99:1
Dropdown.Fluent 2855 2891 0.99:1
Slider.Fluent 1563 1584 0.99:1
Text.Fluent 326 328 0.99:1
HierarchicalTreeMinimalPerf.default 404 413 0.98:1
ProviderMergeThemesPerf.default 1937 1972 0.98:1
TextAreaMinimalPerf.default 455 466 0.98:1
TreeMinimalPerf.default 830 846 0.98:1
Button.Fluent 505 513 0.98:1
ButtonSlotsPerf.default 550 565 0.97:1
FormMinimalPerf.default 370 383 0.97:1
LayoutMinimalPerf.default 362 376 0.96:1
StatusMinimalPerf.default 601 624 0.96:1
TableManyItemsPerf.default 2085 2180 0.96:1
AttachmentSlotsPerf.default 1079 1135 0.95:1
DropdownManyItemsPerf.default 727 764 0.95:1
MenuMinimalPerf.default 824 868 0.95:1
SegmentMinimalPerf.default 319 339 0.94:1
FlexMinimalPerf.default 248 270 0.92:1

@xugao xugao merged commit d438d07 into microsoft:master Aug 6, 2020
@msft-github-bot
Copy link
Contributor

🎉office-ui-fabric-react@v7.126.1 has been released which incorporates this pull request.:tada:

Handy links:

@czearing czearing mentioned this pull request Aug 7, 2020
Closed
tmaster628 pushed a commit to tmaster628/fluentui that referenced this pull request Aug 12, 2020
@tomi-msft
Spinner: Fix HC styling for spinner to show spinner color (microsoft#…
2ceb45f 
…14372)

* Spinner: Fix HC styling of spinner componet to show highlight color

* Change files

* update snapshots
@tomi-msft tomi-msft deleted the a11y-spinner branch February 5, 2021 00:24
@tomi-msft tomi-msft restored the a11y-spinner branch February 5, 2021 00:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@xugao xugao xugao approved these changes

@aneeshack4 aneeshack4 aneeshack4 approved these changes

Assignees

@khmakoto khmakoto

Labels
Component: Spinner
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@tomi-msft @msft-github-bot @xugao @aneeshack4 @khmakoto