CSSBaseline component

[bsunderhus]

Pull request checklist

• Include a change request file using $ yarn change

Description of changes

1. Adds base implementation for CSSBaseline component, that provides Normalize.css styles globally, using makeStaticStyles. As follow in the RFC rfc: Global styles (normalize) #17561

[bsunderhus]

Problems to be resolved still:

• Find a way to add mozilla specific selectors

Worth noting that both problems are more of a makeStaticStyles problem than CSSBaseline problem itself

[codesandbox-ci]

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 b7a0757:

Sandbox	Source
Fluent UI Button	Configuration
codesandbox-react-template	Configuration
codesandbox-react-northstar-template	Configuration

[fabricteam]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	891	891	5000
BaseButton	mount	886	891	5000
Breadcrumb	mount	43686	43951	5000
ButtonNext	mount	584	587	5000
Checkbox	mount	1504	1537	5000
CheckboxBase	mount	1268	1339	5000
ChoiceGroup	mount	4644	4645	5000
ComboBox	mount	989	971	1000
CommandBar	mount	10108	10113	1000
ContextualMenu	mount	6226	6255	1000
DefaultButton	mount	1087	1122	5000
DetailsRow	mount	3651	3586	5000
DetailsRowFast	mount	3592	3646	5000
DetailsRowNoStyles	mount	3493	3461	5000
Dialog	mount	1487	1426	1000
DocumentCardTitle	mount	1845	1799	1000
Dropdown	mount	3214	3284	5000
FocusTrapZone	mount	1773	1795	5000
FocusZone	mount	1812	1801	5000
IconButton	mount	1676	1718	5000
Label	mount	338	344	5000
Layer	mount	1764	1782	5000
Link	mount	461	452	5000
MakeStyles	mount	1779	1784	50000
MenuButton	mount	1432	1418	5000
MessageBar	mount	1995	2031	5000
Nav	mount	3258	3314	1000
OverflowSet	mount	1043	1048	5000
Panel	mount	1436	1403	1000
Persona	mount	832	816	1000
Pivot	mount	1395	1404	1000
PrimaryButton	mount	1268	1287	5000
Rating	mount	7459	7424	5000
SearchBox	mount	1279	1282	5000
Shimmer	mount	2496	2498	5000
Slider	mount	1982	1964	5000
SpinButton	mount	4921	4918	5000
Spinner	mount	414	416	5000
SplitButton	mount	3111	3125	5000
Stack	mount	496	506	5000
StackWithIntrinsicChildren	mount	1525	1572	5000
StackWithTextChildren	mount	4462	4455	5000
SwatchColorPicker	mount	9925	10055	5000
Tabs	mount	1414	1438	1000
TagPicker	mount	2349	2418	5000
TeachingBubble	mount	11584	11760	5000
Text	mount	418	409	5000
TextField	mount	1378	1326	5000
ThemeProvider	mount	1160	1159	5000
ThemeProvider	virtual-rerender	599	600	5000
ThemeProviderNext	mount	15747	15893	5000
Toggle	mount	773	771	5000
buttonNative	mount	111	112	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🦄	Avatar.Fluent	0.17	0.48	0.35:1	2000	346
🦄	Button.Fluent	0.11	0.2	0.55:1	5000	560
🔧	Checkbox.Fluent	0.62	0.37	1.68:1	1000	622
🎯	Dialog.Fluent	0.15	0.21	0.71:1	5000	741
🔧	Dropdown.Fluent	3.09	0.41	7.54:1	1000	3091
🔧	Icon.Fluent	0.13	0.05	2.6:1	5000	625
🦄	Image.Fluent	0.08	0.13	0.62:1	5000	379
🔧	Slider.Fluent	1.57	0.46	3.41:1	1000	1574
🔧	Text.Fluent	0.07	0.03	2.33:1	5000	361
🦄	Tooltip.Fluent	0.14	0.89	0.16:1	5000	698

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	199	182	1.09:1
AlertMinimalPerf.default	287	268	1.07:1
ButtonMinimalPerf.default	186	176	1.06:1
ChatWithPopoverPerf.default	394	370	1.06:1
BoxMinimalPerf.default	377	360	1.05:1
FlexMinimalPerf.default	313	297	1.05:1
PortalMinimalPerf.default	177	169	1.05:1
AnimationMinimalPerf.default	432	415	1.04:1
DividerMinimalPerf.default	382	368	1.04:1
GridMinimalPerf.default	370	356	1.04:1
LabelMinimalPerf.default	406	392	1.04:1
LayoutMinimalPerf.default	385	369	1.04:1
ListNestedPerf.default	570	550	1.04:1
StatusMinimalPerf.default	684	656	1.04:1
AttachmentMinimalPerf.default	170	165	1.03:1
ChatMinimalPerf.default	632	611	1.03:1
HeaderMinimalPerf.default	377	365	1.03:1
ProviderMinimalPerf.default	991	963	1.03:1
ReactionMinimalPerf.default	388	377	1.03:1
SegmentMinimalPerf.default	365	353	1.03:1
TextMinimalPerf.default	361	352	1.03:1
Avatar.Fluent	346	337	1.03:1
Button.Fluent	560	543	1.03:1
ButtonSlotsPerf.default	564	554	1.02:1
ListCommonPerf.default	648	637	1.02:1
PopupMinimalPerf.default	721	710	1.02:1
RadioGroupMinimalPerf.default	448	438	1.02:1
SkeletonMinimalPerf.default	367	361	1.02:1
TextAreaMinimalPerf.default	507	495	1.02:1
AttachmentSlotsPerf.default	1154	1146	1.01:1
AvatarMinimalPerf.default	204	201	1.01:1
ButtonUseCssNestingPerf.default	1067	1056	1.01:1
CardMinimalPerf.default	554	546	1.01:1
ChatDuplicateMessagesPerf.default	294	290	1.01:1
DropdownManyItemsPerf.default	700	692	1.01:1
ItemLayoutMinimalPerf.default	1264	1256	1.01:1
LoaderMinimalPerf.default	709	705	1.01:1
MenuMinimalPerf.default	880	873	1.01:1
MenuButtonMinimalPerf.default	1558	1547	1.01:1
ProviderMergeThemesPerf.default	1682	1672	1.01:1
RefMinimalPerf.default	250	248	1.01:1
SplitButtonMinimalPerf.default	3673	3647	1.01:1
ToolbarMinimalPerf.default	950	944	1.01:1
Checkbox.Fluent	622	614	1.01:1
Dialog.Fluent	741	736	1.01:1
ButtonOverridesMissPerf.default	1676	1681	1:1
CheckboxMinimalPerf.default	2725	2732	1:1
DatepickerMinimalPerf.default	46194	46023	1:1
EmbedMinimalPerf.default	4149	4145	1:1
ImageMinimalPerf.default	384	384	1:1
ListMinimalPerf.default	500	501	1:1
SliderMinimalPerf.default	1575	1582	1:1
IconMinimalPerf.default	612	614	1:1
TableMinimalPerf.default	413	412	1:1
TooltipMinimalPerf.default	970	967	1:1
Icon.Fluent	625	628	1:1
Slider.Fluent	1574	1581	1:1
Text.Fluent	361	360	1:1
Tooltip.Fluent	698	697	1:1
ButtonUseCssPerf.default	792	802	0.99:1
CarouselMinimalPerf.default	462	469	0.99:1
DialogMinimalPerf.default	727	733	0.99:1
DropdownMinimalPerf.default	3071	3096	0.99:1
HeaderSlotsPerf.default	769	773	0.99:1
InputMinimalPerf.default	1255	1265	0.99:1
RosterPerf.default	1147	1162	0.99:1
CustomToolbarPrototype.default	3798	3842	0.99:1
TreeMinimalPerf.default	778	786	0.99:1
Dropdown.Fluent	3091	3108	0.99:1
FormMinimalPerf.default	412	421	0.98:1
TableManyItemsPerf.default	1888	1918	0.98:1
Image.Fluent	379	385	0.98:1
AccordionMinimalPerf.default	162	169	0.96:1
VideoMinimalPerf.default	603	637	0.95:1
ListWith60ListItems.default	624	663	0.94:1

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 2c62dc79ac0dd465b9d4c9e5084e95ba8e8e1bde (build)

[msft-fluent-ui-bot]

Because this pull request has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

The pull request will still be available for reference. If it's still relevant to merge at some point, you can reopen or make a new version based on the latest code.