feat(button, checkbox, divider, link): add static classes by layershifter · Pull Request #20454 · microsoft/fluentui

layershifter · 2021-11-02T15:24:05Z

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-button, @fluentui/react-checkbox, @fluentui/react-divider & @fluentui/react-link.

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

fabricteam · 2021-11-02T15:35:59Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-button` Button	`25.595 kB` `7.765 kB`	`25.608 kB` `7.771 kB`	`13 B` `6 B`
`react-button` CompoundButton	`30.852 kB` `8.715 kB`	`30.96 kB` `8.74 kB`	`108 B` `25 B`
`react-button` MenuButton	`27.62 kB` `8.44 kB`	`27.688 kB` `8.453 kB`	`68 B` `13 B`
`react-button` SplitButton	`33.731 kB` `9.623 kB`	`33.975 kB` `9.65 kB`	`244 B` `27 B`
`react-button` ToggleButton	`34.821 kB` `8.416 kB`	`34.853 kB` `8.425 kB`	`32 B` `9 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`169.429 kB` `48.08 kB`	`169.442 kB` `48.088 kB`	`13 B` `8 B`
`react-divider` Divider	`15.61 kB` `5.646 kB`	`15.624 kB` `5.652 kB`	`14 B` `6 B`
`react-link` Link	`11.659 kB` `4.704 kB`	`11.67 kB` `4.709 kB`	`11 B` `5 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-card` Card - All	`49.008 kB` `14.564 kB`
`react-card` Card	`44.495 kB` `13.343 kB`
`react-card` CardFooter	`8.141 kB` `3.43 kB`
`react-card` CardHeader	`9.461 kB` `3.883 kB`
`react-card` CardPreview	`8.434 kB` `3.604 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.201 kB` `10.665 kB`

_{🤖 This report was generated against 08bd47e97c2a14080793f78ccb57ebfb798c32eb}

size-auditor · 2021-11-02T15:37:48Z

Asset size changes

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

Baseline commit: 08bd47e97c2a14080793f78ccb57ebfb798c32eb (build)

codesandbox-ci · 2021-11-02T15:43:05Z

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

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

fabricteam · 2021-11-02T16:30:55Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	992	991	5000
BaseButton	mount	964	970	5000
Breadcrumb	mount	2588	2657	1000
ButtonNext	mount	516	533	5000
Checkbox	mount	1649	1625	5000
CheckboxBase	mount	1380	1420	5000
ChoiceGroup	mount	4992	5024	5000
ComboBox	mount	996	1051	1000
CommandBar	mount	10089	10192	1000
ContextualMenu	mount	6410	6396	1000
DefaultButton	mount	1174	1225	5000
DetailsRow	mount	4047	3806	5000
DetailsRowFast	mount	4148	4177	5000
DetailsRowNoStyles	mount	3977	3741	5000
Dialog	mount	2587	2753	1000
DocumentCardTitle	mount	174	195	1000
Dropdown	mount	3312	3680	5000
FluentProviderNext	mount	3830	3214	5000
FluentProviderWithTheme	mount	217	247	10
FluentProviderWithTheme	virtual-rerender	124	121	10
FluentProviderWithTheme	virtual-rerender-with-unmount	268	275	10
FocusTrapZone	mount	2002	1955	5000
FocusZone	mount	1961	1968	5000
IconButton	mount	2021	2005	5000
Label	mount	391	383	5000
Layer	mount	3078	3148	5000
Link	mount	515	493	5000
MakeStyles	mount	1788	1757	50000
MenuButton	mount	1658	1621	5000
MessageBar	mount	2140	2098	5000
Nav	mount	3510	3509	1000
OverflowSet	mount	1199	1138	5000
Panel	mount	2533	2560	1000
Persona	mount	927	870	1000
Pivot	mount	1605	1612	1000
PrimaryButton	mount	1434	1460	5000
Rating	mount	8695	8851	5000
SearchBox	mount	1541	1535	5000
Shimmer	mount	2853	2936	5000
Slider	mount	2036	2096	5000
SpinButton	mount	5237	5177	5000
Spinner	mount	430	450	5000
SplitButton	mount	3323	3249	5000
Stack	mount	533	535	5000
StackWithIntrinsicChildren	mount	1819	1855	5000
StackWithTextChildren	mount	5382	5040	5000
SwatchColorPicker	mount	11501	11603	5000
TagPicker	mount	2947	2967	5000
TeachingBubble	mount	14322	14009	5000
Text	mount	483	466	5000
TextField	mount	1491	1503	5000
ThemeProvider	mount	1256	1249	5000
ThemeProvider	virtual-rerender	647	626	5000
ThemeProvider	virtual-rerender-with-unmount	2112	2070	5000
Toggle	mount	908	916	5000
buttonNative	mount	138	139	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
CardMinimalPerf.default	697	627	1.11:1
AttachmentMinimalPerf.default	202	183	1.1:1
HeaderMinimalPerf.default	442	411	1.08:1
ListNestedPerf.default	641	591	1.08:1
SegmentMinimalPerf.default	423	392	1.08:1
ListCommonPerf.default	758	708	1.07:1
PortalMinimalPerf.default	212	198	1.07:1
AvatarMinimalPerf.default	230	218	1.06:1
ButtonMinimalPerf.default	215	202	1.06:1
DividerMinimalPerf.default	437	412	1.06:1
SkeletonMinimalPerf.default	421	396	1.06:1
TreeWith60ListItems.default	242	229	1.06:1
DropdownManyItemsPerf.default	810	774	1.05:1
FlexMinimalPerf.default	339	324	1.05:1
ListMinimalPerf.default	587	561	1.05:1
AnimationMinimalPerf.default	483	464	1.04:1
CarouselMinimalPerf.default	544	522	1.04:1
TableMinimalPerf.default	482	465	1.04:1
ToolbarMinimalPerf.default	1084	1044	1.04:1
AccordionMinimalPerf.default	188	182	1.03:1
BoxMinimalPerf.default	407	397	1.03:1
CheckboxMinimalPerf.default	3007	2927	1.03:1
DialogMinimalPerf.default	858	836	1.03:1
LayoutMinimalPerf.default	421	410	1.03:1
MenuMinimalPerf.default	956	929	1.03:1
PopupMinimalPerf.default	658	641	1.03:1
RadioGroupMinimalPerf.default	527	511	1.03:1
ReactionMinimalPerf.default	446	435	1.03:1
SliderMinimalPerf.default	1921	1861	1.03:1
TextAreaMinimalPerf.default	599	582	1.03:1
TooltipMinimalPerf.default	1214	1179	1.03:1
ChatMinimalPerf.default	760	748	1.02:1
DropdownMinimalPerf.default	3688	3629	1.02:1
ImageMinimalPerf.default	452	445	1.02:1
InputMinimalPerf.default	1470	1441	1.02:1
LoaderMinimalPerf.default	769	756	1.02:1
MenuButtonMinimalPerf.default	1868	1824	1.02:1
RefMinimalPerf.default	264	260	1.02:1
VideoMinimalPerf.default	725	712	1.02:1
ChatDuplicateMessagesPerf.default	342	337	1.01:1
HeaderSlotsPerf.default	869	860	1.01:1
SplitButtonMinimalPerf.default	4770	4744	1.01:1
ButtonSlotsPerf.default	653	655	1:1
EmbedMinimalPerf.default	4720	4717	1:1
ItemLayoutMinimalPerf.default	1386	1380	1:1
ListWith60ListItems.default	720	717	1:1
ProviderMergeThemesPerf.default	1857	1860	1:1
TableManyItemsPerf.default	2188	2187	1:1
AlertMinimalPerf.default	326	329	0.99:1
AttachmentSlotsPerf.default	1223	1238	0.99:1
ButtonOverridesMissPerf.default	1998	2013	0.99:1
GridMinimalPerf.default	385	387	0.99:1
StatusMinimalPerf.default	759	768	0.99:1
CustomToolbarPrototype.default	4580	4618	0.99:1
DatepickerMinimalPerf.default	6892	7019	0.98:1
LabelMinimalPerf.default	431	443	0.97:1
RosterPerf.default	1337	1378	0.97:1
ProviderMinimalPerf.default	1259	1292	0.97:1
TreeMinimalPerf.default	888	912	0.97:1
TextMinimalPerf.default	400	417	0.96:1
ChatWithPopoverPerf.default	444	466	0.95:1
IconMinimalPerf.default	669	715	0.94:1
FormMinimalPerf.default	495	537	0.92:1

…20454) * feat(button, checkbox, divider, link): add static classes * Change files * fix snapshots

layershifter added 2 commits November 2, 2021 16:16

feat(button, checkbox, divider, link): add static classes

6743571

Change files

e584d44

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

layershifter requested review from a team, GeoffCoxMSFT, dzearing and khmakoto as code owners November 2, 2021 15:24

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

fix snapshots

34a6634

khmakoto approved these changes Nov 2, 2021

View reviewed changes

layershifter merged commit 7eb7d2d into master Nov 3, 2021

layershifter deleted the feat/classname-p6 branch November 3, 2021 11:14

mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022

feat(button, checkbox, divider, link): add static classes (microsoft#…

6f03f42

…20454) * feat(button, checkbox, divider, link): add static classes * Change files * fix snapshots

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(button, checkbox, divider, link): add static classes - #20454

feat(button, checkbox, divider, link): add static classes#20454
layershifter merged 3 commits into
masterfrom
feat/classname-p6

layershifter commented Nov 2, 2021

Uh oh!

fabricteam commented Nov 2, 2021 •

edited

Loading

Uh oh!

size-auditor Bot commented Nov 2, 2021 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Nov 2, 2021

Uh oh!

fabricteam commented Nov 2, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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!

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!

codesandbox-ci Bot commented Nov 2, 2021

Uh oh!

fabricteam commented Nov 2, 2021

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fabricteam commented Nov 2, 2021 •

edited

Loading

size-auditor Bot commented Nov 2, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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