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

ThemeProvider: support applyTo prop #14696

Merged
merged 10 commits into from
Sep 17, 2020
Merged

ThemeProvider: support applyTo prop #14696

merged 10 commits into from
Sep 17, 2020

Conversation

xugao
Copy link
Contributor

@xugao xugao commented Aug 21, 2020 •
edited
Loading

Pull request checklist

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

Description of changes

  • Support applyTo: 'none' | 'element' | 'body' prop
  • Align default ('none') behavior with Fabric component.

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 21, 2020 •
edited
Loading

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 4cc1b02:

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

msft-github-bot commented Aug 21, 2020 •
edited
Loading

Perf Analysis

Scenario Render type Master Ticks PR Ticks Iterations Status
ThemeProvider mount 4567 4756 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 909 895 5000
Breadcrumb mount 39111 38820 5000
BreadcrumbNext mount 148628 149685 5000
ButtonNext mount 591 574 5000
Checkbox mount 1612 1623 5000
CheckboxBase mount 1336 1315 5000
CheckboxNext mount 1539 1524 5000
ChoiceGroup mount 5010 5034 5000
ChoiceGroupNext mount 5060 4932 5000
ComboBox mount 904 899 1000
CommandBar mount 7289 7316 1000
ContextualMenu mount 12216 12433 1000
DefaultButton mount 1109 1108 5000
DetailsRow mount 3492 3545 5000
DetailsRowFast mount 3503 3521 5000
DetailsRowNoStyles mount 3351 3348 5000
Dialog mount 1540 1460 1000
DocumentCardTitle mount 1752 1772 1000
Dropdown mount 2611 2571 5000
FocusZone mount 1749 1744 5000
IconButton mount 1771 1731 5000
Label mount 336 325 5000
Link mount 471 450 5000
LinkNext mount 480 463 5000
MenuButton mount 1464 1486 5000
MessageBar mount 2077 2049 5000
MessageBarNext mount 1980 1978 5000
Nav mount 3184 3191 1000
OverflowSet mount 1402 1383 5000
OverflowSetNext mount 980 1012 5000
Panel mount 1457 1462 1000
Persona mount 821 829 1000
Pivot mount 1392 1431 1000
PivotNext mount 1386 1375 1000
PrimaryButton mount 1240 1248 5000
Rating mount 7646 7647 5000
RatingNext mount 7619 7680 5000
SearchBox mount 1316 1292 5000
SearchBoxNext mount 1344 1359 5000
Shimmer mount 2698 2598 5000
ShimmerNext mount 2540 2535 5000
Slider mount 1498 1497 5000
SliderNext mount 1883 1885 5000
SpinButton mount 4896 5293 5000
SpinButtonNext mount 5047 5026 5000
Spinner mount 432 391 5000
SplitButton mount 3111 3130 5000
Stack mount 538 533 5000
StackWithIntrinsicChildren mount 1828 1887 5000
StackWithTextChildren mount 5013 5027 5000
SwatchColorPicker mount 10148 10115 5000
SwatchColorPickerNext mount 10173 9982 5000
TagPicker mount 2783 2761 5000
TeachingBubble mount 47252 47194 5000
TeachingBubbleNext mount 47534 47468 5000
Text mount 431 430 5000
TextField mount 1395 1411 5000
ThemeProvider mount 4567 4756 5000 Possible regression
ThemeProvider virtual-rerender 514 587 5000
Toggle mount 828 837 5000
ToggleNext mount 824 794 5000
button mount 110 111 5000

Perf Analysis (Fluent)

⚠️ 4 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1659 43 38.58:1 analysis
ButtonUseCssNestingPerf.default 1094 43 25.44:1 analysis
ButtonUseCssPerf.default 827 43 19.23:1 analysis
ChatWithPopoverPerf.default 492 460 1.07:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.46 0.48 0.96:1 2000 923
🦄 Button.Fluent 0.12 0.19 0.63:1 5000 597
🔧 Checkbox.Fluent 0.65 0.37 1.76:1 1000 646
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 819
🔧 Dropdown.Fluent 2.8 0.48 5.83:1 1000 2803
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 773
🎯 Image.Fluent 0.08 0.11 0.73:1 5000 423
🔧 Slider.Fluent 1.54 0.37 4.16:1 1000 1538
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 387
🦄 Tooltip.Fluent 0.11 14.86 0.01:1 5000 550

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 151 112 1.35:1
AttachmentMinimalPerf.default 190 148 1.28:1
RefMinimalPerf.default 237 191 1.24:1
DividerMinimalPerf.default 434 362 1.2:1
SegmentMinimalPerf.default 404 337 1.2:1
ReactionMinimalPerf.default 448 376 1.19:1
BoxMinimalPerf.default 415 353 1.18:1
RadioGroupMinimalPerf.default 480 409 1.17:1
FlexMinimalPerf.default 322 277 1.16:1
ButtonMinimalPerf.default 194 169 1.15:1
LayoutMinimalPerf.default 444 387 1.15:1
SkeletonMinimalPerf.default 460 399 1.15:1
CarouselMinimalPerf.default 496 435 1.14:1
StatusMinimalPerf.default 782 683 1.14:1
AnimationMinimalPerf.default 431 382 1.13:1
GridMinimalPerf.default 387 341 1.13:1
LabelMinimalPerf.default 448 397 1.13:1
TableMinimalPerf.default 449 396 1.13:1
TextAreaMinimalPerf.default 545 483 1.13:1
ListMinimalPerf.default 533 476 1.12:1
Text.Fluent 387 346 1.12:1
IconMinimalPerf.default 723 652 1.11:1
TextMinimalPerf.default 389 350 1.11:1
Tooltip.Fluent 550 496 1.11:1
AvatarMinimalPerf.default 512 466 1.1:1
PopupMinimalPerf.default 709 646 1.1:1
Dialog.Fluent 819 745 1.1:1
Icon.Fluent 773 701 1.1:1
Image.Fluent 423 383 1.1:1
CardMinimalPerf.default 606 558 1.09:1
HeaderMinimalPerf.default 415 381 1.09:1
HeaderSlotsPerf.default 861 790 1.09:1
ProviderMinimalPerf.default 945 864 1.09:1
ToolbarMinimalPerf.default 996 913 1.09:1
FormMinimalPerf.default 458 424 1.08:1
ImageMinimalPerf.default 417 387 1.08:1
Checkbox.Fluent 646 598 1.08:1
MenuMinimalPerf.default 910 849 1.07:1
AlertMinimalPerf.default 320 302 1.06:1
ItemLayoutMinimalPerf.default 1360 1278 1.06:1
TooltipMinimalPerf.default 803 754 1.06:1
Button.Fluent 597 564 1.06:1
ButtonSlotsPerf.default 617 589 1.05:1
MenuButtonMinimalPerf.default 1612 1531 1.05:1
ProviderMergeThemesPerf.default 1866 1770 1.05:1
CustomToolbarPrototype.default 3709 3520 1.05:1
TreeWith60ListItems.default 215 205 1.05:1
Avatar.Fluent 923 882 1.05:1
CheckboxMinimalPerf.default 2850 2753 1.04:1
DialogMinimalPerf.default 785 752 1.04:1
TreeMinimalPerf.default 906 874 1.04:1
EmbedMinimalPerf.default 1962 1899 1.03:1
LoaderMinimalPerf.default 738 715 1.03:1
SplitButtonMinimalPerf.default 3901 3782 1.03:1
VideoMinimalPerf.default 662 644 1.03:1
ChatMinimalPerf.default 636 622 1.02:1
DropdownManyItemsPerf.default 774 758 1.02:1
TableManyItemsPerf.default 2317 2266 1.02:1
AccordionMinimalPerf.default 167 165 1.01:1
ChatDuplicateMessagesPerf.default 417 414 1.01:1
InputMinimalPerf.default 1282 1270 1.01:1
AttachmentSlotsPerf.default 1179 1176 1:1
DropdownMinimalPerf.default 2795 2805 1:1
SliderMinimalPerf.default 1535 1529 1:1
Dropdown.Fluent 2803 2793 1:1
Slider.Fluent 1538 1538 1:1
ListWith60ListItems.default 952 1075 0.89:1
ListNestedPerf.default 641 882 0.73:1
ListCommonPerf.default 685 967 0.71:1

@size-auditor
Copy link

size-auditor bot commented Aug 21, 2020 •
edited
Loading

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-next-Styling 64.794 kB 67.104 kB ExceedsTolerance     2.31 kB

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

Baseline commit: 7ea84b6f135e4193b28495ef120f289016e392e4 (build)

@xugao xugao force-pushed the xgao/applyThemeToBody branch 2 times, most recently from 20e6827 to 050d52c Compare August 21, 2020 20:54
@xugao xugao closed this Aug 21, 2020
@xugao xugao reopened this Aug 21, 2020
dzearing
dzearing approved these changes Aug 26, 2020
View reviewed changes
Copy link
Member

@dzearing dzearing left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion but could be done in a separate PR or this one.

@xugao xugao mentioned this pull request Sep 10, 2020
Merged
2 tasks
@xugao xugao force-pushed the xgao/applyThemeToBody branch from 050d52c to 381896c Compare September 16, 2020 02:50
@xugao xugao changed the title ThemeProvider: support applyToBody ThemeProvider: support applyTo prop Sep 16, 2020
@xugao xugao force-pushed the xgao/applyThemeToBody branch from a466bac to a739823 Compare September 16, 2020 15:44
@xugao xugao requested a review from dzearing September 16, 2020 16:12
@xugao xugao force-pushed the xgao/applyThemeToBody branch 3 times, most recently from 9cf1e6e to 6f335b1 Compare September 16, 2020 19:49
@xugao xugao force-pushed the xgao/applyThemeToBody branch from 6f335b1 to bd93306 Compare September 16, 2020 19:54
@xugao xugao merged commit 730c615 into microsoft:master Sep 17, 2020
@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dzearing dzearing dzearing approved these changes

@ecraig12345 ecraig12345 Awaiting requested review from ecraig12345

Assignees

@khmakoto khmakoto

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@xugao @msft-github-bot @dzearing @khmakoto