Skip to content

Conversation

@xugao
Copy link
Contributor

@xugao xugao commented Oct 13, 2020

Pull request checklist

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

Description of changes

Add a doc page for ThemeProvider examples.

Focus areas to test

http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/15485/merge/public-docsite/index.html?devhost#/controls/web/themeprovider

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 13, 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 57c2b0a:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-next-template Configuration
codesandbox-react-northstar-template Configuration

@size-auditor
Copy link

size-auditor bot commented Oct 13, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-Theme 47.768 kB 48 kB ExceedsBaseline     232 bytes

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

Baseline commit: cf0460e711998e61ae71f5c12c9f8181e67a91cd (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Oct 13, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 919 897 5000
BaseButton mount 1018 971 5000
Breadcrumb mount 163987 164650 5000
ButtonNext mount 614 593 5000
Checkbox mount 1669 1603 5000
CheckboxBase mount 1431 1411 5000
CheckboxNext mount 1636 1709 5000
ChoiceGroup mount 5350 5261 5000
ComboBox mount 1032 1094 1000
CommandBar mount 22916 22404 1000
ContextualMenu mount 5948 5955 1000
DefaultButton mount 1218 1228 5000
DetailsRow mount 3918 3931 5000
DetailsRowFast mount 3937 4018 5000
DetailsRowNoStyles mount 3882 3817 5000
Dialog mount 1594 1710 1000
DocumentCardTitle mount 1890 1861 1000
Dropdown mount 2788 2798 5000
FocusTrapZone mount 1879 1890 5000
FocusZone mount 1868 1932 5000
IconButton mount 1901 1954 5000
Label mount 355 373 5000
Layer mount 1927 1929 5000
Link mount 497 504 5000
LinkNext mount 497 499 5000
MenuButton mount 1587 1640 5000
MessageBar mount 2156 2151 5000
Nav mount 3490 3533 1000
OverflowSet mount 1096 1070 5000
Panel mount 1513 1522 1000
Persona mount 949 882 1000
Pivot mount 1511 1469 1000
PivotNext mount 1472 1497 1000
PrimaryButton mount 1393 1414 5000
Rating mount 8168 8173 5000
SearchBox mount 1465 1532 5000
Shimmer mount 2873 2937 5000
Slider mount 2120 2142 5000
SliderNext mount 2132 2105 5000
SpinButton mount 5572 5674 5000
Spinner mount 447 459 5000
SplitButton mount 3473 3521 5000
Stack mount 584 579 5000
StackWithIntrinsicChildren mount 2201 2178 5000
StackWithTextChildren mount 5653 5719 5000
SwatchColorPicker mount 11275 11406 5000
TagPicker mount 3004 2985 5000
TeachingBubble mount 53229 53833 5000
Text mount 477 484 5000
TextField mount 1530 1536 5000
ThemeProvider mount 2105 2094 5000
ThemeProvider virtual-rerender 684 700 5000
Toggle mount 887 935 5000
ToggleNext mount 884 902 5000
button mount 126 144 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.48 0.54 0.89:1 2000 957
🦄 Button.Fluent 0.13 0.23 0.57:1 5000 664
🔧 Checkbox.Fluent 0.71 0.38 1.87:1 1000 709
🎯 Dialog.Fluent 0.18 0.25 0.72:1 5000 898
🔧 Dropdown.Fluent 3.26 0.53 6.15:1 1000 3256
🔧 Icon.Fluent 0.17 0.08 2.13:1 5000 838
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 465
🔧 Slider.Fluent 1.78 0.5 3.56:1 1000 1779
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 422
🦄 Tooltip.Fluent 0.13 9.28 0.01:1 5000 627

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 184 172 1.07:1
TooltipMinimalPerf.default 921 863 1.07:1
HeaderMinimalPerf.default 460 434 1.06:1
TableMinimalPerf.default 484 458 1.06:1
AnimationMinimalPerf.default 483 458 1.05:1
BoxMinimalPerf.default 430 409 1.05:1
TextMinimalPerf.default 417 398 1.05:1
Text.Fluent 422 402 1.05:1
Tooltip.Fluent 627 595 1.05:1
ButtonUseCssPerf.default 959 923 1.04:1
ChatMinimalPerf.default 724 698 1.04:1
CheckboxMinimalPerf.default 3176 3049 1.04:1
FlexMinimalPerf.default 372 358 1.04:1
ImageMinimalPerf.default 478 461 1.04:1
LabelMinimalPerf.default 490 469 1.04:1
RefMinimalPerf.default 262 253 1.04:1
SegmentMinimalPerf.default 429 414 1.04:1
StatusMinimalPerf.default 831 799 1.04:1
CustomToolbarPrototype.default 4228 4070 1.04:1
Slider.Fluent 1779 1715 1.04:1
ButtonOverridesMissPerf.default 1885 1830 1.03:1
FormMinimalPerf.default 529 515 1.03:1
HeaderSlotsPerf.default 951 924 1.03:1
ListMinimalPerf.default 567 552 1.03:1
IconMinimalPerf.default 771 746 1.03:1
TreeMinimalPerf.default 1002 974 1.03:1
VideoMinimalPerf.default 769 748 1.03:1
Checkbox.Fluent 709 687 1.03:1
ButtonUseCssNestingPerf.default 1217 1191 1.02:1
DividerMinimalPerf.default 444 435 1.02:1
ListCommonPerf.default 752 738 1.02:1
TextAreaMinimalPerf.default 569 556 1.02:1
TreeWith60ListItems.default 217 213 1.02:1
Image.Fluent 465 454 1.02:1
AlertMinimalPerf.default 364 361 1.01:1
AttachmentMinimalPerf.default 187 185 1.01:1
CardMinimalPerf.default 652 644 1.01:1
DropdownManyItemsPerf.default 828 821 1.01:1
MenuMinimalPerf.default 967 959 1.01:1
MenuButtonMinimalPerf.default 1727 1718 1.01:1
SkeletonMinimalPerf.default 481 475 1.01:1
SplitButtonMinimalPerf.default 4135 4087 1.01:1
Button.Fluent 664 657 1.01:1
AttachmentSlotsPerf.default 1278 1275 1:1
ButtonMinimalPerf.default 221 222 1:1
ButtonSlotsPerf.default 657 659 1:1
ChatDuplicateMessagesPerf.default 471 471 1:1
DialogMinimalPerf.default 880 883 1:1
InputMinimalPerf.default 1401 1395 1:1
ItemLayoutMinimalPerf.default 1449 1446 1:1
ListWith60ListItems.default 1007 1011 1:1
PopupMinimalPerf.default 755 757 1:1
ProviderMinimalPerf.default 1094 1096 1:1
ReactionMinimalPerf.default 461 463 1:1
SliderMinimalPerf.default 1690 1689 1:1
TableManyItemsPerf.default 2455 2454 1:1
ToolbarMinimalPerf.default 1069 1066 1:1
Dialog.Fluent 898 902 1:1
Dropdown.Fluent 3256 3245 1:1
AvatarMinimalPerf.default 531 535 0.99:1
DropdownMinimalPerf.default 3093 3123 0.99:1
ProviderMergeThemesPerf.default 2124 2149 0.99:1
RadioGroupMinimalPerf.default 506 512 0.99:1
Icon.Fluent 838 843 0.99:1
ChatWithPopoverPerf.default 531 544 0.98:1
EmbedMinimalPerf.default 2136 2187 0.98:1
LayoutMinimalPerf.default 459 470 0.98:1
LoaderMinimalPerf.default 795 810 0.98:1
AccordionMinimalPerf.default 180 186 0.97:1
ListNestedPerf.default 641 658 0.97:1
GridMinimalPerf.default 406 424 0.96:1
Avatar.Fluent 957 998 0.96:1
CarouselMinimalPerf.default 490 516 0.95:1

@xugao xugao force-pushed the xgao/doc-theme branch 2 times, most recently from d9d38a8 to 9e013fa Compare October 13, 2020 03:07
@xugao xugao merged commit 0096254 into microsoft:master Oct 14, 2020
@msft-github-bot
Copy link
Contributor

🎉@fluentui/react-theme-provider@v1.0.0-beta.0 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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants