Add conformance tests for static classnames by spmonahan · Pull Request #21960 · microsoft/fluentui

spmonahan · 2022-03-04T17:44:45Z

Current Behavior

No conformance tests exists for the new static class names object described in #21206.
This PR adds conformance tests and updates all existing components to pass these new tests.

New Behavior

This commit adds conformance tests for static class names. The tests:

Ensure that the static classnames object is exported
Ensure that the static classnames object is formatted correctly
Ensure that the static classnames are rendered in the component

The rules for static classnames are defined in RFC: Conventions for
static class names on slots (#21206).

I know this is quite a large PR and I'm sorry for dropping it but I feel that the changes are largely the same across all the files with the main changes being the addition of new conformance tests.

Related Issue(s)

#21847
#21206

codesandbox-ci · 2022-03-04T17:50:02Z

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

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

fabricteam · 2022-03-04T17:52:22Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`74.658 kB` `22.47 kB`	`74.792 kB` `22.516 kB`	`134 B` `46 B`
`react-avatar` Avatar	`44.982 kB` `13.059 kB`	`45.18 kB` `13.128 kB`	`198 B` `69 B`
`react-badge` Badge	`20.869 kB` `6.549 kB`	`20.895 kB` `6.567 kB`	`26 B` `18 B`
`react-badge` CounterBadge	`21.737 kB` `6.843 kB`	`21.848 kB` `6.883 kB`	`111 B` `40 B`
`react-badge` PresenceBadge	`21.866 kB` `6.536 kB`	`21.951 kB` `6.565 kB`	`85 B` `29 B`
`react-button` MenuButton	`29.763 kB` `8.656 kB`	`29.796 kB` `8.665 kB`	`33 B` `9 B`
`react-button` SplitButton	`36.235 kB` `9.857 kB`	`36.268 kB` `9.863 kB`	`33 B` `6 B`
`react-card` Card - All	`53.205 kB` `15.27 kB`	`53.619 kB` `15.372 kB`	`414 B` `102 B`
`react-card` Card	`48.898 kB` `14.083 kB`	`48.904 kB` `14.089 kB`	`6 B` `6 B`
`react-card` CardFooter	`7.653 kB` `3.246 kB`	`7.686 kB` `3.264 kB`	`33 B` `18 B`
`react-card` CardHeader	`8.931 kB` `3.689 kB`	`9.251 kB` `3.78 kB`	`320 B` `91 B`
`react-card` CardPreview	`7.626 kB` `3.272 kB`	`7.658 kB` `3.291 kB`	`32 B` `19 B`
`react-combobox` Combobox	`6.813 kB` `2.895 kB`	`6.817 kB` `2.901 kB`	`4 B` `6 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`175.69 kB` `48.974 kB`	`176.084 kB` `49.112 kB`	`394 B` `138 B`
`react-divider` Divider	`15.301 kB` `5.532 kB`	`15.385 kB` `5.539 kB`	`84 B` `7 B`
`react-image` Image	`10.105 kB` `3.952 kB`	`10.109 kB` `3.958 kB`	`4 B` `6 B`
`react-input` Input	`21.538 kB` `7.134 kB`	`21.635 kB` `7.166 kB`	`97 B` `32 B`
`react-label` Label	`8.341 kB` `3.487 kB`	`8.371 kB` `3.504 kB`	`30 B` `17 B`
`react-link` Link	`11.102 kB` `4.504 kB`	`11.106 kB` `4.507 kB`	`4 B` `3 B`
`react-menu` Menu (including children components)	`105.599 kB` `32.356 kB`	`105.847 kB` `32.431 kB`	`248 B` `75 B`
`react-menu` Menu (including selectable components)	`107.954 kB` `32.722 kB`	`109.026 kB` `32.895 kB`	`1.072 kB` `173 B`
`react-popover` Popover	`96.776 kB` `29.553 kB`	`96.782 kB` `29.558 kB`	`6 B` `5 B`
`react-select` Select	`7.754 kB` `3.258 kB`	`7.853 kB` `3.297 kB`	`99 B` `39 B`
`react-spinner` Spinner	`6.811 kB` `2.895 kB`	`6.815 kB` `2.9 kB`	`4 B` `5 B`
`react-switch` Switch	`24.245 kB` `7.986 kB`	`24.279 kB` `8.001 kB`	`34 B` `15 B`
`react-text` Text - Default	`10.793 kB` `4.23 kB`	`10.797 kB` `4.233 kB`	`4 B` `3 B`
`react-text` Text - Wrappers	`14.107 kB` `4.573 kB`	`14.113 kB` `4.576 kB`	`6 B` `3 B`
`react-tooltip` Tooltip	`42.76 kB` `14.701 kB`	`42.789 kB` `14.712 kB`	`29 B` `11 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`priority-overflow` createOverflowManager	`2.836 kB` `1.209 kB`
`react-button` Button	`28.013 kB` `8.059 kB`
`react-button` CompoundButton	`33.508 kB` `9.092 kB`
`react-button` ToggleButton	`37.395 kB` `8.68 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.526 kB` `10.645 kB`
`react-portal` Portal	`6.267 kB` `2.168 kB`
`react-positioning` usePopper	`23.21 kB` `8.084 kB`
`react-priority-overflow` hooks only	`10.606 kB` `4.087 kB`
`react-provider` FluentProvider	`14.009 kB` `5.25 kB`
`react-slider` Slider	`25.402 kB` `8.251 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.426 kB` `6.551 kB`
`react-theme` Teams: Light theme	`18.42 kB` `5.27 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 80746a7f3462c2fa4ff15a92d6e196c67d652f6a}

size-auditor · 2022-03-04T17:56:22Z

Asset size changes

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

Baseline commit: 80746a7f3462c2fa4ff15a92d6e196c67d652f6a (build)

fabricteam · 2022-03-04T18:04:10Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
SegmentMinimalPerf.default	344	325	1.06:1
AvatarMinimalPerf.default	201	192	1.05:1
ButtonMinimalPerf.default	175	166	1.05:1
ListWith60ListItems.default	634	605	1.05:1
TreeWith60ListItems.default	174	165	1.05:1
HeaderMinimalPerf.default	365	350	1.04:1
IconMinimalPerf.default	603	579	1.04:1
TreeMinimalPerf.default	780	750	1.04:1
ButtonOverridesMissPerf.default	1636	1589	1.03:1
ChatMinimalPerf.default	726	708	1.03:1
FlexMinimalPerf.default	287	279	1.03:1
LoaderMinimalPerf.default	671	651	1.03:1
RadioGroupMinimalPerf.default	430	418	1.03:1
TableManyItemsPerf.default	1849	1796	1.03:1
TextMinimalPerf.default	339	329	1.03:1
ButtonSlotsPerf.default	528	520	1.02:1
ChatWithPopoverPerf.default	370	364	1.02:1
CheckboxMinimalPerf.default	2572	2525	1.02:1
DropdownManyItemsPerf.default	646	635	1.02:1
DropdownMinimalPerf.default	2921	2863	1.02:1
HeaderSlotsPerf.default	728	716	1.02:1
PopupMinimalPerf.default	600	591	1.02:1
StatusMinimalPerf.default	638	623	1.02:1
AttachmentMinimalPerf.default	150	148	1.01:1
CardMinimalPerf.default	524	519	1.01:1
DatepickerMinimalPerf.default	5299	5254	1.01:1
ImageMinimalPerf.default	345	343	1.01:1
ItemLayoutMinimalPerf.default	1137	1129	1.01:1
MenuMinimalPerf.default	817	809	1.01:1
MenuButtonMinimalPerf.default	1610	1596	1.01:1
RosterPerf.default	1091	1077	1.01:1
SplitButtonMinimalPerf.default	4123	4072	1.01:1
TooltipMinimalPerf.default	977	964	1.01:1
AlertMinimalPerf.default	264	265	1:1
AnimationMinimalPerf.default	525	524	1:1
CarouselMinimalPerf.default	457	455	1:1
ChatDuplicateMessagesPerf.default	293	294	1:1
DialogMinimalPerf.default	730	727	1:1
FormMinimalPerf.default	386	385	1:1
InputMinimalPerf.default	1228	1227	1:1
LabelMinimalPerf.default	362	362	1:1
ListMinimalPerf.default	494	493	1:1
ListNestedPerf.default	525	524	1:1
ProviderMergeThemesPerf.default	1634	1641	1:1
ProviderMinimalPerf.default	1058	1059	1:1
ReactionMinimalPerf.default	365	365	1:1
TableMinimalPerf.default	384	383	1:1
AccordionMinimalPerf.default	141	142	0.99:1
EmbedMinimalPerf.default	3943	3987	0.99:1
ListCommonPerf.default	611	615	0.99:1
SliderMinimalPerf.default	1584	1596	0.99:1
CustomToolbarPrototype.default	3872	3893	0.99:1
ToolbarMinimalPerf.default	891	903	0.99:1
VideoMinimalPerf.default	618	622	0.99:1
BoxMinimalPerf.default	327	334	0.98:1
GridMinimalPerf.default	315	322	0.98:1
PortalMinimalPerf.default	163	167	0.98:1
SkeletonMinimalPerf.default	322	328	0.98:1
TextAreaMinimalPerf.default	463	473	0.98:1
DividerMinimalPerf.default	331	340	0.97:1
RefMinimalPerf.default	225	232	0.97:1
AttachmentSlotsPerf.default	1000	1044	0.96:1
LayoutMinimalPerf.default	348	362	0.96:1

fabricteam · 2022-03-04T18:09:23Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	925	932	5000
Breadcrumb	mount	2683	2731	1000
Checkbox	mount	1526	1508	5000
CheckboxBase	mount	1286	1315	5000
ChoiceGroup	mount	4786	4737	5000
ComboBox	mount	983	985	1000
CommandBar	mount	10883	10419	1000
ContextualMenu	mount	12891	11926	1000
DefaultButton	mount	1228	1188	5000
DetailsRow	mount	3809	3862	5000
DetailsRowFast	mount	3852	3902	5000
DetailsRowNoStyles	mount	3645	3663	5000
Dialog	mount	2238	2244	1000
DocumentCardTitle	mount	174	179	1000
Dropdown	mount	3344	3413	5000
FocusTrapZone	mount	1821	1830	5000
FocusZone	mount	1844	1848	5000
IconButton	mount	1796	1785	5000
Label	mount	362	360	5000
Layer	mount	3017	3028	5000
Link	mount	466	474	5000
MenuButton	mount	1517	1507	5000
MessageBar	mount	2117	2153	5000
Nav	mount	3344	3418	1000
OverflowSet	mount	1112	1143	5000
Panel	mount	2167	2194	1000
Persona	mount	869	862	1000
Pivot	mount	1482	1466	1000
PrimaryButton	mount	1333	1340	5000
Rating	mount	7715	7747	5000
SearchBox	mount	1328	1330	5000
Shimmer	mount	2543	2539	5000
Slider	mount	1935	1995	5000
SpinButton	mount	5108	5417	5000
Spinner	mount	454	450	5000
SplitButton	mount	3255	3268	5000
Stack	mount	526	523	5000
StackWithIntrinsicChildren	mount	2331	2281	5000
StackWithTextChildren	mount	5309	5331	5000
SwatchColorPicker	mount	11731	11773	5000
TagPicker	mount	2685	2722	5000
TeachingBubble	mount	95987	96535	5000
Text	mount	429	429	5000
TextField	mount	1388	1427	5000
ThemeProvider	mount	1190	1200	5000
ThemeProvider	virtual-rerender	679	670	5000
ThemeProvider	virtual-rerender-with-unmount	1901	1891	5000
Toggle	mount	823	808	5000
buttonNative	mount	130	126	5000

micahgodbolt

with suggestions

spmonahan · 2022-03-08T01:23:29Z

+      const { testOptions = {} } = testInfo;
+      const staticClassNameVariants = testOptions['has-static-classnames'] ?? [{ props: {} }];
+
+      for (const staticClassNames of staticClassNameVariants) {


This test is a bit awkward as we need to support the idea of "variant" ways to render a component for components like Avatar that have mutually exclusive slots. In Avatar when an icon is rendered in the icon slot the initials slot is not rendered and neither is the initials class name.

spmonahan · 2022-03-08T01:27:19Z

+      }
+    });
+
+    it('has static classnames in correct format (component-has-static-classnames-object)', () => {


This test can be dropped once we support a minimum of TS4.1 as we can re-write the SlotClassNames<T> type to enforce this with TS:

export type SlotClassNames<Component, Slots> = { [SlotName in keyof Slots]-?: SlotName extends 'root' ? `fui-${string & Component}` : `fui-${string & Component}__${string & SlotName}`; };

@ling1726 This test validates that the slot name is in the class name. This can also be accomplished with TS which is preferrable imo but I believe it requires a newer version of TS that exceeds our minimum supported version.

micahgodbolt · 2022-03-08T01:38:31Z

  isConformant({
    Component: Avatar,
    displayName: 'Avatar',
+    testOptions: {


this feels pretty verbose. is there a way to make this test more simple?

I can think about it some more and I'm open to suggestions. The issue is that Avatar conditionally renders slots based on other slots -- initials is not rendered if there is an icon.

Could we render all the avatars with these props? (pass as requiredProps)

This test is no longer applicable to react-toolbar as the `toolbarClassName` export has been removed. This component has not be exported as part of the public API so it is safe to entirely remove.

- Marks <ComponentName>ClassName string exports deprecated. - Adds <ComponentnName>ClassNames object exports. - Updates API file.

…thstar Disables the static classname object conformance tests in @fluentui/react (v8) and @fluentui/react-northstar (v0).

ecraig12345 · 2022-03-16T02:13:36Z

/azp run

Thank you random NavigationTimeout error...

azure-pipelines · 2022-03-16T02:13:58Z

Azure Pipelines successfully started running 3 pipeline(s).

Hotell · 2022-03-16T10:52:31Z

@spmonahan what's your follow-up/action regarding getting rid of lots of deprecation lint rules being turned off ?

I got bit by it when I was migrating our packages today to stop using export star #22099

spmonahan · 2022-03-16T20:09:36Z

@spmonahan what's your follow-up/action regarding getting rid of lots of deprecation lint rules being turned off ?

#22132 is my proposal to get rid of the deprecations. Of course removing these is a breaking change which I propose we collect in #22130 as part of moving from RC to Stable.

I got bit by it when I was migrating our packages today to stop using export star #22099

The part that bit you was having to disable eslint rules for the deprecations?

msft-fluent-ui-bot assigned micahgodbolt Mar 4, 2022

micahgodbolt reviewed Mar 4, 2022

View reviewed changes

Comment thread packages/react-conformance/src/defaultTests.tsx Outdated

micahgodbolt approved these changes Mar 4, 2022

View reviewed changes

khmakoto approved these changes Mar 4, 2022

View reviewed changes

spmonahan force-pushed the feat/static-classnames-helper-type branch 2 times, most recently from be4c59e to 33f7bc0 Compare March 8, 2022 00:36

spmonahan marked this pull request as ready for review March 8, 2022 01:17

spmonahan requested review from a team, GeoffCoxMSFT, behowell, ecraig12345, smhigley and tomi-msft as code owners March 8, 2022 01:17

spmonahan commented Mar 8, 2022

View reviewed changes

Comment thread packages/react-card/src/components/CardHeader/useCardHeader.ts

spmonahan commented Mar 8, 2022

View reviewed changes

Comment thread packages/react-conformance/src/defaultTests.tsx

spmonahan commented Mar 8, 2022

View reviewed changes

micahgodbolt reviewed Mar 8, 2022

View reviewed changes

Comment thread packages/react-avatar/src/components/Avatar/Avatar.test.tsx

theerebuss requested a review from varholak-peter March 8, 2022 13:11

varholak-peter approved these changes Mar 8, 2022

View reviewed changes

spmonahan and others added 13 commits March 15, 2022 15:57

Update API for react-link

b8eab12

Update API for react-menu

920cdb5

Update API for react-popover

67b5b92

Disable 'component-has-static-classname' test on react-toolbar

e91498b

This test is no longer applicable to react-toolbar as the `toolbarClassName` export has been removed. This component has not be exported as part of the public API so it is safe to entirely remove.

Fix conditional in classNames conformance test.

4ce0630

Fix lint deprecation errors

ccfb618

Fix conformance test failures

c5a7a26

Fixing CompoundButton test.

6994167

Remove debug logging

4a2d8b2

Disable static classnames object conformance test for react-focus

8755dcb

Update classNames exports from react-components.

b33c5c9

- Marks <ComponentName>ClassName string exports deprecated. - Adds <ComponentnName>ClassNames object exports. - Updates API file.

Change files

399a4f4

Disable classNames conformance tests in @fluentui/react and react-nor…

a06d389

…thstar Disables the static classname object conformance tests in @fluentui/react (v8) and @fluentui/react-northstar (v0).

spmonahan force-pushed the feat/static-classnames-helper-type branch from 6f29bbf to a06d389 Compare March 15, 2022 22:58

khmakoto added 2 commits March 15, 2022 17:54

More type import fixes

256a259

Fixing merge conflict.

874fdd7

spmonahan mentioned this pull request Mar 15, 2022

Static Classname Conformance Test Refactor #22117

Closed

Fixing bad merge conflict.

0c84a0e

ecraig12345 approved these changes Mar 16, 2022

View reviewed changes

Comment thread packages/react-conformance/src/defaultTests.tsx Outdated

Comment thread packages/react-conformance/src/defaultTests.tsx

ecraig12345 added 3 commits March 15, 2022 17:42

Merge branch 'master' into feat/static-classnames-helper-type

9c8d22a

fix merge conflict + apply suggestions

90b3ffa

remove console log

fcc4c52

ecraig12345 enabled auto-merge (squash) March 16, 2022 02:15

ecraig12345 merged commit 086a675 into microsoft:master Mar 16, 2022

Hotell mentioned this pull request Mar 16, 2022

refactor: autofix no export star at index file for cxe-prg packages #22124

Merged

microsoft deleted a comment from azure-pipelines Bot Mar 16, 2022

Uh oh!

Conversation

spmonahan commented Mar 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current Behavior

New Behavior

Related Issue(s)

Uh oh!

codesandbox-ci Bot commented Mar 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Mar 4, 2022 • 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 Mar 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Mar 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

Uh oh!

fabricteam commented Mar 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

micahgodbolt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

spmonahan Mar 8, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

spmonahan Mar 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

spmonahan Mar 10, 2022

Choose a reason for hiding this comment

Uh oh!

micahgodbolt Mar 8, 2022

Choose a reason for hiding this comment

Uh oh!

spmonahan Mar 9, 2022

Choose a reason for hiding this comment

Uh oh!

ecraig12345 Mar 14, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ecraig12345 commented Mar 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

azure-pipelines Bot commented Mar 16, 2022

Uh oh!

Hotell commented Mar 16, 2022

Uh oh!

spmonahan commented Mar 16, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

spmonahan commented Mar 4, 2022 •

edited

Loading

codesandbox-ci Bot commented Mar 4, 2022 •

edited

Loading

fabricteam commented Mar 4, 2022 •

edited

Loading

size-auditor Bot commented Mar 4, 2022 •

edited

Loading

fabricteam commented Mar 4, 2022 •

edited

Loading

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

fabricteam commented Mar 4, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

spmonahan Mar 8, 2022 •

edited

Loading

ecraig12345 commented Mar 16, 2022 •

edited

Loading