-
Notifications
You must be signed in to change notification settings - Fork 2.7k
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: Preventing blanket selectors from Fabric component from being applied via new preventBlanketFontInheritance prop #25453
Conversation
… to specific components that use them.
Asset size changes
Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B Baseline commit: 50d5f2ef0d6a06851e78f736055fcc313d61029b (build) |
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 e851b88:
|
📊 Bundle size report🤖 This report was generated against 50d5f2ef0d6a06851e78f736055fcc313d61029b |
Perf Analysis (
|
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
BaseButton | mount | 1215 | 1200 | 5000 | |
Breadcrumb | mount | 2804 | 2820 | 1000 | |
Checkbox | mount | 2653 | 2634 | 5000 | |
CheckboxBase | mount | 2384 | 2377 | 5000 | |
ChoiceGroup | mount | 4286 | 4274 | 5000 | |
ComboBox | mount | 1183 | 1181 | 1000 | |
CommandBar | mount | 9335 | 9290 | 1000 | |
ContextualMenu | mount | 10157 | 10220 | 1000 | |
DefaultButton | mount | 1365 | 1381 | 5000 | |
DetailsRow | mount | 3396 | 3368 | 5000 | |
DetailsRowFast | mount | 3388 | 3374 | 5000 | |
DetailsRowNoStyles | mount | 3255 | 3247 | 5000 | |
Dialog | mount | 2987 | 2936 | 1000 | |
DocumentCardTitle | mount | 577 | 593 | 1000 | |
Dropdown | mount | 3342 | 3164 | 5000 | |
FocusTrapZone | mount | 1955 | 1937 | 5000 | |
FocusZone | mount | 1986 | 1973 | 5000 | |
GroupedList | mount | 1824 | 2073 | 2 | |
GroupedList | virtual-rerender | 1111 | 1100 | 2 | |
GroupedList | virtual-rerender-with-unmount | 1613 | 1622 | 2 | |
GroupedListV2 | mount | 565 | 576 | 2 | |
GroupedListV2 | virtual-rerender | 549 | 549 | 2 | |
GroupedListV2 | virtual-rerender-with-unmount | 578 | 564 | 2 | |
IconButton | mount | 1788 | 1819 | 5000 | |
Label | mount | 760 | 760 | 5000 | |
Layer | mount | 4142 | 4266 | 5000 | |
Link | mount | 871 | 854 | 5000 | |
MenuButton | mount | 1621 | 1622 | 5000 | |
MessageBar | mount | 2305 | 2394 | 5000 | |
Nav | mount | 3037 | 3117 | 1000 | |
OverflowSet | mount | 1443 | 1414 | 5000 | |
Panel | mount | 2529 | 2511 | 1000 | |
Persona | mount | 1263 | 1276 | 1000 | |
Pivot | mount | 1550 | 1538 | 1000 | |
PrimaryButton | mount | 1494 | 1513 | 5000 | |
Rating | mount | 7028 | 6981 | 5000 | |
SearchBox | mount | 1492 | 1525 | 5000 | |
Shimmer | mount | 2927 | 2939 | 5000 | |
Slider | mount | 2107 | 2104 | 5000 | |
SpinButton | mount | 4263 | 4310 | 5000 | |
Spinner | mount | 826 | 847 | 5000 | |
SplitButton | mount | 2835 | 2879 | 5000 | |
Stack | mount | 883 | 883 | 5000 | |
StackWithIntrinsicChildren | mount | 2347 | 2329 | 5000 | |
StackWithTextChildren | mount | 5082 | 5029 | 5000 | |
SwatchColorPicker | mount | 9590 | 9585 | 5000 | |
TagPicker | mount | 2334 | 2364 | 5000 | |
TeachingBubble | mount | 77133 | 77561 | 5000 | |
Text | mount | 832 | 844 | 5000 | |
TextField | mount | 1561 | 1577 | 5000 | |
ThemeProvider | mount | 1444 | 1456 | 5000 | |
ThemeProvider | virtual-rerender | 1153 | 1146 | 5000 | |
ThemeProvider | virtual-rerender-with-unmount | 2021 | 2025 | 5000 | |
Toggle | mount | 1151 | 1126 | 5000 | |
buttonNative | mount | 546 | 548 | 5000 |
* master: feat(scripts): improve API violation reporting (microsoft#25356) applying package updates fix: Preventing blanket selectors from Fabric component from being applied via new preventBlanketFontInheritance prop (microsoft#25453) feat(react-infobutton): Add initial implementation (microsoft#25247) chore(react-avatar, avatar-context): migrate to new package structure (microsoft#25473) chore(react-portal, portal-compat, portal-compat-context): migrate to new package structure (microsoft#25481) docs(react-infobutton): Adding component's spec (microsoft#25251) fix(screener-build workflow): scope package to build for v9 VR tests to speed up perf (microsoft#25494) chore(vr-tests-v9): Convert Button VR tests to CSF (microsoft#25108)
…plied via new preventBlanketFontInheritance prop (microsoft#25453) * fix: Removing blanket selectors from Fabric component and adding them to specific components that use them. * Updating snapshots. * Updating snapshots. * Adding change file. * Gating behavior behind preventBlanketFontInheritance prop. * Updating change file. * Fixing incorrect condition. * Updating snapshots. Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com> Co-authored-by: KHMakoto <humberto_makoto@hotmail.com>
…plied via new preventBlanketFontInheritance prop (microsoft#25453) * fix: Removing blanket selectors from Fabric component and adding them to specific components that use them. * Updating snapshots. * Updating snapshots. * Adding change file. * Gating behavior behind preventBlanketFontInheritance prop. * Updating change file. * Fixing incorrect condition. * Updating snapshots. Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com> Co-authored-by: KHMakoto <humberto_makoto@hotmail.com>
Previous Behavior
The
Fabric
component had blanket selectors forbutton
,input
andtextarea
descendants to applyfont-family: inherit
styles to them. These are expensive selectors that are actually unneeded since all of the v8 components already havefont-family
applied to them and it's not the library's responsibility to ensure that non-Fluent components inherit these styles.New Behavior
The
Fabric
component now has a newpreventBlanketFontInheritance
prop. If the prop is set to true, then theFabric
component no longer applies the blanket selectors forbutton
,input
andtextarea
descendants mentioned above, which should improve style recalculation. Anyone who decides to turn the prop on should see no impact on our components since they already definefont-family
in their styles.Related Issue(s)
Fixes #24260