feat(label, switch): add static classes by layershifter · Pull Request #20456 · microsoft/fluentui

layershifter · 2021-11-02T15:39:15Z

Pull request checklist

Addresses an existing issue: Related to v9: Each component should have classname? #19937
Include a change request file using $ yarn change

Description of changes

✅ Extracted from #20383, these changes passed conformance test on that PR

This PR adds static classes to components @fluentui/react-avatar & @fluentui/react-badge.

All classes follow fui-ComponentName
All classes are publicly exported as componentNameClassName
Snapshots were updated

fabricteam · 2021-11-02T15:56:19Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`169.429 kB` `48.08 kB`	`169.727 kB` `48.148 kB`	`298 B` `68 B`
`react-components` react-components: FluentProvider & webLightTheme	`32.201 kB` `10.665 kB`	`32.208 kB` `10.672 kB`	`7 B` `7 B`
`react-label` Label	`8.965 kB` `3.713 kB`	`8.977 kB` `3.719 kB`	`12 B` `6 B`
`react-switch` Switch	`26.615 kB` `8.562 kB`	`26.624 kB` `8.569 kB`	`9 B` `7 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-slider` RangedSlider	`41.432 kB` `11.976 kB`
`react-slider` Slider	`34.81 kB` `10.862 kB`

_{🤖 This report was generated against 3c76e1f14834ff59381d1314e258d7bef8ed3276}

codesandbox-ci · 2021-11-02T16:07:55Z

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 3774b9b:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2021-11-02T16:19:48Z

Asset size changes

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

Baseline commit: e42f50656c1b703d88c398b114f225ba5f1f5f22 (build)

fabricteam · 2021-11-02T16:38:27Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	978	1004	5000
BaseButton	mount	916	929	5000
Breadcrumb	mount	2702	2673	1000
ButtonNext	mount	548	506	5000
Checkbox	mount	1637	1578	5000
CheckboxBase	mount	1374	1429	5000
ChoiceGroup	mount	4892	4791	5000
ComboBox	mount	1005	1026	1000
CommandBar	mount	10657	10641	1000
ContextualMenu	mount	6681	6678	1000
DefaultButton	mount	1162	1186	5000
DetailsRow	mount	3972	3923	5000
DetailsRowFast	mount	3844	4008	5000
DetailsRowNoStyles	mount	3785	3875	5000
Dialog	mount	2643	2661	1000
DocumentCardTitle	mount	166	180	1000
Dropdown	mount	3310	3399	5000
FluentProviderNext	mount	3520	3588	5000
FluentProviderWithTheme	mount	221	215	10
FluentProviderWithTheme	virtual-rerender	100	109	10
FluentProviderWithTheme	virtual-rerender-with-unmount	256	243	10
FocusTrapZone	mount	1856	1882	5000
FocusZone	mount	1872	1859	5000
IconButton	mount	1857	1763	5000
Label	mount	354	368	5000
Layer	mount	3148	3163	5000
Link	mount	514	487	5000
MakeStyles	mount	1919	1973	50000
MenuButton	mount	1514	1585	5000
MessageBar	mount	2122	2057	5000
Nav	mount	3411	3430	1000
OverflowSet	mount	1181	1130	5000
Panel	mount	2615	2556	1000
Persona	mount	899	879	1000
Pivot	mount	1576	1476	1000
PrimaryButton	mount	1304	1392	5000
Rating	mount	8128	8298	5000
SearchBox	mount	1397	1383	5000
Shimmer	mount	2679	2637	5000
Slider	mount	2068	2104	5000
SpinButton	mount	5146	5272	5000
Spinner	mount	474	460	5000
SplitButton	mount	3323	3257	5000
Stack	mount	520	552	5000
StackWithIntrinsicChildren	mount	1784	1814	5000
StackWithTextChildren	mount	4683	4828	5000
SwatchColorPicker	mount	10843	10644	5000
TagPicker	mount	2743	2751	5000
TeachingBubble	mount	13524	13504	5000
Text	mount	441	453	5000
TextField	mount	1466	1474	5000
ThemeProvider	mount	1264	1219	5000
ThemeProvider	virtual-rerender	658	625	5000
ThemeProvider	virtual-rerender-with-unmount	2001	1943	5000
Toggle	mount	841	815	5000
buttonNative	mount	150	143	5000

Perf Analysis (`@fluentui/react-northstar`)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
ChatDuplicateMessagesPerf.default	310	306	1.01:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	216	186	1.16:1
ButtonMinimalPerf.default	199	174	1.14:1
LabelMinimalPerf.default	426	395	1.08:1
PortalMinimalPerf.default	198	183	1.08:1
ChatWithPopoverPerf.default	408	386	1.06:1
SkeletonMinimalPerf.default	376	356	1.06:1
IconMinimalPerf.default	632	597	1.06:1
ButtonSlotsPerf.default	596	566	1.05:1
CarouselMinimalPerf.default	505	480	1.05:1
ImageMinimalPerf.default	397	378	1.05:1
ItemLayoutMinimalPerf.default	1256	1195	1.05:1
ListCommonPerf.default	664	632	1.05:1
SliderMinimalPerf.default	1836	1752	1.05:1
AttachmentMinimalPerf.default	174	167	1.04:1
DropdownManyItemsPerf.default	735	706	1.04:1
LayoutMinimalPerf.default	386	372	1.04:1
AvatarMinimalPerf.default	204	198	1.03:1
HeaderSlotsPerf.default	782	757	1.03:1
MenuButtonMinimalPerf.default	1708	1659	1.03:1
TooltipMinimalPerf.default	1087	1052	1.03:1
AnimationMinimalPerf.default	437	428	1.02:1
ButtonOverridesMissPerf.default	1886	1852	1.02:1
DividerMinimalPerf.default	371	363	1.02:1
InputMinimalPerf.default	1389	1368	1.02:1
ProviderMergeThemesPerf.default	1792	1754	1.02:1
CustomToolbarPrototype.default	4239	4149	1.02:1
ChatMinimalPerf.default	694	689	1.01:1
CheckboxMinimalPerf.default	2869	2854	1.01:1
EmbedMinimalPerf.default	4377	4316	1.01:1
HeaderMinimalPerf.default	367	364	1.01:1
ListMinimalPerf.default	541	536	1.01:1
ListWith60ListItems.default	671	666	1.01:1
PopupMinimalPerf.default	623	614	1.01:1
ReactionMinimalPerf.default	404	400	1.01:1
RefMinimalPerf.default	241	238	1.01:1
SplitButtonMinimalPerf.default	4382	4349	1.01:1
TableMinimalPerf.default	427	423	1.01:1
ToolbarMinimalPerf.default	969	960	1.01:1
AlertMinimalPerf.default	279	279	1:1
AttachmentSlotsPerf.default	1163	1163	1:1
BoxMinimalPerf.default	356	356	1:1
DatepickerMinimalPerf.default	5736	5738	1:1
DialogMinimalPerf.default	790	789	1:1
DropdownMinimalPerf.default	3275	3261	1:1
FormMinimalPerf.default	418	416	1:1
RadioGroupMinimalPerf.default	473	474	1:1
StatusMinimalPerf.default	689	689	1:1
TableManyItemsPerf.default	1991	1987	1:1
TreeMinimalPerf.default	829	831	1:1
FlexMinimalPerf.default	311	313	0.99:1
RosterPerf.default	1240	1258	0.99:1
ProviderMinimalPerf.default	1164	1180	0.99:1
ListNestedPerf.default	574	586	0.98:1
MenuMinimalPerf.default	870	894	0.97:1
VideoMinimalPerf.default	620	636	0.97:1
SegmentMinimalPerf.default	375	389	0.96:1
AccordionMinimalPerf.default	157	166	0.95:1
LoaderMinimalPerf.default	701	735	0.95:1
TextMinimalPerf.default	360	379	0.95:1
GridMinimalPerf.default	347	369	0.94:1
TextAreaMinimalPerf.default	524	556	0.94:1
CardMinimalPerf.default	558	598	0.93:1

khmakoto · 2021-11-02T19:45:54Z

+const trackClassName = `${switchClassName}-track`;
+const thumbClassName = `${switchClassName}-thumb`;


Should we export these too?

May be, but not in this PR. If we would like to do this, we should have some naming convention/consistency around it, see #19937 (comment).

Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com>

…eat/classname-p8 � Conflicts: � packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap

…ntui into feat/classname-p8

* feat(label, switch): add static classes * fix snapshots * Change files * Update packages/react-switch/Spec.md Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com> * fix snapshots Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com>

feat(label, switch): add static classes

c0a46e8

layershifter added the Fluent UI react-components (v9) label Nov 2, 2021

msft-fluent-ui-bot assigned khmakoto Nov 2, 2021

layershifter added 2 commits November 2, 2021 16:44

fix snapshots

ab6f857

Change files

3bdff21

layershifter marked this pull request as ready for review November 2, 2021 18:37

layershifter requested review from a team, behowell, czearing, ecraig12345 and khmakoto as code owners November 2, 2021 18:37

khmakoto approved these changes Nov 2, 2021

View reviewed changes

Comment thread packages/react-switch/Spec.md Outdated

khmakoto reviewed Nov 2, 2021

View reviewed changes

Update packages/react-switch/Spec.md

392cc79

Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com>

layershifter enabled auto-merge (squash) November 3, 2021 11:11

layershifter disabled auto-merge November 3, 2021 11:14

layershifter added 3 commits November 3, 2021 12:15

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

db66877

…eat/classname-p8 � Conflicts: � packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap

fix snapshots

2c00be8

Merge branch 'feat/classname-p8' of https://github.com/microsoft/flue…

3774b9b

…ntui into feat/classname-p8

layershifter enabled auto-merge (squash) November 3, 2021 11:18

layershifter disabled auto-merge November 3, 2021 11:22

layershifter enabled auto-merge (squash) November 3, 2021 11:41

layershifter merged commit 9186578 into master Nov 3, 2021

layershifter deleted the feat/classname-p8 branch November 8, 2021 10:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(label, switch): add static classes - #20456

feat(label, switch): add static classes#20456
layershifter merged 7 commits into
masterfrom
feat/classname-p8

layershifter commented Nov 2, 2021

Uh oh!

fabricteam commented Nov 2, 2021 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Nov 2, 2021 •

edited

Loading

Uh oh!

size-auditor Bot commented Nov 2, 2021 •

edited

Loading

Uh oh!

fabricteam commented Nov 2, 2021 •

edited

Loading

Uh oh!

Uh oh!

khmakoto Nov 2, 2021

Uh oh!

layershifter Nov 3, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const trackClassName = `${switchClassName}-track`;
		const thumbClassName = `${switchClassName}-thumb`;

Uh oh!

Conversation

layershifter commented Nov 2, 2021

Pull request checklist

Description of changes

Uh oh!

fabricteam commented Nov 2, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

codesandbox-ci Bot commented Nov 2, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor Bot commented Nov 2, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Nov 2, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

Uh oh!

Uh oh!

khmakoto Nov 2, 2021

Choose a reason for hiding this comment

Uh oh!

layershifter Nov 3, 2021

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fabricteam commented Nov 2, 2021 •

edited

Loading

codesandbox-ci Bot commented Nov 2, 2021 •

edited

Loading

size-auditor Bot commented Nov 2, 2021 •

edited

Loading

fabricteam commented Nov 2, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)