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

ProgressIndicator: Fix HC styling to properly show progress bar #14410

Merged
merged 3 commits into from
Aug 7, 2020
Merged

ProgressIndicator: Fix HC styling to properly show progress bar #14410

merged 3 commits into from
Aug 7, 2020

Conversation

tomi-msft
Copy link
Contributor

Pull request checklist

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

Description of changes

In HC mode, there is a black overlay to show progress, which is hard to see. This PR changes styling to make it Highlight.

Before
image

After
image

Part of mega issue #13012

Focus areas to test

(optional)

@size-auditor
Copy link

size-auditor bot commented Aug 7, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-ProgressIndicator 35.26 kB 35.375 kB ExceedsBaseline     115 bytes
office-ui-fabric-react fluentui-react-next-ProgressIndicator 35.26 kB 35.375 kB ExceedsBaseline     115 bytes

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

Baseline commit: 815d67e085356baae9c079e2fafd02b9d38af30f (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 7, 2020

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 8ecd968:

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

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 951 947 5000
ButtonNext mount 578 617 5000
Checkbox mount 1627 1622 5000
CheckboxBase mount 1374 1361 5000
CheckboxNext mount 1671 1699 5000
ChoiceGroup mount 5206 5092 5000
ComboBox mount 930 933 1000
CommandBar mount 7504 7545 1000
ContextualMenu mount 12115 12687 1000
DefaultButton mount 1154 1176 5000
DetailsRow mount 3502 3659 5000
DetailsRowFast mount 3682 3615 5000
DetailsRowNoStyles mount 3453 3445 5000
Dialog mount 1568 1529 1000
DocumentCardTitle mount 1793 1830 1000
Dropdown mount 2696 2599 5000
FocusZone mount 1765 1799 5000
IconButton mount 1805 1807 5000
Label mount 334 348 5000
Link mount 478 448 5000
LinkNext mount 483 472 5000
MenuButton mount 1456 1512 5000
Nav mount 3360 3224 1000
Panel mount 1468 1451 1000
Persona mount 872 842 1000
Pivot mount 1431 1412 1000
PivotNext mount 1415 1441 1000
PrimaryButton mount 1324 1256 5000
SearchBox mount 1333 1366 5000
SearchBoxNext mount 1446 1424 5000
Slider mount 1552 1562 5000
SliderNext mount 1977 1984 5000
SpinButton mount 5186 5035 5000
SpinButtonNext mount 5130 5187 5000
Spinner mount 409 409 5000
SplitButton mount 3115 3190 5000
Stack mount 519 507 5000
StackWithIntrinsicChildren mount 1983 1966 5000
StackWithTextChildren mount 5380 5327 5000
TagPicker mount 2805 2684 5000
Text mount 436 462 5000
TextField mount 1447 1432 5000
ThemeProvider mount 2930 2862 5000
ThemeProvider virtual-rerender 437 461 5000
Toggle mount 848 837 5000
ToggleNext mount 859 844 5000
button mount 101 100 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.45 0.48 0.94:1 2000 904
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 591
🔧 Checkbox.Fluent 0.68 0.38 1.79:1 1000 680
🎯 Dialog.Fluent 0.16 0.23 0.7:1 5000 793
🔧 Dropdown.Fluent 2.96 0.48 6.17:1 1000 2958
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 741
🎯 Image.Fluent 0.08 0.11 0.73:1 5000 398
🔧 Slider.Fluent 1.63 0.36 4.53:1 1000 1633
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 351
🦄 Tooltip.Fluent 0.11 15.62 0.01:1 5000 540

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 145 128 1.13:1
TreeWith60ListItems.default 242 217 1.12:1
LabelMinimalPerf.default 452 406 1.11:1
AttachmentMinimalPerf.default 174 160 1.09:1
AvatarMinimalPerf.default 510 472 1.08:1
Checkbox.Fluent 680 631 1.08:1
ButtonMinimalPerf.default 192 180 1.07:1
GridMinimalPerf.default 357 335 1.07:1
HierarchicalTreeMinimalPerf.default 460 431 1.07:1
CheckboxMinimalPerf.default 3080 2914 1.06:1
DialogMinimalPerf.default 833 787 1.06:1
ToolbarMinimalPerf.default 1042 981 1.06:1
ImageMinimalPerf.default 399 381 1.05:1
TextMinimalPerf.default 379 361 1.05:1
Image.Fluent 398 379 1.05:1
AttachmentSlotsPerf.default 1257 1206 1.04:1
FormMinimalPerf.default 445 428 1.04:1
ReactionMinimalPerf.default 435 418 1.04:1
RefMinimalPerf.default 215 206 1.04:1
TreeMinimalPerf.default 929 895 1.04:1
ButtonSlotsPerf.default 640 623 1.03:1
CardMinimalPerf.default 624 604 1.03:1
DropdownMinimalPerf.default 3054 2971 1.03:1
EmbedMinimalPerf.default 2024 1957 1.03:1
InputMinimalPerf.default 1402 1356 1.03:1
MenuButtonMinimalPerf.default 1659 1605 1.03:1
RadioGroupMinimalPerf.default 451 438 1.03:1
TableManyItemsPerf.default 2502 2430 1.03:1
CustomToolbarPrototype.default 3850 3729 1.03:1
TooltipMinimalPerf.default 816 794 1.03:1
Slider.Fluent 1633 1588 1.03:1
AlertMinimalPerf.default 316 311 1.02:1
BoxMinimalPerf.default 387 381 1.02:1
LoaderMinimalPerf.default 773 758 1.02:1
SegmentMinimalPerf.default 362 355 1.02:1
StatusMinimalPerf.default 744 727 1.02:1
IconMinimalPerf.default 721 709 1.02:1
Icon.Fluent 741 726 1.02:1
HeaderMinimalPerf.default 384 381 1.01:1
ListCommonPerf.default 992 979 1.01:1
SkeletonMinimalPerf.default 429 425 1.01:1
SplitButtonMinimalPerf.default 3970 3950 1.01:1
ChatDuplicateMessagesPerf.default 442 444 1:1
ItemLayoutMinimalPerf.default 1341 1336 1:1
ListMinimalPerf.default 512 511 1:1
ListWith60ListItems.default 1161 1160 1:1
PopupMinimalPerf.default 689 690 1:1
Avatar.Fluent 904 907 1:1
Button.Fluent 591 590 1:1
Dialog.Fluent 793 795 1:1
Dropdown.Fluent 2958 2969 1:1
AnimationMinimalPerf.default 419 422 0.99:1
DividerMinimalPerf.default 378 381 0.99:1
FlexMinimalPerf.default 295 298 0.99:1
ListNestedPerf.default 951 963 0.99:1
ProviderMergeThemesPerf.default 1891 1905 0.99:1
Tooltip.Fluent 540 544 0.99:1
CarouselMinimalPerf.default 485 494 0.98:1
ChatMinimalPerf.default 651 666 0.98:1
LayoutMinimalPerf.default 421 429 0.98:1
ProviderMinimalPerf.default 956 972 0.98:1
SliderMinimalPerf.default 1584 1611 0.98:1
TableMinimalPerf.default 408 418 0.98:1
TextAreaMinimalPerf.default 506 516 0.98:1
Text.Fluent 351 357 0.98:1
AccordionMinimalPerf.default 152 156 0.97:1
ChatWithPopoverPerf.default 493 507 0.97:1
HeaderSlotsPerf.default 838 860 0.97:1
MenuMinimalPerf.default 877 905 0.97:1
DropdownManyItemsPerf.default 802 836 0.96:1
VideoMinimalPerf.default 667 722 0.92:1

@tomi-msft tomi-msft merged commit 39b3102 into microsoft:master Aug 7, 2020
@msft-github-bot
Copy link
Contributor

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

Handy links:

tmaster628 pushed a commit to tmaster628/fluentui that referenced this pull request Aug 12, 2020
@tomi-msft
ProgressIndicator: Fix HC styling to properly show progress bar (micr…
739891a 
…osoft#14410)

* Add HC styling to fix ProgressIndicator progress bar

* Change files

* update snapshots
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

@khmakoto khmakoto Awaiting requested review from khmakoto

Assignees

@khmakoto khmakoto

Labels
Component: ProgressIndicator
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@tomi-msft @msft-github-bot @xugao @khmakoto