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.

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

ThemeProvider: add instructions to replace Fabric, Customizer, loadTheme in README #15194

Merged
merged 5 commits into from
Sep 25, 2020

Conversation

xugao
Copy link
Contributor

@xugao xugao commented Sep 23, 2020

Pull request checklist

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

Description of changes

Add instructions for how to replace Fabric, Customizer, and loadTheme with ThemeProvider.

Related issue: #14740

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 23, 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 ee36178:

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 Sep 23, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 858 848 5000
BaseButton mount 921 902 5000
Breadcrumb mount 42595 42539 5000
BreadcrumbNext mount 161303 160891 5000
ButtonNext mount 596 590 5000
Checkbox mount 1556 1559 5000
CheckboxBase mount 1302 1293 5000
CheckboxNext mount 1523 1497 5000
ChoiceGroup mount 4991 4972 5000
ChoiceGroupNext mount 9716 9680 5000
ComboBox mount 928 939 1000
CommandBar mount 7710 7713 1000
ContextualMenu mount 14584 14179 1000
DefaultButton mount 1139 1132 5000
DetailsRow mount 3655 3631 5000
DetailsRowFast mount 3601 3664 5000
DetailsRowNoStyles mount 3466 3500 5000
Dialog mount 1557 1505 1000
DocumentCardTitle mount 1835 1834 1000
Dropdown mount 2562 2632 5000
FocusZone mount 1836 1822 5000
IconButton mount 1759 1749 5000
Label mount 347 348 5000
Layer mount 1974 1935 5000
LayerNext mount 1877 1914 5000
Link mount 455 453 5000
LinkNext mount 476 454 5000
MenuButton mount 1491 1531 5000
MessageBar mount 2120 2088 5000
MessageBarNext mount 2066 2062 5000
Nav mount 3288 3240 1000
OverflowSet mount 1425 1384 5000
OverflowSetNext mount 1041 1051 5000
Panel mount 1453 1448 1000
Persona mount 847 837 1000
Pivot mount 1425 1452 1000
PivotNext mount 1382 1465 1000
PrimaryButton mount 1272 1304 5000
Rating mount 7543 7623 5000
RatingNext mount 7490 7560 5000
SearchBox mount 1234 1277 5000
SearchBoxNext mount 1312 1349 5000
Shimmer mount 2590 2585 5000
ShimmerNext mount 2528 2554 5000
Slider mount 1497 1467 5000
SliderNext mount 1916 1918 5000
SpinButton mount 5034 5028 5000
SpinButtonNext mount 5100 5083 5000
Spinner mount 429 429 5000
SplitButton mount 3169 3157 5000
Stack mount 545 535 5000
StackWithIntrinsicChildren mount 1946 1975 5000
StackWithTextChildren mount 4997 4994 5000
SwatchColorPicker mount 10320 10406 5000
SwatchColorPickerNext mount 10246 10463 5000
TagPicker mount 2738 2741 5000
TeachingBubble mount 51523 51268 5000
TeachingBubbleNext mount 11495 11514 5000
Text mount 431 433 5000
TextField mount 1386 1395 5000
ThemeProvider mount 3263 3257 5000
ThemeProvider virtual-rerender 610 636 5000
Toggle mount 848 830 5000
ToggleNext mount 811 807 5000
button mount 119 116 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 893
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 571
🔧 Checkbox.Fluent 0.66 0.37 1.78:1 1000 659
🎯 Dialog.Fluent 0.16 0.23 0.7:1 5000 816
🔧 Dropdown.Fluent 3.02 0.48 6.29:1 1000 3016
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 767
🎯 Image.Fluent 0.08 0.11 0.73:1 5000 398
🔧 Slider.Fluent 1.61 0.36 4.47:1 1000 1613
🔧 Text.Fluent 0.07 0.04 1.75:1 5000 366
🦄 Tooltip.Fluent 0.12 17.71 0.01:1 5000 585

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 177 0 Infinity:1
AlertMinimalPerf.default 333 0 Infinity:1
AnimationMinimalPerf.default 448 0 Infinity:1
AttachmentMinimalPerf.default 178 0 Infinity:1
AttachmentSlotsPerf.default 1182 0 Infinity:1
AvatarMinimalPerf.default 506 0 Infinity:1
BoxMinimalPerf.default 374 0 Infinity:1
ButtonMinimalPerf.default 194 0 Infinity:1
ButtonOverridesMissPerf.default 1745 0 Infinity:1
ButtonSlotsPerf.default 606 0 Infinity:1
ButtonUseCssPerf.default 844 0 Infinity:1
ButtonUseCssNestingPerf.default 1105 0 Infinity:1
CardMinimalPerf.default 560 0 Infinity:1
CarouselMinimalPerf.default 458 0 Infinity:1
ChatMinimalPerf.default 637 0 Infinity:1
ChatWithPopoverPerf.default 499 0 Infinity:1
DialogMinimalPerf.default 818 0 Infinity:1
DividerMinimalPerf.default 406 0 Infinity:1
DropdownManyItemsPerf.default 765 0 Infinity:1
EmbedMinimalPerf.default 1955 0 Infinity:1
FlexMinimalPerf.default 313 0 Infinity:1
FormMinimalPerf.default 440 0 Infinity:1
GridMinimalPerf.default 365 0 Infinity:1
HeaderMinimalPerf.default 396 0 Infinity:1
HeaderSlotsPerf.default 807 0 Infinity:1
ImageMinimalPerf.default 413 0 Infinity:1
InputMinimalPerf.default 1346 0 Infinity:1
ItemLayoutMinimalPerf.default 1309 0 Infinity:1
LabelMinimalPerf.default 443 0 Infinity:1
LayoutMinimalPerf.default 433 0 Infinity:1
ListCommonPerf.default 690 0 Infinity:1
ListMinimalPerf.default 517 0 Infinity:1
ListNestedPerf.default 599 0 Infinity:1
ListWith60ListItems.default 908 0 Infinity:1
LoaderMinimalPerf.default 750 0 Infinity:1
MenuMinimalPerf.default 920 0 Infinity:1
MenuButtonMinimalPerf.default 1596 0 Infinity:1
PopupMinimalPerf.default 732 0 Infinity:1
PortalMinimalPerf.default 181 0 Infinity:1
ProviderMergeThemesPerf.default 2100 0 Infinity:1
ProviderMinimalPerf.default 1055 0 Infinity:1
RadioGroupMinimalPerf.default 472 0 Infinity:1
RefMinimalPerf.default 249 0 Infinity:1
SegmentMinimalPerf.default 378 0 Infinity:1
SkeletonMinimalPerf.default 439 0 Infinity:1
SliderMinimalPerf.default 1612 0 Infinity:1
SplitButtonMinimalPerf.default 3813 0 Infinity:1
StatusMinimalPerf.default 766 0 Infinity:1
IconMinimalPerf.default 685 0 Infinity:1
TableManyItemsPerf.default 2224 0 Infinity:1
TableMinimalPerf.default 449 0 Infinity:1
TextMinimalPerf.default 382 0 Infinity:1
TextAreaMinimalPerf.default 507 0 Infinity:1
CustomToolbarPrototype.default 3987 0 Infinity:1
ToolbarMinimalPerf.default 974 0 Infinity:1
TooltipMinimalPerf.default 880 0 Infinity:1
TreeMinimalPerf.default 890 0 Infinity:1
TreeWith60ListItems.default 224 0 Infinity:1
VideoMinimalPerf.default 678 0 Infinity:1
Avatar.Fluent 893 0 Infinity:1
Button.Fluent 571 0 Infinity:1
Checkbox.Fluent 659 0 Infinity:1
Dropdown.Fluent 3016 0 Infinity:1
Icon.Fluent 767 0 Infinity:1
Image.Fluent 398 0 Infinity:1
Slider.Fluent 1613 0 Infinity:1
Text.Fluent 366 0 Infinity:1
DropdownMinimalPerf.default 3002 1 3002:1
CheckboxMinimalPerf.default 2949 1 2949:1
Dialog.Fluent 816 1 816:1
Tooltip.Fluent 585 1 585:1
ChatDuplicateMessagesPerf.default 423 1 423:1
ReactionMinimalPerf.default 422 1 422:1

@size-auditor
Copy link

size-auditor bot commented Sep 23, 2020

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 9c8c7aebfb1f94da29e886b5886d647407ea3aef (build)

@xugao xugao force-pushed the xgao/update-theme-provider-readme branch from 1e2e9bf to c0a8753 Compare September 24, 2020 18:33
Comment on lines 202 to 214
### loadTheme

`loadTheme` remains to work as is. However, you are recommended to replace `loadTheme` with `ThemeProvider`. That way, your application consistently has one way of providing theme.

To do that, instead of calling `loadTheme(your_theme)`, you will simply wrap the root component of your React application once with `ThemeProvider`:

```
<ThemeProvider theme={your_theme}>
<App />
</ThemeProvider>
```

One caveat here is that if you app has styles which relies on `@microsoft/load-themed-styles`, `ThemeProvider` won't be able to replace `loadTheme` in this case.
Copy link
Member

Choose a reason for hiding this comment

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

loadTheme does not exist in this package; this guidance probably should just live in release-notes, possibly the styling readme where it currently lives.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

agree this doesn't seem to be the most ideal place. These are mainly purposed as our release notes.
I am going to do more wiki/doc cleanup next week (tracked in #14740). I am going to start here and re-evaluate as I go.

packages/react-theme-provider/README.md Outdated Show resolved Hide resolved
packages/react-theme-provider/README.md Outdated Show resolved Hide resolved
packages/react-theme-provider/README.md Outdated Show resolved Hide resolved
packages/react-theme-provider/README.md Outdated Show resolved Hide resolved
@xugao xugao force-pushed the xgao/update-theme-provider-readme branch from c0a8753 to ee36178 Compare September 25, 2020 21:36
@xugao xugao merged commit cdc0aec into microsoft:master Sep 25, 2020
@msft-github-bot
Copy link
Contributor

🎉@fluentui/react-theme-provider@v0.14.2 has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/react-next@v8.0.0-alpha.118 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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants