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

Set font-family inherit on button and input elements #15172

Merged
merged 4 commits into from
Sep 23, 2020

Conversation

xugao
Copy link
Contributor

@xugao xugao commented Sep 22, 2020

Pull request checklist

Description of changes

Currently, Fabric component applies font-family: inherit for button, input and textarea here.

This causes a specificity issue because they will win over component-level styles. see example here.

This change adds font-family: inherit to component styles so they are styled correctly without the styles from Fabric.
This change does not remove styles from Fabric, since it can be a breaking change for users. However, in the long term, we will not have these styles by default in ThemeProvider (a replacement of Fabric).

Focus areas to test

(optional)

@codesandbox-ci
Copy link

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 4443aa9:

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

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-next-DatePicker 175.341 kB 175.467 kB ExceedsBaseline     126 bytes
office-ui-fabric-react fluentui-react-next-Calendar 113.672 kB 113.798 kB ExceedsBaseline     126 bytes
office-ui-fabric-react office-ui-fabric-react-DatePicker 202.483 kB 202.563 kB ExceedsBaseline     80 bytes
office-ui-fabric-react office-ui-fabric-react-Calendar 138.013 kB 138.093 kB ExceedsBaseline     80 bytes
office-ui-fabric-react office-ui-fabric-react-SpinButton 185.553 kB 185.574 kB ExceedsBaseline     21 bytes
office-ui-fabric-react fluentui-react-next-SpinButton 185.489 kB 185.51 kB ExceedsBaseline     21 bytes

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

Baseline commit: 261dea7a150115ce904768724cbeac80ded20382 (build)

@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 909 899 5000
Breadcrumb mount 42032 42472 5000
BreadcrumbNext mount 159881 161673 5000
ButtonNext mount 594 608 5000
Checkbox mount 1607 1534 5000
CheckboxBase mount 1350 1354 5000
CheckboxNext mount 1488 1520 5000
ChoiceGroup mount 5034 4965 5000
ChoiceGroupNext mount 9706 9675 5000
ComboBox mount 924 934 1000
CommandBar mount 7782 7807 1000
ContextualMenu mount 13945 14120 1000
DefaultButton mount 1082 1115 5000
DetailsRow mount 3602 3612 5000
DetailsRowFast mount 3555 3554 5000
DetailsRowNoStyles mount 3451 3384 5000
Dialog mount 1494 1498 1000
DocumentCardTitle mount 1811 1861 1000
Dropdown mount 2521 2581 5000
FocusZone mount 1881 1805 5000
IconButton mount 1773 1692 5000
Label mount 363 344 5000
Layer mount 1997 2032 5000
LayerNext mount 1925 1877 5000
Link mount 465 456 5000
LinkNext mount 512 474 5000
MenuButton mount 1529 1498 5000
MessageBar mount 2129 2177 5000
MessageBarNext mount 2124 2116 5000
Nav mount 3231 3253 1000
OverflowSet mount 1380 1520 5000
OverflowSetNext mount 1077 1063 5000
Panel mount 1527 1497 1000
Persona mount 862 878 1000
Pivot mount 1427 1453 1000
PivotNext mount 1397 1459 1000
PrimaryButton mount 1271 1324 5000
Rating mount 7781 7684 5000
RatingNext mount 7476 7728 5000
SearchBox mount 1260 1301 5000
SearchBoxNext mount 1362 1296 5000
Shimmer mount 2572 2600 5000
ShimmerNext mount 2564 2599 5000
Slider mount 1494 1522 5000
SliderNext mount 1948 1926 5000
SpinButton mount 5036 4966 5000
SpinButtonNext mount 5193 5123 5000
Spinner mount 425 430 5000
SplitButton mount 3208 3162 5000
Stack mount 525 572 5000
StackWithIntrinsicChildren mount 1932 1976 5000
StackWithTextChildren mount 4979 4983 5000
SwatchColorPicker mount 10311 10316 5000
SwatchColorPickerNext mount 10343 10181 5000
TagPicker mount 2764 2707 5000
TeachingBubble mount 51184 51090 5000
TeachingBubbleNext mount 11716 11696 5000
Text mount 435 436 5000
TextField mount 1347 1396 5000
ThemeProvider mount 2507 2498 5000
ThemeProvider virtual-rerender 630 607 5000
Toggle mount 891 833 5000
ToggleNext mount 853 835 5000
button mount 109 127 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 1763 46 38.33:1 analysis
ButtonUseCssNestingPerf.default 1129 45 25.09:1 analysis
ButtonUseCssPerf.default 836 44 19:1 analysis
ChatWithPopoverPerf.default 499 461 1.08:1 analysis
ListCommonPerf.default 715 940 0.76:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.44 0.49 0.9:1 2000 883
🦄 Button.Fluent 0.12 0.19 0.63:1 5000 613
🔧 Checkbox.Fluent 0.65 0.35 1.86:1 1000 647
🎯 Dialog.Fluent 0.16 0.23 0.7:1 5000 816
🔧 Dropdown.Fluent 3.03 0.47 6.45:1 1000 3029
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 738
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 419
🔧 Slider.Fluent 1.62 0.4 4.05:1 1000 1621
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 367
🦄 Tooltip.Fluent 0.12 18.18 0.01:1 5000 604

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
BoxMinimalPerf.default 418 326 1.28:1
RefMinimalPerf.default 243 192 1.27:1
PortalMinimalPerf.default 170 137 1.24:1
SegmentMinimalPerf.default 391 316 1.24:1
TextAreaMinimalPerf.default 548 442 1.24:1
GridMinimalPerf.default 367 304 1.21:1
ButtonMinimalPerf.default 192 160 1.2:1
DividerMinimalPerf.default 404 340 1.19:1
TextMinimalPerf.default 385 323 1.19:1
AttachmentMinimalPerf.default 178 151 1.18:1
Image.Fluent 419 354 1.18:1
Tooltip.Fluent 604 513 1.18:1
LayoutMinimalPerf.default 433 371 1.17:1
TableMinimalPerf.default 442 378 1.17:1
Button.Fluent 613 522 1.17:1
RadioGroupMinimalPerf.default 453 390 1.16:1
PopupMinimalPerf.default 763 662 1.15:1
ReactionMinimalPerf.default 436 379 1.15:1
SkeletonMinimalPerf.default 440 381 1.15:1
CarouselMinimalPerf.default 489 428 1.14:1
StatusMinimalPerf.default 728 639 1.14:1
DialogMinimalPerf.default 848 750 1.13:1
FormMinimalPerf.default 428 381 1.12:1
ChatMinimalPerf.default 672 606 1.11:1
ToolbarMinimalPerf.default 1030 931 1.11:1
Dialog.Fluent 816 736 1.11:1
Text.Fluent 367 330 1.11:1
AccordionMinimalPerf.default 162 147 1.1:1
FlexMinimalPerf.default 306 278 1.1:1
IconMinimalPerf.default 701 635 1.1:1
VideoMinimalPerf.default 670 610 1.1:1
ImageMinimalPerf.default 381 348 1.09:1
LabelMinimalPerf.default 446 408 1.09:1
MenuMinimalPerf.default 899 828 1.09:1
TooltipMinimalPerf.default 865 796 1.09:1
AnimationMinimalPerf.default 440 408 1.08:1
DropdownManyItemsPerf.default 809 749 1.08:1
TreeMinimalPerf.default 944 871 1.08:1
Icon.Fluent 738 684 1.08:1
AlertMinimalPerf.default 305 285 1.07:1
CardMinimalPerf.default 602 562 1.07:1
HeaderMinimalPerf.default 402 377 1.07:1
MenuButtonMinimalPerf.default 1649 1538 1.07:1
AttachmentSlotsPerf.default 1171 1103 1.06:1
ProviderMergeThemesPerf.default 2011 1896 1.06:1
ProviderMinimalPerf.default 975 916 1.06:1
SliderMinimalPerf.default 1668 1595 1.05:1
SplitButtonMinimalPerf.default 3872 3688 1.05:1
Avatar.Fluent 883 837 1.05:1
Checkbox.Fluent 647 617 1.05:1
ListMinimalPerf.default 493 475 1.04:1
Slider.Fluent 1621 1558 1.04:1
EmbedMinimalPerf.default 1973 1907 1.03:1
InputMinimalPerf.default 1331 1289 1.03:1
Dropdown.Fluent 3029 2940 1.03:1
AvatarMinimalPerf.default 483 472 1.02:1
HeaderSlotsPerf.default 811 796 1.02:1
CustomToolbarPrototype.default 3852 3763 1.02:1
ItemLayoutMinimalPerf.default 1270 1259 1.01:1
ButtonSlotsPerf.default 589 587 1:1
LoaderMinimalPerf.default 744 746 1:1
ChatDuplicateMessagesPerf.default 436 439 0.99:1
CheckboxMinimalPerf.default 2887 2903 0.99:1
TableManyItemsPerf.default 2166 2180 0.99:1
DropdownMinimalPerf.default 2948 3006 0.98:1
TreeWith60ListItems.default 209 235 0.89:1
ListWith60ListItems.default 957 1125 0.85:1
ListNestedPerf.default 614 890 0.69:1

@xugao xugao merged commit fc211d8 into microsoft:master Sep 23, 2020
@msft-github-bot
Copy link
Contributor

🎉@uifabric/date-time@v7.17.14 has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/react-next@v8.0.0-alpha.116 has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉office-ui-fabric-react@v7.140.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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

inherit font-family from Fabric
4 participants