Skip to content

Conversation

@xugao
Copy link
Contributor

@xugao xugao commented Aug 7, 2020

Pull request checklist

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

Description of changes

  • Support passing V7 theme (ITheme) to ThemeProvider
  • Added components prop in Theme to support passing component-level styles (similar to <Customizer scopeSettings={ Component: { styles: { // styles prop }}} />)
  • ThemeProvider now should be able to do everything theming-related that Customizer can do
  • ThemeProvider respects global theme (from loadThem) and theme within CustomizerContext. All supported scenarios are covered by new screener tests in apps/vr-tests/src/stories/ThemeProvider.stories.tsx.
  • Removed Customizer shimmer previously added in react-next. We no longer need it for V8. For converged components (e.g. button), ThemeProvider will be required for be functional. For all other V8 components (scoped to only contains FC changes, without scss conversion), current Customizer is sufficient.
  • Removed lib/compat inside react-theme-provider. We might need to have lib/next later based on work beyond v8.

Upcoming

  • Make V7 theme works for react-button: inside getTokens, complete mapping Theme to Tokens which are used by buttons

Focus areas to test

Screener tests inside apps/vr-tests/src/stories/ThemeProvider.stories.tsx

@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 fdda8e8:

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

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-next-Styling 47.233 kB 47.559 kB ExceedsBaseline     326 bytes
office-ui-fabric-react fluentui-react-next-Checkbox 45.845 kB 46.157 kB ExceedsBaseline     312 bytes
office-ui-fabric-react fluentui-react-next-Fabric 41.082 kB 38.632 kB BelowBaseline     -2.45 kB
office-ui-fabric-react fluentui-react-next-Utilities 74.26 kB 68.945 kB BelowBaseline     -5.315 kB

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

Baseline commit: 12b2fde208a5df3340a4538f93e9745a8d45e340 (build)

@xugao xugao force-pushed the xgao/themeprovider-supportv7them branch from 3135e6e to 5f42a4d Compare August 7, 2020 16:08
@msft-github-bot
Copy link
Contributor

msft-github-bot commented Aug 7, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1041 1051 5000
ButtonNext mount 649 659 5000
Checkbox mount 1881 1795 5000
CheckboxBase mount 1562 1516 5000
CheckboxNext mount 1881 1878 5000
ChoiceGroup mount 5763 5668 5000
ComboBox mount 1042 1040 1000
CommandBar mount 8330 8465 1000
ContextualMenu mount 17099 17051 1000
DefaultButton mount 1314 1277 5000
DetailsRow mount 4017 4035 5000
DetailsRowFast mount 4004 3914 5000
DetailsRowNoStyles mount 3752 3843 5000
Dialog mount 1678 1702 1000
DocumentCardTitle mount 1957 1954 1000
Dropdown mount 2920 2934 5000
FocusZone mount 1903 1991 5000
IconButton mount 2035 2020 5000
Label mount 403 385 5000
Link mount 537 537 5000
LinkNext mount 559 553 5000
MenuButton mount 1702 1744 5000
Nav mount 3666 3676 1000
Panel mount 1610 1628 1000
Persona mount 944 949 1000
Pivot mount 1573 1594 1000
PivotNext mount 1561 1537 1000
PrimaryButton mount 1436 1414 5000
SearchBox mount 1455 1490 5000
SearchBoxNext mount 1522 1577 5000
Slider mount 1674 1713 5000
SliderNext mount 2196 2186 5000
SpinButton mount 5679 5564 5000
SpinButtonNext mount 5767 5585 5000
Spinner mount 482 472 5000
SplitButton mount 3548 3579 5000
Stack mount 600 600 5000
StackWithIntrinsicChildren mount 2206 2195 5000
StackWithTextChildren mount 5784 5747 5000
TagPicker mount 3112 3184 5000
Text mount 473 482 5000
TextField mount 1600 1622 5000
ThemeProvider mount 3100 3055 5000
ThemeProvider virtual-rerender 523 506 5000
Toggle mount 966 950 5000
ToggleNext mount 965 971 5000
button mount 122 131 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.5 0.53 0.94:1 2000 1005
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 633
🔧 Checkbox.Fluent 0.7 0.39 1.79:1 1000 700
🦄 Dialog.Fluent 0.17 0.25 0.68:1 5000 857
🔧 Dropdown.Fluent 3.22 0.53 6.08:1 1000 3220
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 800
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 417
🔧 Slider.Fluent 1.7 0.4 4.25:1 1000 1695
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 394
🦄 Tooltip.Fluent 0.11 19.17 0.01:1 5000 571

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TextMinimalPerf.default 413 372 1.11:1
ButtonMinimalPerf.default 214 194 1.1:1
FlexMinimalPerf.default 318 288 1.1:1
AnimationMinimalPerf.default 460 427 1.08:1
AvatarMinimalPerf.default 555 513 1.08:1
GridMinimalPerf.default 396 365 1.08:1
RefMinimalPerf.default 239 221 1.08:1
SegmentMinimalPerf.default 413 384 1.08:1
LayoutMinimalPerf.default 466 436 1.07:1
IconMinimalPerf.default 808 755 1.07:1
TreeWith60ListItems.default 246 230 1.07:1
PortalMinimalPerf.default 140 132 1.06:1
Text.Fluent 394 371 1.06:1
AlertMinimalPerf.default 363 347 1.05:1
ReactionMinimalPerf.default 464 442 1.05:1
StatusMinimalPerf.default 783 748 1.05:1
TextAreaMinimalPerf.default 546 521 1.05:1
TooltipMinimalPerf.default 895 856 1.05:1
Icon.Fluent 800 761 1.05:1
DropdownManyItemsPerf.default 875 839 1.04:1
HierarchicalTreeMinimalPerf.default 503 482 1.04:1
AccordionMinimalPerf.default 179 174 1.03:1
CardMinimalPerf.default 653 631 1.03:1
ChatDuplicateMessagesPerf.default 467 455 1.03:1
ChatWithPopoverPerf.default 537 523 1.03:1
FormMinimalPerf.default 475 462 1.03:1
InputMinimalPerf.default 1469 1426 1.03:1
Button.Fluent 633 615 1.03:1
AttachmentSlotsPerf.default 1330 1304 1.02:1
ChatMinimalPerf.default 703 686 1.02:1
DividerMinimalPerf.default 424 414 1.02:1
HeaderSlotsPerf.default 910 889 1.02:1
MenuMinimalPerf.default 972 952 1.02:1
MenuButtonMinimalPerf.default 1762 1720 1.02:1
ProviderMergeThemesPerf.default 2081 2036 1.02:1
SkeletonMinimalPerf.default 475 467 1.02:1
SplitButtonMinimalPerf.default 4288 4210 1.02:1
CustomToolbarPrototype.default 4126 4055 1.02:1
Image.Fluent 417 408 1.02:1
Tooltip.Fluent 571 562 1.02:1
AttachmentMinimalPerf.default 171 169 1.01:1
BoxMinimalPerf.default 389 387 1.01:1
CarouselMinimalPerf.default 515 508 1.01:1
HeaderMinimalPerf.default 414 408 1.01:1
ListMinimalPerf.default 541 537 1.01:1
ListWith60ListItems.default 1228 1221 1.01:1
ProviderMinimalPerf.default 1030 1016 1.01:1
TableMinimalPerf.default 458 453 1.01:1
Avatar.Fluent 1005 999 1.01:1
Dialog.Fluent 857 850 1.01:1
CheckboxMinimalPerf.default 3176 3188 1:1
DropdownMinimalPerf.default 3172 3167 1:1
EmbedMinimalPerf.default 2175 2176 1:1
ImageMinimalPerf.default 430 429 1:1
ItemLayoutMinimalPerf.default 1480 1473 1:1
LabelMinimalPerf.default 451 452 1:1
LoaderMinimalPerf.default 824 827 1:1
PopupMinimalPerf.default 734 732 1:1
SliderMinimalPerf.default 1765 1773 1:1
TableManyItemsPerf.default 2542 2536 1:1
TreeMinimalPerf.default 1010 1009 1:1
ButtonSlotsPerf.default 682 690 0.99:1
DialogMinimalPerf.default 873 882 0.99:1
Dropdown.Fluent 3220 3255 0.99:1
Slider.Fluent 1695 1715 0.99:1
ListNestedPerf.default 1023 1041 0.98:1
ToolbarMinimalPerf.default 1112 1131 0.98:1
VideoMinimalPerf.default 708 723 0.98:1
Checkbox.Fluent 700 712 0.98:1
ListCommonPerf.default 1071 1105 0.97:1
RadioGroupMinimalPerf.default 475 506 0.94:1

theme={{
semanticColors: {
primaryButtonBackground: '#FFF',
primaryButtonText: 'red',
Copy link
Member

Choose a reason for hiding this comment

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

why is createTheme used elsewhere but not here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

so ThemeProvider supports partial theme, but Customizer actually doesn't. If we see places i use createTheme, it's for creating a full theme to pass to Customizer. (This is an improvement for ThemeProvider compared to Customizer)

import { PartialTheme } from '@fluentui/react-theme-provider';

export const FluentTheme: Theme = {
export const FluentTheme: PartialTheme = {
Copy link
Member

Choose a reason for hiding this comment

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

we should really consider renaming this package to @fluentui/storybook-addons or something that doesn't seem like a fork of storybook.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I agree, will take that as a follow-up!

@xugao xugao force-pushed the xgao/themeprovider-supportv7them branch from 55a1ba6 to fdda8e8 Compare August 11, 2020 16:19
@xugao xugao merged commit 306edd7 into microsoft:master Aug 11, 2020
@msft-github-bot
Copy link
Contributor

🎉@fluentui/storybook@v0.2.6 has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

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

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/react-tabs@v0.2.11 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.

4 participants