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

Fabric component: styles prop respected #14827

Merged
merged 3 commits into from
Aug 31, 2020
Merged

Fabric component: styles prop respected #14827

merged 3 commits into from
Aug 31, 2020

Conversation

dzearing
Copy link
Member

Pull request checklist

Description of changes

Before: styles prop wasn't being used
After: styles prop passed along

@size-auditor
Copy link

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

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-next-MessageBar 180.464 kB 180.476 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Tooltip 82.898 kB 82.91 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Grid 172.067 kB 172.079 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Grid 172.067 kB 172.079 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-HoverCard 95.662 kB 95.674 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-PersonaCoin 114.32 kB 114.332 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-TeachingBubble 196.473 kB 196.485 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-SwatchColorPicker 182.346 kB 182.358 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Keytip 77.625 kB 77.637 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-FloatingPicker 230.735 kB 230.747 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-KeytipLayer 97.995 kB 98.007 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Facepile 201.01 kB 201.022 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Layer 44.914 kB 44.926 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-MenuButton 175.136 kB 175.148 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Callout 82.933 kB 82.945 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Dropdown 223.471 kB 223.483 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-MessageBar 180.466 kB 180.478 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-SearchBox 178.283 kB 178.295 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-HoverCard 95.662 kB 95.674 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Persona 114.32 kB 114.332 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-DatePicker 201.437 kB 201.449 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Coachmark 92.1 kB 92.112 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Layer 44.914 kB 44.926 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Keytip 77.625 kB 77.637 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-ComboBox 235.964 kB 235.976 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-CommandBar 192.648 kB 192.66 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-ContextualMenu 149.434 kB 149.446 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-DetailsList 213.269 kB 213.281 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-FloatingPicker 230.735 kB 230.747 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Dialog 200.247 kB 200.259 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Nav 179.568 kB 179.58 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-DocumentCard 206.259 kB 206.271 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Dropdown 223.471 kB 223.483 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Panel 191.707 kB 191.719 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Facepile 201.01 kB 201.022 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Modal 91.865 kB 91.877 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Nav 179.568 kB 179.58 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-DocumentCard 206.259 kB 206.271 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-ButtonGrid 172.067 kB 172.079 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-ShimmeredDetailsList 223.858 kB 223.87 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-SpinButton 184.282 kB 184.294 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-SpinButton 184.395 kB 184.407 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-PositioningContainer 68.921 kB 68.933 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-ShimmeredDetailsList 223.858 kB 223.87 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Callout 78.707 kB 78.719 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-SwatchColorPicker 182.33 kB 182.342 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Pickers 273.869 kB 273.881 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-TeachingBubble 196.473 kB 196.485 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Button 184.941 kB 184.953 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Breadcrumb 190.279 kB 190.291 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Breadcrumb 190.279 kB 190.291 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-SelectedItemsList 268.567 kB 268.579 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Tooltip 82.898 kB 82.91 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Modal 90.719 kB 90.731 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Coachmark 88.38 kB 88.392 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-SplitButton 182.461 kB 182.473 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-SelectedItemsList 220.187 kB 220.199 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Panel 191.707 kB 191.719 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Persona 110.702 kB 110.714 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-PersonaCoin 110.702 kB 110.714 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Dialog 200.206 kB 200.218 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Pickers 273.869 kB 273.881 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Pivot 177.271 kB 177.283 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-DetailsList 213.269 kB 213.281 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-PositioningContainer 70.68 kB 70.692 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-DatePicker 174.265 kB 174.277 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-ContextualMenu 145.843 kB 145.855 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-CommandBar 192.648 kB 192.66 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-ComboBox 264.718 kB 264.73 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-SearchBox 178.352 kB 178.364 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-Pivot 179.519 kB 179.531 kB ExceedsBaseline     12 bytes
office-ui-fabric-react fluentui-react-next-KeytipLayer 97.995 kB 98.007 kB ExceedsBaseline     12 bytes
office-ui-fabric-react office-ui-fabric-react-Fabric 39.157 kB 39.163 kB ExceedsBaseline     6 bytes
office-ui-fabric-react fluentui-react-next-Fabric 38.87 kB 38.872 kB ExceedsBaseline     2 bytes

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

Baseline commit: feafb74421acd353befb7c2ae34459d4b85aaa3f (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 31, 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 18685cf:

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

@dzearing dzearing merged commit 3f948ab into microsoft:master Aug 31, 2020
@dzearing dzearing deleted the fix/Fabric branch August 31, 2020 21:27
@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 930 916 5000
ButtonNext mount 586 601 5000
Checkbox mount 1658 1633 5000
CheckboxBase mount 1429 1385 5000
CheckboxNext mount 1764 1771 5000
ChoiceGroup mount 5249 5269 5000
ChoiceGroupNext mount 5274 5303 5000
ComboBox mount 940 940 1000
CommandBar mount 7925 7700 1000
ContextualMenu mount 13623 13738 1000
DefaultButton mount 1180 1188 5000
DetailsRow mount 3711 3732 5000
DetailsRowFast mount 3945 3813 5000
DetailsRowNoStyles mount 3514 3631 5000
Dialog mount 1634 1572 1000
DocumentCardTitle mount 1805 1824 1000
Dropdown mount 2776 3003 5000
FocusZone mount 1797 1845 5000
IconButton mount 1847 1897 5000
Label mount 352 351 5000
Link mount 462 466 5000
LinkNext mount 498 485 5000
MenuButton mount 1559 1554 5000
MessageBar mount 2124 2103 5000
MessageBarNext mount 2151 2180 5000
Nav mount 3446 3370 1000
OverflowSet mount 1479 1457 5000
OverflowSetNext mount 1160 1085 5000
Panel mount 1507 1586 1000
Persona mount 869 892 1000
Pivot mount 1464 1445 1000
PivotNext mount 1444 1436 1000
PrimaryButton mount 1306 1346 5000
SearchBox mount 1361 1380 5000
SearchBoxNext mount 1470 1422 5000
Shimmer mount 2707 2790 5000
ShimmerNext mount 2821 2688 5000
Slider mount 1562 1552 5000
SliderNext mount 2008 2001 5000
SpinButton mount 5302 5186 5000
SpinButtonNext mount 5245 5273 5000
Spinner mount 428 430 5000
SplitButton mount 3317 3206 5000
Stack mount 567 569 5000
StackWithIntrinsicChildren mount 2100 2098 5000
StackWithTextChildren mount 5649 5513 5000
TagPicker mount 2872 2864 5000
TeachingBubble mount 50290 50145 5000
TeachingBubbleNext mount 50518 50029 5000
Text mount 442 451 5000
TextField mount 1457 1445 5000
ThemeProvider mount 4237 4256 5000
ThemeProvider virtual-rerender 462 462 5000
Toggle mount 892 876 5000
ToggleNext mount 840 845 5000
button mount 104 116 5000

Perf Analysis (Fluent)

⚠️ 3 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1839 44 41.8:1 analysis
PortalMinimalPerf.default 169 125 1.35:1 analysis
ButtonUseCssPerf.default 61 47 1.3:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.47 0.5 0.94:1 2000 944
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 603
🔧 Checkbox.Fluent 0.67 0.37 1.81:1 1000 670
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 838
🔧 Dropdown.Fluent 3.07 0.5 6.14:1 1000 3066
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 806
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 399
🔧 Slider.Fluent 1.64 0.37 4.43:1 1000 1637
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 361
🦄 Tooltip.Fluent 0.11 16.2 0.01:1 5000 528

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonUseCssNestingPerf.default 66 44 1.5:1
GridMinimalPerf.default 396 345 1.15:1
AttachmentMinimalPerf.default 192 169 1.14:1
TreeWith60ListItems.default 258 227 1.14:1
RefMinimalPerf.default 224 200 1.12:1
FormMinimalPerf.default 461 417 1.11:1
AccordionMinimalPerf.default 191 174 1.1:1
LayoutMinimalPerf.default 462 420 1.1:1
BoxMinimalPerf.default 390 358 1.09:1
ButtonSlotsPerf.default 687 637 1.08:1
LabelMinimalPerf.default 508 472 1.08:1
CarouselMinimalPerf.default 496 464 1.07:1
ChatMinimalPerf.default 661 620 1.07:1
ProviderMergeThemesPerf.default 2102 1962 1.07:1
DividerMinimalPerf.default 390 368 1.06:1
ImageMinimalPerf.default 412 388 1.06:1
ProviderMinimalPerf.default 1042 986 1.06:1
AnimationMinimalPerf.default 431 412 1.05:1
DropdownManyItemsPerf.default 824 784 1.05:1
EmbedMinimalPerf.default 2099 1992 1.05:1
HeaderMinimalPerf.default 414 396 1.05:1
PopupMinimalPerf.default 766 731 1.05:1
SkeletonMinimalPerf.default 449 428 1.05:1
TableMinimalPerf.default 450 428 1.05:1
TreeMinimalPerf.default 1010 965 1.05:1
ButtonMinimalPerf.default 196 188 1.04:1
CardMinimalPerf.default 617 596 1.04:1
ListMinimalPerf.default 516 494 1.04:1
TooltipMinimalPerf.default 875 843 1.04:1
Button.Fluent 603 580 1.04:1
Checkbox.Fluent 670 642 1.04:1
Icon.Fluent 806 775 1.04:1
DialogMinimalPerf.default 819 799 1.03:1
FlexMinimalPerf.default 303 294 1.03:1
HeaderSlotsPerf.default 893 866 1.03:1
SliderMinimalPerf.default 1686 1644 1.03:1
StatusMinimalPerf.default 756 737 1.03:1
Avatar.Fluent 944 920 1.03:1
AvatarMinimalPerf.default 520 508 1.02:1
ChatDuplicateMessagesPerf.default 447 438 1.02:1
InputMinimalPerf.default 1402 1379 1.02:1
LoaderMinimalPerf.default 808 791 1.02:1
MenuButtonMinimalPerf.default 1728 1689 1.02:1
TableManyItemsPerf.default 2482 2429 1.02:1
TextMinimalPerf.default 369 360 1.02:1
Dialog.Fluent 838 819 1.02:1
Image.Fluent 399 390 1.02:1
MenuMinimalPerf.default 980 966 1.01:1
ToolbarMinimalPerf.default 1022 1014 1.01:1
VideoMinimalPerf.default 690 686 1.01:1
Tooltip.Fluent 528 521 1.01:1
ChatWithPopoverPerf.default 508 506 1:1
SplitButtonMinimalPerf.default 4010 3994 1:1
CheckboxMinimalPerf.default 2970 2995 0.99:1
DropdownMinimalPerf.default 2969 3011 0.99:1
ItemLayoutMinimalPerf.default 1400 1411 0.99:1
SegmentMinimalPerf.default 375 380 0.99:1
CustomToolbarPrototype.default 3909 3932 0.99:1
Dropdown.Fluent 3066 3085 0.99:1
Slider.Fluent 1637 1661 0.99:1
AttachmentSlotsPerf.default 1222 1256 0.97:1
ReactionMinimalPerf.default 430 443 0.97:1
IconMinimalPerf.default 736 758 0.97:1
TextAreaMinimalPerf.default 519 545 0.95:1
RadioGroupMinimalPerf.default 455 482 0.94:1
Text.Fluent 361 388 0.93:1
AlertMinimalPerf.default 297 328 0.91:1
ListWith60ListItems.default 1066 1217 0.88:1
ListCommonPerf.default 751 990 0.76:1
ListNestedPerf.default 667 977 0.68:1

@msft-github-bot
Copy link
Contributor

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

Handy links:

@msft-github-bot msft-github-bot mentioned this pull request Sep 1, 2020
Closed
hutchcodes pushed a commit to hutchcodes/fluentui that referenced this pull request Sep 10, 2020
@dzearing @hutchcodes
Fabric component: styles prop respected (microsoft#14827)
004e14e 
* fabric style fix.

* Change files

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

@khmakoto khmakoto khmakoto approved these changes

Assignees
No one assigned
Labels
Component: Fabric
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

<Fabric> component does not apply custom root styles
3 participants
@dzearing @msft-github-bot @khmakoto