chore: enforce files naming to use .styles.ts #27685

layershifter · 2023-04-25T13:02:51Z

New Behavior

This PR enables @griffel/styles-file rule for naming files.

Related Issue(s)

fabricteam · 2023-04-25T13:24:34Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`global-context` createContext	`533 B` `341 B`	`510 B` `330 B`	`-23 B` `-11 B`
`global-context` createContextSelector	`560 B` `352 B`	`537 B` `342 B`	`-23 B` `-10 B`
`react-accordion` Accordion (including children components)	`88.422 kB` `26.758 kB`	`88.396 kB` `26.742 kB`	`-26 B` `-16 B`
`react-alert` Alert	`93.479 kB` `22.496 kB`	`93.464 kB` `22.496 kB`	`-15 B`
`react-avatar` Avatar	`57.699 kB` `15.038 kB`	`57.712 kB` `15.048 kB`	`13 B` `10 B`
`react-avatar` AvatarGroup	`15.577 kB` `6.259 kB`	`15.561 kB` `6.25 kB`	`-16 B` `-9 B`
`react-avatar` AvatarGroupItem	`73.913 kB` `19.547 kB`	`73.888 kB` `19.537 kB`	`-25 B` `-10 B`
`react-badge` Badge	`23.456 kB` `7.195 kB`	`23.47 kB` `7.203 kB`	`14 B` `8 B`
`react-badge` CounterBadge	`24.36 kB` `7.504 kB`	`24.372 kB` `7.51 kB`	`12 B` `6 B`
`react-badge` PresenceBadge	`32.038 kB` `8.366 kB`	`32.05 kB` `8.37 kB`	`12 B` `4 B`
`react-button` Button	`36.672 kB` `9.462 kB`	`36.657 kB` `9.451 kB`	`-15 B` `-11 B`
`react-button` CompoundButton	`43.818 kB` `10.938 kB`	`43.811 kB` `10.931 kB`	`-7 B` `-7 B`
`react-button` MenuButton	`41.358 kB` `10.788 kB`	`41.342 kB` `10.786 kB`	`-16 B` `-2 B`
`react-button` SplitButton	`49.579 kB` `12.366 kB`	`49.564 kB` `12.365 kB`	`-15 B` `-1 B`
`react-button` ToggleButton	`54.955 kB` `11.4 kB`	`54.939 kB` `11.39 kB`	`-16 B` `-10 B`
`react-card` Card - All	`88.377 kB` `25.006 kB`	`88.363 kB` `25.004 kB`	`-14 B` `-2 B`
`react-card` Card	`83.312 kB` `23.559 kB`	`83.298 kB` `23.557 kB`	`-14 B` `-2 B`
`react-card` CardFooter	`9.1 kB` `3.841 kB`	`9.108 kB` `3.846 kB`	`8 B` `5 B`
`react-card` CardHeader	`10.992 kB` `4.536 kB`	`11.004 kB` `4.541 kB`	`12 B` `5 B`
`react-card` CardPreview	`9.905 kB` `4.191 kB`	`9.913 kB` `4.197 kB`	`8 B` `6 B`
`react-checkbox` Checkbox	`34.357 kB` `10.821 kB`	`34.341 kB` `10.816 kB`	`-16 B` `-5 B`
`react-combobox` Combobox (including child components)	`87.638 kB` `28.201 kB`	`87.65 kB` `28.201 kB`	`12 B`
`react-combobox` Dropdown (including child components)	`85.974 kB` `27.801 kB`	`85.989 kB` `27.807 kB`	`15 B` `6 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`64.8 kB` `17.852 kB`	`64.814 kB` `17.858 kB`	`14 B` `6 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`206.253 kB` `57.837 kB`	`206.27 kB` `57.851 kB`	`17 B` `14 B`
`react-components` react-components: FluentProvider & webLightTheme	`36.035 kB` `11.904 kB`	`36.047 kB` `11.912 kB`	`12 B` `8 B`
`react-datepicker-compat` DatePicker Compat	`222.465 kB` `59.15 kB`	`222.477 kB` `59.161 kB`	`12 B` `11 B`
`react-dialog` Dialog (including children components)	`91.984 kB` `27.448 kB`	`91.956 kB` `27.444 kB`	`-28 B` `-4 B`
`react-divider` Divider	`17.344 kB` `6.297 kB`	`17.356 kB` `6.302 kB`	`12 B` `5 B`
`react-field` Field	`18.803 kB` `7.027 kB`	`18.815 kB` `7.03 kB`	`12 B` `3 B`
`react-image` Image	`11.421 kB` `4.574 kB`	`11.429 kB` `4.578 kB`	`8 B` `4 B`
`react-infobutton` InfoButton	`129.999 kB` `39.71 kB`	`130.001 kB` `39.716 kB`	`2 B` `6 B`
`react-infobutton` InfoLabel	`133.464 kB` `40.789 kB`	`133.466 kB` `40.795 kB`	`2 B` `6 B`
`react-input` Input	`24.113 kB` `7.722 kB`	`24.098 kB` `7.717 kB`	`-15 B` `-5 B`
`react-label` Label	`10.046 kB` `4.186 kB`	`10.054 kB` `4.19 kB`	`8 B` `4 B`
`react-link` Link	`12.246 kB` `5.063 kB`	`12.254 kB` `5.069 kB`	`8 B` `6 B`
`react-menu` Menu (including children components)	`130.716 kB` `39.887 kB`	`130.728 kB` `39.895 kB`	`12 B` `8 B`
`react-menu` Menu (including selectable components)	`133.7 kB` `40.405 kB`	`133.712 kB` `40.408 kB`	`12 B` `3 B`
`react-overflow` hooks only	`11.214 kB` `4.271 kB`	`11.206 kB` `4.266 kB`	`-8 B` `-5 B`
`react-persona` Persona	`64.62 kB` `16.964 kB`	`64.633 kB` `16.971 kB`	`13 B` `7 B`
`react-popover` Popover	`116.996 kB` `36.079 kB`	`116.998 kB` `36.074 kB`	`2 B` `-5 B`
`react-progress` ProgressBar	`13.798 kB` `5.432 kB`	`13.806 kB` `5.438 kB`	`8 B` `6 B`
`react-provider` FluentProvider	`17.982 kB` `6.667 kB`	`17.994 kB` `6.67 kB`	`12 B` `3 B`
`react-radio` Radio	`27.226 kB` `8.656 kB`	`27.239 kB` `8.66 kB`	`13 B` `4 B`
`react-radio` RadioGroup	`11.257 kB` `4.712 kB`	`11.241 kB` `4.704 kB`	`-16 B` `-8 B`
`react-select` Select	`25.301 kB` `8.795 kB`	`25.288 kB` `8.788 kB`	`-13 B` `-7 B`
`react-slider` Slider	`34.253 kB` `11.063 kB`	`34.237 kB` `11.051 kB`	`-16 B` `-12 B`
`react-spinbutton` SpinButton	`34.023 kB` `10.375 kB`	`34.036 kB` `10.376 kB`	`13 B` `1 B`
`react-spinner` Spinner	`21.229 kB` `6.965 kB`	`21.242 kB` `6.971 kB`	`13 B` `6 B`
`react-switch` Switch	`29.75 kB` `9.27 kB`	`29.765 kB` `9.283 kB`	`15 B` `13 B`
`react-table` DataGrid	`150.626 kB` `41.441 kB`	`150.629 kB` `41.455 kB`	`3 B` `14 B`
`react-table` Table (Primitives only)	`45.035 kB` `12.527 kB`	`45.026 kB` `12.519 kB`	`-9 B` `-8 B`
`react-table` Table as DataGrid	`133.118 kB` `33.923 kB`	`133.117 kB` `33.917 kB`	`-1 B` `-6 B`
`react-table` Table (Selection only)	`78.888 kB` `19.33 kB`	`78.886 kB` `19.318 kB`	`-2 B` `-12 B`
`react-table` Table (Sort only)	`78.218 kB` `19.142 kB`	`78.216 kB` `19.127 kB`	`-2 B` `-15 B`
`react-tags` Tag	`21.934 kB` `7.893 kB`	`21.919 kB` `7.883 kB`	`-15 B` `-10 B`
`react-text` Text - Default	`12.434 kB` `4.919 kB`	`12.442 kB` `4.924 kB`	`8 B` `5 B`
`react-text` Text - Wrappers	`15.58 kB` `5.236 kB`	`15.592 kB` `5.24 kB`	`12 B` `4 B`
`react-textarea` Textarea	`27.617 kB` `9.089 kB`	`27.601 kB` `9.085 kB`	`-16 B` `-4 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`priority-overflow` createOverflowManager	`3.194 kB` `1.315 kB`
`react-portal` Portal	`11.591 kB` `4.261 kB`
`react-portal-compat` PortalCompatProvider	`6.473 kB` `2.196 kB`
`react-positioning` usePositioning	`24.249 kB` `8.856 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`31.33 kB` `6.764 kB`
`react-theme` Teams: Light theme	`17.895 kB` `5.162 kB`
`react-tooltip` Tooltip	`47.034 kB` `16.485 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 4812f79bd3756a8ef0d2eb5e55f61bf5644e5332}

size-auditor · 2023-04-25T13:27:52Z

Asset size changes

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

Baseline commit: 4812f79bd3756a8ef0d2eb5e55f61bf5644e5332 (build)

fabricteam · 2023-04-25T13:30:41Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	578	600	5000
Button	mount	310	292	5000
Field	mount	1013	1020	5000
FluentProvider	mount	633	638	5000
FluentProviderWithTheme	mount	71	81	10
FluentProviderWithTheme	virtual-rerender	69	68	10
FluentProviderWithTheme	virtual-rerender-with-unmount	72	75	10
InfoButton	mount	13	9	5000
MakeStyles	mount	869	856	50000
Persona	mount	1632	1582	5000
SpinButton	mount	1281	1259	5000

fabricteam · 2023-04-25T13:33:12Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	93	79	1.18:1
SegmentMinimalPerf.default	216	193	1.12:1
ListNestedPerf.default	339	306	1.11:1
TreeWith60ListItems.default	89	82	1.09:1
LoaderMinimalPerf.default	189	175	1.08:1
CarouselMinimalPerf.default	270	253	1.07:1
FormMinimalPerf.default	225	210	1.07:1
TextAreaMinimalPerf.default	294	274	1.07:1
ListWith60ListItems.default	371	350	1.06:1
SkeletonMinimalPerf.default	207	195	1.06:1
ReactionMinimalPerf.default	220	209	1.05:1
TextMinimalPerf.default	200	190	1.05:1
AttachmentMinimalPerf.default	84	81	1.04:1
CheckboxMinimalPerf.default	1182	1137	1.04:1
ImageMinimalPerf.default	219	211	1.04:1
InputMinimalPerf.default	545	524	1.04:1
StatusMinimalPerf.default	401	384	1.04:1
VideoMinimalPerf.default	431	413	1.04:1
AttachmentSlotsPerf.default	672	650	1.03:1
BoxMinimalPerf.default	200	194	1.03:1
DropdownManyItemsPerf.default	396	384	1.03:1
HeaderMinimalPerf.default	212	205	1.03:1
LayoutMinimalPerf.default	202	197	1.03:1
AlertMinimalPerf.default	158	155	1.02:1
ButtonMinimalPerf.default	84	82	1.02:1
ChatDuplicateMessagesPerf.default	152	149	1.02:1
PortalMinimalPerf.default	89	87	1.02:1
ProviderMergeThemesPerf.default	663	649	1.02:1
RadioGroupMinimalPerf.default	262	257	1.02:1
CustomToolbarPrototype.default	1444	1416	1.02:1
ToolbarMinimalPerf.default	540	532	1.02:1
TooltipMinimalPerf.default	1270	1240	1.02:1
ChatWithPopoverPerf.default	186	185	1.01:1
EmbedMinimalPerf.default	1760	1748	1.01:1
ListCommonPerf.default	393	390	1.01:1
ProviderMinimalPerf.default	201	199	1.01:1
DatepickerMinimalPerf.default	3524	3509	1:1
DropdownMinimalPerf.default	1412	1413	1:1
SliderMinimalPerf.default	680	680	1:1
IconMinimalPerf.default	384	384	1:1
TableManyItemsPerf.default	1114	1112	1:1
TableMinimalPerf.default	240	239	1:1
TreeMinimalPerf.default	483	481	1:1
ButtonOverridesMissPerf.default	626	630	0.99:1
CardMinimalPerf.default	311	314	0.99:1
ItemLayoutMinimalPerf.default	708	718	0.99:1
PopupMinimalPerf.default	345	349	0.99:1
SplitButtonMinimalPerf.default	2271	2302	0.99:1
DialogMinimalPerf.default	452	460	0.98:1
DividerMinimalPerf.default	202	207	0.98:1
HeaderSlotsPerf.default	463	471	0.98:1
ListMinimalPerf.default	310	316	0.98:1
MenuMinimalPerf.default	485	494	0.98:1
MenuButtonMinimalPerf.default	940	963	0.98:1
RefMinimalPerf.default	106	108	0.98:1
AvatarMinimalPerf.default	109	112	0.97:1
ButtonSlotsPerf.default	309	319	0.97:1
AnimationMinimalPerf.default	287	300	0.96:1
FlexMinimalPerf.default	150	157	0.96:1
RosterPerf.default	1533	1589	0.96:1
ChatMinimalPerf.default	420	440	0.95:1
LabelMinimalPerf.default	214	225	0.95:1
GridMinimalPerf.default	173	195	0.89:1

codesandbox-ci · 2023-04-25T13:42:56Z

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 2572e4d:

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

fabricteam · 2023-04-25T13:44:07Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	635	634	5000
Breadcrumb	mount	1695	1658	1000
Checkbox	mount	1689	1687	5000
CheckboxBase	mount	1519	1474	5000
ChoiceGroup	mount	2961	2955	5000
ComboBox	mount	650	660	1000
CommandBar	mount	6310	6217	1000
ContextualMenu	mount	13610	14301	1000
DefaultButton	mount	766	754	5000
DetailsRow	mount	2212	2217	5000
DetailsRowFast	mount	2223	2180	5000
DetailsRowNoStyles	mount	2066	1997	5000
Dialog	mount	2602	2767	1000
DocumentCardTitle	mount	227	219	1000
Dropdown	mount	1977	1986	5000
FocusTrapZone	mount	1126	1133	5000
FocusZone	mount	1057	1057	5000
GroupedList	mount	41522	41446	2
GroupedList	virtual-rerender	19842	19877	2
GroupedList	virtual-rerender-with-unmount	50734	50746	2
GroupedListV2	mount	223	235	2
GroupedListV2	virtual-rerender	222	226	2
GroupedListV2	virtual-rerender-with-unmount	219	226	2
IconButton	mount	1082	1068	5000
Label	mount	348	337	5000
Layer	mount	2689	2694	5000
Link	mount	396	383	5000
MenuButton	mount	938	939	5000
MessageBar	mount	21350	21864	5000
Nav	mount	1931	1941	1000
OverflowSet	mount	767	771	5000
Panel	mount	1814	1823	1000
Persona	mount	770	731	1000
Pivot	mount	877	873	1000
PrimaryButton	mount	852	821	5000
Rating	mount	4642	4527	5000
SearchBox	mount	909	916	5000
Shimmer	mount	1882	1882	5000
Slider	mount	1349	1331	5000
SpinButton	mount	2881	2881	5000
Spinner	mount	382	393	5000
SplitButton	mount	1820	1849	5000
Stack	mount	424	406	5000
StackWithIntrinsicChildren	mount	876	881	5000
StackWithTextChildren	mount	2661	2623	5000
SwatchColorPicker	mount	6007	6046	5000
TagPicker	mount	1455	1459	5000
Text	mount	372	374	5000
TextField	mount	943	907	5000
ThemeProvider	mount	829	818	5000
ThemeProvider	virtual-rerender	586	578	5000
ThemeProvider	virtual-rerender-with-unmount	1277	1268	5000
Toggle	mount	603	626	5000
buttonNative	mount	223	189	5000

fabricteam · 2023-04-25T13:56:34Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-04-27T09:31:27Z

🕵 FluentUI-v0 No visual regressions between this PR and main

apps/perf-test-react-components/.eslintrc.json

apps/public-docsite-v9/.eslintrc.json

apps/recipes-react-components/.eslintrc.json

apps/vr-tests-react-components/.eslintrc.json

scripts/tasks/src/babel.ts

msft-fluent-ui-bot · 2023-05-30T07:37:44Z

🎉@fluentui/dom-utilities@v2.2.10 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:37:47Z

🎉@fluentui/eslint-plugin@v1.17.0 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:37:50Z

🎉@fluentui/fluent2-theme@v8.107.14 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:37:53Z

🎉@fluentui/font-icons-mdl2@v8.5.19 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:37:59Z

🎉@fluentui/foundation-legacy@v8.2.39 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:38:02Z

🎉@fluentui/jest-serializer-merge-styles@v8.0.28 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:38:08Z

🎉@fluentui/merge-styles@v8.5.11 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:38:11Z

🎉@fluentui/react-cards@v0.205.89 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:38:17Z

🎉@fluentui/react-charting@v5.16.34 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:38:20Z

🎉@fluentui/react-date-time@v8.7.89 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:38:29Z

🎉@fluentui/react-docsite-components@v8.12.14 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:38:35Z

🎉@fluentui/react-experiments@v8.14.84 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:38:38Z

🎉@fluentui/react-file-type-icons@v8.8.19 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:38:44Z

🎉@fluentui/react-focus@v8.8.25 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:38:47Z

🎉@fluentui/react-hooks@v8.6.25 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:38:50Z

🎉@fluentui/react-icon-provider@v1.3.40 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:38:56Z

🎉@fluentui/react-icons-mdl2-branded@v1.2.44 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:38:59Z

🎉@fluentui/react-icons-mdl2@v1.3.43 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:39:05Z

🎉@fluentui/react-monaco-editor@v1.7.91 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:39:08Z

🎉@fluentui/react-window-provider@v2.2.14 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:39:17Z

🎉@fluentui/react@v8.109.8 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:39:20Z

🎉@fluentui/scheme-utilities@v8.3.31 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:39:23Z

🎉@fluentui/style-utilities@v8.9.12 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:39:26Z

🎉@fluentui/theme-samples@v8.7.89 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:39:29Z

🎉@fluentui/theme@v2.6.30 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-30T07:39:35Z

🎉@fluentui/utilities@v8.13.14 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-31T07:44:27Z

🎉@fluentui/react-components@v9.21.0 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-31T07:47:48Z

🎉@fluentui/react-virtualizer@v9.0.0-alpha.22 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-31T07:48:42Z

🎉@fluentui/react-drawer@v9.0.0-beta.1 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot assigned ling1726 Apr 25, 2023

github-actions bot added this to the April Project Cycle Q2 2023 milestone Apr 25, 2023

layershifter force-pushed the chore/enforce-files-naming branch from 141a8ae to 99dfff4 Compare April 25, 2023 13:16

layershifter force-pushed the chore/enforce-files-naming branch from 99dfff4 to dde669e Compare April 25, 2023 13:31

layershifter force-pushed the chore/enforce-files-naming branch from dde669e to 0583c3b Compare April 25, 2023 13:58

layershifter mentioned this pull request Apr 26, 2023

chore: bump @griffel/eslint-plugin & enable @griffel/hook-naming #27687

Merged

layershifter force-pushed the chore/enforce-files-naming branch 2 times, most recently from 5ea578c to 08e3d02 Compare April 27, 2023 09:01

layershifter force-pushed the chore/enforce-files-naming branch from 08e3d02 to f4fcbe4 Compare May 3, 2023 11:10

github-actions bot modified the milestones: April Project Cycle Q2 2023, May Project Cycle Q2 2023 May 3, 2023

layershifter force-pushed the chore/enforce-files-naming branch from f4fcbe4 to 640aea1 Compare May 3, 2023 11:22

msft-fluent-ui-bot added the Area: Build System label May 3, 2023