chore: migrate to prettier 2.8 #26959

Hotell · 2023-02-24T14:33:37Z

Notes 💡

Which migration causes most regressions ?:

🔥 2.3

Cant we enable options to mitigate so many diffs?:

These formatting regression cannot be "undone" - there is no prettier config for those diffs to mitigate so many code changes.

All available options -> https://prettier.io/docs/en/options.html

Can't we apply formatting gradually?:

No -- why? --> We run format checks on whole codebase after every merge to master. While this will change in future, that's the current state.

New Behavior

💡 For more granular diff check granular commits https://github.com/microsoft/fluentui/pull/26959/commits

2.3

Related Issue(s)

Fixes partially Roadmap: v-build 22/23 #25488

fabricteam · 2023-02-24T14:44:22Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`priority-overflow` createOverflowManager	`3.194 kB` `1.314 kB`
`react-accordion` Accordion (including children components)	`85.876 kB` `26.019 kB`
`react-alert` Alert	`87.465 kB` `21.569 kB`
`react-avatar` Avatar	`51.192 kB` `14.043 kB`
`react-avatar` AvatarGroup	`15.42 kB` `6.167 kB`
`react-avatar` AvatarGroupItem	`67.414 kB` `18.551 kB`
`react-badge` Badge	`23.113 kB` `7.069 kB`
`react-badge` CounterBadge	`24.002 kB` `7.374 kB`
`react-badge` PresenceBadge	`25.438 kB` `7.254 kB`
`react-button` Button	`36.888 kB` `9.412 kB`
`react-button` CompoundButton	`44.063 kB` `10.885 kB`
`react-button` MenuButton	`41.568 kB` `10.742 kB`
`react-button` SplitButton	`49.997 kB` `12.321 kB`
`react-button` ToggleButton	`55.252 kB` `11.331 kB`
`react-card` Card - All	`83.548 kB` `23.894 kB`
`react-card` Card	`78.317 kB` `22.433 kB`
`react-card` CardFooter	`9.045 kB` `3.806 kB`
`react-card` CardHeader	`10.984 kB` `4.509 kB`
`react-card` CardPreview	`9.852 kB` `4.159 kB`
`react-checkbox` Checkbox	`33.091 kB` `10.319 kB`
`react-checkbox` CheckboxField	`39.996 kB` `12.206 kB`
`react-combobox` Combobox (including child components)	`85.509 kB` `27.437 kB`
`react-combobox` ComboboxField	`81.926 kB` `27.213 kB`
`react-combobox` Dropdown (including child components)	`84.196 kB` `27.191 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`64.09 kB` `17.544 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`202.311 kB` `56.366 kB`
`react-components` react-components: FluentProvider & webLightTheme	`35.049 kB` `11.533 kB`
`react-dialog` Dialog (including children components)	`89.719 kB` `26.685 kB`
`react-divider` Divider	`17.11 kB` `6.18 kB`
`react-field` Field	`17.673 kB` `6.543 kB`
`react-image` Image	`11.259 kB` `4.473 kB`
`react-infobutton` InfoButton	`127.413 kB` `38.821 kB`
`react-input` Input	`22.94 kB` `7.214 kB`
`react-input` InputField	`32.819 kB` `10.111 kB`
`react-label` Label	`9.822 kB` `4.066 kB`
`react-link` Link	`12.306 kB` `5.073 kB`
`react-menu` Menu (including children components)	`126.86 kB` `38.831 kB`
`react-menu` Menu (including selectable components)	`129.929 kB` `39.345 kB`
`react-overflow` hooks only	`11.214 kB` `4.271 kB`
`react-persona` Persona	`58.207 kB` `15.986 kB`
`react-popover` Popover	`114.485 kB` `35.245 kB`
`react-portal` Portal	`11.377 kB` `4.179 kB`
`react-portal-compat` PortalCompatProvider	`6.324 kB` `2.129 kB`
`react-positioning` usePositioning	`23.791 kB` `8.73 kB`
`react-progress` ProgressBar	`13.59 kB` `5.24 kB`
`react-progress` ProgressField	`23.885 kB` `8.385 kB`
`react-provider` FluentProvider	`17.116 kB` `6.332 kB`
`react-radio` Radio	`32.676 kB` `10.616 kB`
`react-radio` RadioGroup	`14.885 kB` `5.933 kB`
`react-radio` RadioGroupField	`24.963 kB` `9.07 kB`
`react-select` Select	`24.145 kB` `8.271 kB`
`react-select` SelectField	`33.384 kB` `10.779 kB`
`react-slider` Slider	`33.091 kB` `10.555 kB`
`react-slider` SliderField	`42.922 kB` `13.465 kB`
`react-spinbutton` SpinButton	`32.83 kB` `9.864 kB`
`react-spinbutton` SpinButtonField	`41.766 kB` `12.254 kB`
`react-spinner` Spinner	`20.62 kB` `6.682 kB`
`react-switch` Switch	`28.225 kB` `8.755 kB`
`react-switch` SwitchField	`35.01 kB` `10.655 kB`
`react-table` DataGrid	`144.785 kB` `39.447 kB`
`react-table` Table (Primitives only)	`43.776 kB` `12.063 kB`
`react-table` Table as DataGrid	`134.4 kB` `34.514 kB`
`react-table` Table (Selection only)	`82.316 kB` `20.576 kB`
`react-table` Table (Sort only)	`81.637 kB` `20.386 kB`
`react-text` Text - Default	`12.261 kB` `4.819 kB`
`react-text` Text - Wrappers	`15.571 kB` `5.23 kB`
`react-textarea` Textarea	`26.336 kB` `8.585 kB`
`react-textarea` TextareaField	`36.537 kB` `11.504 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`30.908 kB` `6.714 kB`
`react-theme` Teams: Light theme	`17.776 kB` `5.141 kB`
`react-tooltip` Tooltip	`46.328 kB` `16.212 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against cb0acaa586d84b70a9d2c3a9f4a14d5cdd3022cb}

fabricteam · 2023-02-24T14:48:36Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1699	1682	5000
Button	mount	1145	1177	5000
Field	mount	2636	2621	5000
FluentProvider	mount	2038	1982	5000
FluentProviderWithTheme	mount	718	745	10
FluentProviderWithTheme	virtual-rerender	669	688	10
FluentProviderWithTheme	virtual-rerender-with-unmount	750	711	10
InfoButton	mount	650	647	5000
MakeStyles	mount	2326	2345	50000
Persona	mount	4000	3970	5000
SpinButton	mount	3253	3203	5000

fabricteam · 2023-02-24T14:53:33Z

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

⚠️ No perf measurements available

size-auditor · 2023-02-24T14:56:41Z

Asset size changes

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

Baseline commit: cb0acaa586d84b70a9d2c3a9f4a14d5cdd3022cb (build)

codesandbox-ci · 2023-02-24T15:00:08Z

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 148da27:

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

fabricteam · 2023-02-24T15:08:35Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-02-24T15:11:54Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1529	1534	5000
Breadcrumb	mount	3649	3629	1000
Checkbox	mount	3322	3371	5000
CheckboxBase	mount	3029	2974	5000
ChoiceGroup	mount	5836	5755	5000
ComboBox	mount	1571	1598	1000
CommandBar	mount	11839	11799	1000
ContextualMenu	mount	17705	17887	1000
DefaultButton	mount	1774	1757	5000
DetailsRow	mount	4514	4472	5000
DetailsRowFast	mount	4483	4451	5000
DetailsRowNoStyles	mount	4347	4285	5000
Dialog	mount	3856	3943	1000
DocumentCardTitle	mount	707	750	1000
Dropdown	mount	4180	4238	5000
FocusTrapZone	mount	2543	2581	5000
FocusZone	mount	2509	2482	5000
GroupedList	mount	67205	76166	2
GroupedList	virtual-rerender	31320	31334	2
GroupedList	virtual-rerender-with-unmount	107348	107076	2
GroupedListV2	mount	676	671	2
GroupedListV2	virtual-rerender	666	660	2
GroupedListV2	virtual-rerender-with-unmount	686	706	2
IconButton	mount	2546	2502	5000
Label	mount	883	890	5000
Layer	mount	5384	5445	5000
Link	mount	1032	1029	5000
MenuButton	mount	2151	2221	5000
MessageBar	mount	2928	2946	5000
Nav	mount	4143	4208	1000
OverflowSet	mount	1719	1689	5000
Panel	mount	3152	3125	1000
Persona	mount	1700	1693	1000
Pivot	mount	2075	2070	1000
PrimaryButton	mount	1944	1934	5000
Rating	mount	9362	9344	5000
SearchBox	mount	1978	1992	5000
Shimmer	mount	3739	3822	5000
Slider	mount	2625	2648	5000
SpinButton	mount	6012	6064	5000
Spinner	mount	996	998	5000
SplitButton	mount	3938	4045	5000
Stack	mount	1029	1019	5000
StackWithIntrinsicChildren	mount	3155	3176	5000
StackWithTextChildren	mount	6435	6538	5000
SwatchColorPicker	mount	13214	14469	5000
TagPicker	mount	3396	3445	5000
TeachingBubble	mount	104495	104784	5000
Text	mount	963	1007	5000
TextField	mount	2052	2068	5000
ThemeProvider	mount	1880	1910	5000
ThemeProvider	virtual-rerender	1321	1294	5000
ThemeProvider	virtual-rerender-with-unmount	2674	2672	5000
Toggle	mount	1418	1407	5000
buttonNative	mount	664	662	5000

fabricteam · 2023-02-24T15:17:17Z

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

apps/perf-test-react-components/src/scenarios/Persona.tsx

msft-fluent-ui-bot assigned Hotell Feb 24, 2023

github-actions bot added this to the February Project Cycle Q1 2023 milestone Feb 24, 2023

github-actions bot added the Type: RFC Request for Feedback label Feb 24, 2023

Hotell removed the Type: RFC Request for Feedback label Feb 24, 2023

fabricteam reviewed Feb 24, 2023

View reviewed changes

apps/perf-test-react-components/src/scenarios/Persona.tsx Show resolved Hide resolved

Hotell force-pushed the hotell/prettier/2dot7 branch from 146acb3 to 48ff2c5 Compare March 1, 2023 12:13

github-actions bot modified the milestones: February Project Cycle Q1 2023, March Project Cycle Q1 2023 Mar 1, 2023

github-actions bot added the Type: RFC Request for Feedback label Mar 1, 2023

Hotell changed the title ~~chore: migrate to prettier 2.7~~ chore: migrate to prettier 2.8 Mar 1, 2023

Hotell mentioned this pull request Mar 1, 2023

Roadmap: v-build 22/23 #25488

Open

28 tasks

Hotell added Area: Build System dependencies Pull requests that update a dependency file and removed Type: RFC Request for Feedback labels Mar 1, 2023

github-actions bot added the Type: RFC Request for Feedback label Mar 1, 2023

msft-fluent-ui-bot added the PR: API Modified label Mar 1, 2023

Hotell marked this pull request as ready for review March 1, 2023 16:14

Hotell requested review from ThomasMichon, a team, behowell and Jahnp as code owners March 1, 2023 16:14

Hotell requested review from a team, bigbadcapers, dzearing, micahgodbolt and Hirse as code owners March 1, 2023 16:14

ling1726 approved these changes Mar 1, 2023

View reviewed changes

chrisdholt approved these changes Mar 1, 2023

View reviewed changes

Hotell added 13 commits March 1, 2023 17:20

chore: migrate to prettier 2.3

7893db9

style: apply 2.3 on whole codebase

9ee666e

chore: migrate to prettier 2.4

af18a0f

style: apply 2.4 on whole codebase

b1de5dc

chore: migrate to prettier 2.5

9211ca9

style: apply 2.5 on whole codebase

c958b84

chore: migrate to prettier 2.6

9b19650

chore: migrate to prettier 2.7

192e386

chore: migrate to prettier 2.8

00dbd53

style: apply 2.8 on whole codebase

d58f173

generate change-files

ecd54ff

style: fix lint errors caused by new formatting style

01ecffc

docs: fix api.md files errors caused by new formatting style

148da27

Hotell force-pushed the hotell/prettier/2dot7 branch from 2414ae0 to 148da27 Compare March 1, 2023 16:20

AtishayMsft approved these changes Mar 1, 2023

View reviewed changes

behowell approved these changes Mar 1, 2023

View reviewed changes

spmonahan approved these changes Mar 1, 2023

View reviewed changes

apps/perf-test-react-components/src/scenarios/Persona.tsx Show resolved Hide resolved

Hotell merged commit 677a67b into microsoft:master Mar 2, 2023

Hotell deleted the hotell/prettier/2dot7 branch March 2, 2023 07:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: migrate to prettier 2.8 #26959

chore: migrate to prettier 2.8 #26959

Hotell commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023

size-auditor bot commented Feb 24, 2023 •

edited

Loading

codesandbox-ci bot commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

chore: migrate to prettier 2.8 #26959

chore: migrate to prettier 2.8 #26959

Conversation

Hotell commented Feb 24, 2023 • edited Loading

Notes 💡

New Behavior

2.3

2.4

2.5

2.6

2.7

2.8

Related Issue(s)

fabricteam commented Feb 24, 2023 • edited Loading

📊 Bundle size report

fabricteam commented Feb 24, 2023 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Feb 24, 2023

Perf Analysis (@fluentui/react-northstar)

size-auditor bot commented Feb 24, 2023 • edited Loading

Asset size changes

codesandbox-ci bot commented Feb 24, 2023 • edited Loading

fabricteam commented Feb 24, 2023 • edited Loading

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam commented Feb 24, 2023 • edited Loading

Perf Analysis (@fluentui/react)

fabricteam commented Feb 24, 2023 • edited Loading

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

Hotell commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

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

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

size-auditor bot commented Feb 24, 2023 •

edited

Loading

codesandbox-ci bot commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Feb 24, 2023 •

edited

Loading