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

fix: button and accordion controls not inheriting font-family styles and update fast packages #14828

Merged
merged 3 commits into from
Aug 31, 2020

Conversation

SethDonohue
Copy link
Contributor

Pull request checklist

  • Include a change request file using $ yarn change

Description of changes

  • Fixes a bug where the button element on the shadow DOM for the accordion-item and button components does not inherit the font-family as it should.
  • Also updates fast dependencies

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Aug 31, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 872 891 5000
ButtonNext mount 579 582 5000
Checkbox mount 1565 1591 5000
CheckboxBase mount 1263 1286 5000
CheckboxNext mount 1669 1677 5000
ChoiceGroup mount 5002 4951 5000
ChoiceGroupNext mount 4962 4997 5000
ComboBox mount 927 931 1000
CommandBar mount 7663 7638 1000
ContextualMenu mount 13347 13289 1000
DefaultButton mount 1105 1097 5000
DetailsRow mount 3575 3601 5000
DetailsRowFast mount 3523 3596 5000
DetailsRowNoStyles mount 3340 3417 5000
Dialog mount 1511 1483 1000
DocumentCardTitle mount 1870 1854 1000
Dropdown mount 2607 2576 5000
FocusZone mount 1847 1875 5000
IconButton mount 1742 1707 5000
Label mount 339 344 5000
Link mount 449 455 5000
LinkNext mount 462 457 5000
MenuButton mount 1453 1430 5000
MessageBar mount 2130 2126 5000
MessageBarNext mount 2110 2093 5000
Nav mount 3236 3217 1000
OverflowSet mount 1424 1398 5000
OverflowSetNext mount 1048 1028 5000
Panel mount 1473 1439 1000
Persona mount 843 842 1000
Pivot mount 1414 1411 1000
PivotNext mount 1399 1401 1000
PrimaryButton mount 1272 1257 5000
SearchBox mount 1269 1287 5000
SearchBoxNext mount 1325 1300 5000
Shimmer mount 2564 2552 5000
ShimmerNext mount 2589 2569 5000
Slider mount 1502 1516 5000
SliderNext mount 1923 1957 5000
SpinButton mount 4978 4969 5000
SpinButtonNext mount 5027 5040 5000
Spinner mount 432 435 5000
SplitButton mount 3119 3085 5000
Stack mount 529 518 5000
StackWithIntrinsicChildren mount 1958 1919 5000
StackWithTextChildren mount 5021 4961 5000
TagPicker mount 2725 2785 5000
TeachingBubble mount 51335 50881 5000
TeachingBubbleNext mount 51030 51040 5000
Text mount 425 439 5000
TextField mount 1369 1335 5000
ThemeProvider mount 4349 4285 5000
ThemeProvider virtual-rerender 457 470 5000
Toggle mount 852 844 5000
ToggleNext mount 787 798 5000
button mount 119 123 5000

Perf Analysis (Fluent)

⚠️ 5 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1712 43 39.81:1 analysis
ButtonUseCssNestingPerf.default 56 41 1.37:1 analysis
ButtonUseCssPerf.default 58 44 1.32:1 analysis
ListCommonPerf.default 653 907 0.72:1 analysis
ListNestedPerf.default 597 889 0.67:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.43 0.48 0.9:1 2000 864
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 532
🔧 Checkbox.Fluent 0.64 0.36 1.78:1 1000 644
🎯 Dialog.Fluent 0.15 0.21 0.71:1 5000 769
🔧 Dropdown.Fluent 2.94 0.48 6.13:1 1000 2941
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 681
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 355
🔧 Slider.Fluent 1.58 0.34 4.65:1 1000 1581
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 335
🦄 Tooltip.Fluent 0.1 16.39 0.01:1 5000 521

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 162 147 1.1:1
TableMinimalPerf.default 404 370 1.09:1
AccordionMinimalPerf.default 152 141 1.08:1
BoxMinimalPerf.default 349 324 1.08:1
PortalMinimalPerf.default 129 120 1.08:1
Image.Fluent 355 330 1.08:1
DividerMinimalPerf.default 356 334 1.07:1
SegmentMinimalPerf.default 333 310 1.07:1
ButtonSlotsPerf.default 611 577 1.06:1
TextMinimalPerf.default 338 318 1.06:1
ProviderMinimalPerf.default 943 895 1.05:1
RadioGroupMinimalPerf.default 415 395 1.05:1
RefMinimalPerf.default 214 203 1.05:1
Text.Fluent 335 318 1.05:1
AvatarMinimalPerf.default 469 452 1.04:1
ReactionMinimalPerf.default 383 368 1.04:1
IconMinimalPerf.default 661 633 1.04:1
Tooltip.Fluent 521 500 1.04:1
AlertMinimalPerf.default 290 281 1.03:1
AnimationMinimalPerf.default 394 383 1.03:1
ChatDuplicateMessagesPerf.default 422 411 1.03:1
DialogMinimalPerf.default 777 756 1.03:1
FormMinimalPerf.default 395 383 1.03:1
ProviderMergeThemesPerf.default 2003 1939 1.03:1
StatusMinimalPerf.default 668 651 1.03:1
TextAreaMinimalPerf.default 461 447 1.03:1
VideoMinimalPerf.default 618 602 1.03:1
Checkbox.Fluent 644 625 1.03:1
Dialog.Fluent 769 745 1.03:1
CarouselMinimalPerf.default 441 432 1.02:1
ChatWithPopoverPerf.default 473 463 1.02:1
DropdownManyItemsPerf.default 747 734 1.02:1
FlexMinimalPerf.default 268 262 1.02:1
ListMinimalPerf.default 466 456 1.02:1
LoaderMinimalPerf.default 747 732 1.02:1
MenuButtonMinimalPerf.default 1514 1490 1.02:1
PopupMinimalPerf.default 667 655 1.02:1
SkeletonMinimalPerf.default 388 382 1.02:1
CustomToolbarPrototype.default 3803 3725 1.02:1
TooltipMinimalPerf.default 772 760 1.02:1
TreeMinimalPerf.default 847 833 1.02:1
Avatar.Fluent 864 844 1.02:1
Button.Fluent 532 523 1.02:1
Icon.Fluent 681 669 1.02:1
ButtonMinimalPerf.default 164 162 1.01:1
ChatMinimalPerf.default 600 593 1.01:1
CheckboxMinimalPerf.default 2837 2808 1.01:1
DropdownMinimalPerf.default 2968 2950 1.01:1
GridMinimalPerf.default 321 317 1.01:1
HeaderMinimalPerf.default 343 339 1.01:1
ImageMinimalPerf.default 351 346 1.01:1
InputMinimalPerf.default 1318 1305 1.01:1
LayoutMinimalPerf.default 380 375 1.01:1
MenuMinimalPerf.default 839 827 1.01:1
SliderMinimalPerf.default 1588 1565 1.01:1
SplitButtonMinimalPerf.default 3728 3677 1.01:1
TableManyItemsPerf.default 2167 2143 1.01:1
Dropdown.Fluent 2941 2910 1.01:1
CardMinimalPerf.default 541 539 1:1
ItemLayoutMinimalPerf.default 1238 1232 1:1
ToolbarMinimalPerf.default 912 911 1:1
Slider.Fluent 1581 1584 1:1
AttachmentSlotsPerf.default 1143 1158 0.99:1
EmbedMinimalPerf.default 1853 1893 0.98:1
HeaderSlotsPerf.default 748 765 0.98:1
LabelMinimalPerf.default 390 402 0.97:1
TreeWith60ListItems.default 198 207 0.96:1
ListWith60ListItems.default 955 1087 0.88:1

@size-auditor
Copy link

size-auditor bot commented Aug 31, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-next-ContextualMenu 145.855 kB 145.939 kB ExceedsBaseline     84 bytes
office-ui-fabric-react fluentui-react-next-Pickers 273.881 kB 273.964 kB ExceedsBaseline     83 bytes
office-ui-fabric-react office-ui-fabric-react-Pickers 273.881 kB 273.964 kB ExceedsBaseline     83 bytes
office-ui-fabric-react fluentui-react-next-Pivot 179.531 kB 179.614 kB ExceedsBaseline     83 bytes
office-ui-fabric-react fluentui-react-next-SplitButton 182.473 kB 182.556 kB ExceedsBaseline     83 bytes
office-ui-fabric-react office-ui-fabric-react-ContextualMenu 149.446 kB 149.528 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-CommandBar 192.66 kB 192.742 kB ExceedsBaseline     82 bytes
office-ui-fabric-react fluentui-react-next-DocumentCard 206.271 kB 206.353 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-Pivot 177.283 kB 177.365 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-DocumentCard 206.271 kB 206.353 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-Dialog 200.259 kB 200.341 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-Breadcrumb 190.291 kB 190.373 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-Panel 191.719 kB 191.801 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-Nav 179.58 kB 179.662 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-MessageBar 180.478 kB 180.56 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-Button 184.953 kB 185.035 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-ButtonGrid 172.079 kB 172.161 kB ExceedsBaseline     82 bytes
office-ui-fabric-react fluentui-react-next-Dialog 200.218 kB 200.3 kB ExceedsBaseline     82 bytes
office-ui-fabric-react fluentui-react-next-MenuButton 175.148 kB 175.23 kB ExceedsBaseline     82 bytes
office-ui-fabric-react fluentui-react-next-Nav 179.58 kB 179.662 kB ExceedsBaseline     82 bytes
office-ui-fabric-react fluentui-react-next-Panel 191.719 kB 191.801 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-Grid 172.079 kB 172.161 kB ExceedsBaseline     82 bytes
office-ui-fabric-react fluentui-react-next-Grid 172.079 kB 172.161 kB ExceedsBaseline     82 bytes
office-ui-fabric-react fluentui-react-next-MessageBar 180.476 kB 180.558 kB ExceedsBaseline     82 bytes
office-ui-fabric-react fluentui-react-next-SwatchColorPicker 182.358 kB 182.44 kB ExceedsBaseline     82 bytes
office-ui-fabric-react fluentui-react-next-Breadcrumb 190.291 kB 190.373 kB ExceedsBaseline     82 bytes
office-ui-fabric-react fluentui-react-next-SpinButton 184.294 kB 184.376 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-SearchBox 178.364 kB 178.446 kB ExceedsBaseline     82 bytes
office-ui-fabric-react fluentui-react-next-CommandBar 192.66 kB 192.742 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-SwatchColorPicker 182.342 kB 182.424 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-TeachingBubble 196.485 kB 196.567 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-SpinButton 184.407 kB 184.489 kB ExceedsBaseline     82 bytes
office-ui-fabric-react fluentui-react-next-SearchBox 178.295 kB 178.377 kB ExceedsBaseline     82 bytes
office-ui-fabric-react fluentui-react-next-TeachingBubble 196.485 kB 196.567 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-Facepile 201.022 kB 201.103 kB ExceedsBaseline     81 bytes
office-ui-fabric-react fluentui-react-next-Facepile 201.022 kB 201.103 kB ExceedsBaseline     81 bytes
office-ui-fabric-react fluentui-react-next-SelectedItemsList 268.579 kB 268.66 kB ExceedsBaseline     81 bytes
office-ui-fabric-react office-ui-fabric-react-FloatingPicker 230.747 kB 230.827 kB ExceedsBaseline     80 bytes
office-ui-fabric-react fluentui-react-next-FloatingPicker 230.747 kB 230.827 kB ExceedsBaseline     80 bytes
office-ui-fabric-react fluentui-react-next-ComboBox 264.73 kB 264.81 kB ExceedsBaseline     80 bytes
office-ui-fabric-react office-ui-fabric-react-ComboBox 235.976 kB 236.054 kB ExceedsBaseline     78 bytes
office-ui-fabric-react office-ui-fabric-react-Modal 91.877 kB 91.955 kB ExceedsBaseline     78 bytes
office-ui-fabric-react fluentui-react-next-Modal 90.731 kB 90.809 kB ExceedsBaseline     78 bytes
office-ui-fabric-react office-ui-fabric-react-Dropdown 223.483 kB 223.561 kB ExceedsBaseline     78 bytes
office-ui-fabric-react fluentui-react-next-Dropdown 223.483 kB 223.561 kB ExceedsBaseline     78 bytes
office-ui-fabric-react office-ui-fabric-react-SelectedItemsList 220.199 kB 220.277 kB ExceedsBaseline     78 bytes

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

Baseline commit: 3f948ab0e851b17f156af306070e3c498f00d93c (build)

@codesandbox-ci
Copy link

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

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

@chrisdholt chrisdholt merged commit 3c24d28 into microsoft:master Aug 31, 2020
@chrisdholt
Copy link
Member

Thanks @SethDonohue!

@msft-github-bot
Copy link
Contributor

🎉@fluentui/web-components@v0.1.8 has been released which incorporates this pull request.:tada:

Handy links:

hutchcodes pushed a commit to hutchcodes/fluentui that referenced this pull request Sep 10, 2020
…and update fast packages (microsoft#14828)

* update fast packages and add inherit to controls for button and accordion item

* Change files

* add yarn lock

Co-authored-by: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
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.

3 participants