chore: Update Griffel to latest version #25212

layershifter · 2022-10-13T11:21:32Z

New Behavior

Technically the support for makeResetStyles (microsoft/griffel#225) came with the previous upgrade (#25075), but it didn't support animationName (microsoft/griffel#241) and support for build time transforms (microsoft/griffel#236).

This upgrade brings them as the fix for url() handling (microsoft/griffel#237) which is not used anywhere in Fluent UI itself.

The main goal is to get fully functioning makeResetStyles and try it to optimize existing components to reduce amount of atomic classes in base components.

codesandbox-ci · 2022-10-13T11:33:04Z

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 1bfae61:

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

size-auditor · 2022-10-13T11:35:35Z

Asset size changes

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

Baseline commit: 5280dfeda349453f42b51ae49c9d128bc322c609 (build)

fabricteam · 2022-10-13T11:39:12Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1313	1306	5000
Button	mount	951	870	5000
FluentProvider	mount	1589	1559	5000
FluentProviderWithTheme	mount	627	562	10
FluentProviderWithTheme	virtual-rerender	595	581	10
FluentProviderWithTheme	virtual-rerender-with-unmount	621	637	10
MakeStyles	mount	1927	1892	50000
SpinButton	mount	2415	2359	5000

fabricteam · 2022-10-13T11:42:25Z

📊 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.153 kB` `1.299 kB`
`react-accordion` Accordion (including children components)	`79.083 kB` `24.079 kB`
`react-alert` Alert	`84.688 kB` `21.233 kB`
`react-avatar` Avatar	`48.874 kB` `13.864 kB`
`react-avatar` AvatarGroup	`14.996 kB` `6.013 kB`
`react-avatar` AvatarGroupItem	`68.842 kB` `19.205 kB`
`react-badge` Badge	`22.646 kB` `7.228 kB`
`react-badge` CounterBadge	`23.536 kB` `7.512 kB`
`react-badge` PresenceBadge	`24.096 kB` `7.09 kB`
`react-button` Button	`36.849 kB` `9.907 kB`
`react-button` CompoundButton	`43.874 kB` `11.123 kB`
`react-button` MenuButton	`39.543 kB` `10.807 kB`
`react-button` SplitButton	`46.989 kB` `12.192 kB`
`react-button` ToggleButton	`52.716 kB` `11.381 kB`
`react-card` Card - All	`67.216 kB` `19.304 kB`
`react-card` Card	`62.898 kB` `18.22 kB`
`react-card` CardFooter	`8.607 kB` `3.622 kB`
`react-card` CardHeader	`9.65 kB` `3.962 kB`
`react-card` CardPreview	`8.708 kB` `3.678 kB`
`react-combobox` Combobox (including child components)	`75.85 kB` `24.632 kB`
`react-combobox` Dropdown (including child components)	`75.579 kB` `24.594 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`62.94 kB` `17.663 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`189.488 kB` `52.587 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.446 kB` `11.033 kB`
`react-dialog` Dialog (including children components)	`82.626 kB` `24.504 kB`
`react-divider` Divider	`16.505 kB` `5.925 kB`
`react-image` Image	`10.826 kB` `4.286 kB`
`react-infobutton` InfoButton	`7.742 kB` `3.265 kB`
`react-input` Input	`24.428 kB` `7.899 kB`
`react-label` Label	`9.384 kB` `3.883 kB`
`react-link` Link	`11.852 kB` `4.888 kB`
`react-menu` Menu (including children components)	`116.668 kB` `35.792 kB`
`react-menu` Menu (including selectable components)	`119.737 kB` `36.316 kB`
`react-overflow` hooks only	`11.004 kB` `4.188 kB`
`react-persona` Persona	`53.992 kB` `15.25 kB`
`react-popover` Popover	`102.864 kB` `31.542 kB`
`react-portal` Portal	`10.628 kB` `3.899 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-positioning` usePositioning	`19.724 kB` `7.415 kB`
`react-progress` Progress	`12.789 kB` `4.927 kB`
`react-provider` FluentProvider	`15.807 kB` `5.909 kB`
`react-radio` Radio	`36.436 kB` `12.126 kB`
`react-radio` RadioGroup	`14.294 kB` `5.723 kB`
`react-select` Select	`21.61 kB` `7.568 kB`
`react-slider` Slider	`31.805 kB` `10.085 kB`
`react-spinbutton` SpinButton	`45.541 kB` `12.758 kB`
`react-spinner` Spinner	`20.023 kB` `6.461 kB`
`react-switch` Switch	`33.388 kB` `10.578 kB`
`react-text` Text - Default	`11.828 kB` `4.627 kB`
`react-text` Text - Wrappers	`15.138 kB` `5.064 kB`
`react-textarea` Textarea	`25.687 kB` `8.331 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.65 kB` `6.444 kB`
`react-theme` Teams: Light theme	`17.486 kB` `5.057 kB`
`react-tooltip` Tooltip	`41.718 kB` `14.687 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 5280dfeda349453f42b51ae49c9d128bc322c609}

fabricteam · 2022-10-13T11:47:59Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AlertMinimalPerf.default	234	220	1.06:1
ChatDuplicateMessagesPerf.default	219	207	1.06:1
AttachmentMinimalPerf.default	132	126	1.05:1
FormMinimalPerf.default	337	322	1.05:1
HeaderMinimalPerf.default	328	311	1.05:1
DividerMinimalPerf.default	321	310	1.04:1
ImageMinimalPerf.default	352	339	1.04:1
DropdownManyItemsPerf.default	550	532	1.03:1
FlexMinimalPerf.default	252	245	1.03:1
TextMinimalPerf.default	308	298	1.03:1
AvatarMinimalPerf.default	166	163	1.02:1
ButtonSlotsPerf.default	435	426	1.02:1
ChatWithPopoverPerf.default	294	289	1.02:1
LabelMinimalPerf.default	345	339	1.02:1
ListNestedPerf.default	473	465	1.02:1
PortalMinimalPerf.default	142	139	1.02:1
ReactionMinimalPerf.default	335	330	1.02:1
AnimationMinimalPerf.default	476	469	1.01:1
AttachmentSlotsPerf.default	889	880	1.01:1
CardMinimalPerf.default	469	464	1.01:1
CheckboxMinimalPerf.default	1543	1534	1.01:1
GridMinimalPerf.default	300	296	1.01:1
InputMinimalPerf.default	851	845	1.01:1
LoaderMinimalPerf.default	519	515	1.01:1
MenuMinimalPerf.default	742	734	1.01:1
SegmentMinimalPerf.default	302	300	1.01:1
IconMinimalPerf.default	567	564	1.01:1
ToolbarMinimalPerf.default	808	797	1.01:1
VideoMinimalPerf.default	630	622	1.01:1
CarouselMinimalPerf.default	357	358	1:1
ChatMinimalPerf.default	644	643	1:1
DialogMinimalPerf.default	693	690	1:1
DropdownMinimalPerf.default	2172	2172	1:1
EmbedMinimalPerf.default	2643	2655	1:1
ItemLayoutMinimalPerf.default	978	978	1:1
MenuButtonMinimalPerf.default	1362	1361	1:1
RosterPerf.default	1702	1694	1:1
ProviderMergeThemesPerf.default	986	989	1:1
SliderMinimalPerf.default	1254	1250	1:1
SplitButtonMinimalPerf.default	3286	3273	1:1
TableManyItemsPerf.default	1578	1574	1:1
TextAreaMinimalPerf.default	413	412	1:1
TreeMinimalPerf.default	712	709	1:1
BoxMinimalPerf.default	297	299	0.99:1
DatepickerMinimalPerf.default	4669	4726	0.99:1
HeaderSlotsPerf.default	686	691	0.99:1
LayoutMinimalPerf.default	315	317	0.99:1
ListMinimalPerf.default	461	464	0.99:1
ListWith60ListItems.default	495	501	0.99:1
PopupMinimalPerf.default	550	555	0.99:1
ProviderMinimalPerf.default	313	315	0.99:1
SkeletonMinimalPerf.default	299	303	0.99:1
StatusMinimalPerf.default	604	612	0.99:1
CustomToolbarPrototype.default	2136	2149	0.99:1
TooltipMinimalPerf.default	1857	1872	0.99:1
ButtonMinimalPerf.default	134	137	0.98:1
ButtonOverridesMissPerf.default	1012	1029	0.98:1
ListCommonPerf.default	523	533	0.98:1
RadioGroupMinimalPerf.default	384	391	0.98:1
TableMinimalPerf.default	352	358	0.98:1
AccordionMinimalPerf.default	121	125	0.97:1
RefMinimalPerf.default	177	186	0.95:1
TreeWith60ListItems.default	124	132	0.94:1

fabricteam · 2022-10-13T12:12:29Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1174	1188	5000
Breadcrumb	mount	2752	2757	1000
Checkbox	mount	2623	2661	5000
CheckboxBase	mount	2381	2356	5000
ChoiceGroup	mount	4259	4167	5000
ComboBox	mount	1185	1161	1000
CommandBar	mount	9275	9220	1000
ContextualMenu	mount	10223	10176	1000
DefaultButton	mount	1348	1366	5000
DetailsRow	mount	3391	3342	5000
DetailsRowFast	mount	3399	3374	5000
DetailsRowNoStyles	mount	3232	3228	5000
Dialog	mount	3000	2939	1000
DocumentCardTitle	mount	564	577	1000
Dropdown	mount	3151	3114	5000
FocusTrapZone	mount	1966	1945	5000
FocusZone	mount	1909	1905	5000
GroupedList	mount	48343	53277	2
GroupedList	virtual-rerender	22965	22840	2
GroupedList	virtual-rerender-with-unmount	82895	82372	2
GroupedListV2	mount	559	565	2
GroupedListV2	virtual-rerender	532	518	2
GroupedListV2	virtual-rerender-with-unmount	557	557	2
IconButton	mount	1775	1787	5000
Label	mount	756	760	5000
Layer	mount	4123	4096	5000
Link	mount	847	858	5000
MenuButton	mount	1618	1601	5000
MessageBar	mount	2419	2358	5000
Nav	mount	3054	3079	1000
OverflowSet	mount	1422	1403	5000
Panel	mount	2534	2498	1000
Persona	mount	1244	1225	1000
Pivot	mount	1522	1539	1000
PrimaryButton	mount	1495	1498	5000
Rating	mount	6986	6968	5000
SearchBox	mount	1488	1494	5000
Shimmer	mount	2923	2911	5000
Slider	mount	2119	2123	5000
SpinButton	mount	4252	4278	5000
Spinner	mount	828	840	5000
SplitButton	mount	2810	2857	5000
Stack	mount	887	884	5000
StackWithIntrinsicChildren	mount	2245	2267	5000
StackWithTextChildren	mount	4948	4957	5000
SwatchColorPicker	mount	9507	9515	5000
TagPicker	mount	2316	2351	5000
TeachingBubble	mount	76184	75846	5000
Text	mount	821	814	5000
TextField	mount	1531	1564	5000
ThemeProvider	mount	1443	1429	5000
ThemeProvider	virtual-rerender	1145	1146	5000
ThemeProvider	virtual-rerender-with-unmount	1992	2010	5000
Toggle	mount	1123	1140	5000
buttonNative	mount	526	538	5000

change/@fluentui-react-dialog-cedc6c7c-fd4d-4c67-bdec-52e9129f7a2d.json

msft-fluent-ui-bot assigned miroslavstastny Oct 13, 2022

layershifter added the Ready for VR Used to trigger screener checks for PRs label Oct 13, 2022

github-actions bot added this to the October Project Cycle Q4 2022 milestone Oct 13, 2022

layershifter force-pushed the chore/bump-griffel-3 branch from 7adfae9 to d84cadb Compare October 13, 2022 13:14

layershifter marked this pull request as ready for review October 13, 2022 13:28

layershifter requested review from a team, GeoffCoxMSFT, behowell, chpalac, khmakoto, ling1726, micahgodbolt, smhigley, sopranopillow, spmonahan and tomi-msft as code owners October 13, 2022 13:28

ling1726 approved these changes Oct 13, 2022

View reviewed changes

spmonahan approved these changes Oct 13, 2022

View reviewed changes

layershifter closed this Oct 13, 2022

layershifter reopened this Oct 13, 2022

TristanWatanabe approved these changes Oct 14, 2022

View reviewed changes

change/@fluentui-react-dialog-cedc6c7c-fd4d-4c67-bdec-52e9129f7a2d.json Outdated Show resolved Hide resolved

chore: Update Griffel to latest version

1bfae61

layershifter force-pushed the chore/bump-griffel-3 branch from d84cadb to 1bfae61 Compare October 14, 2022 08:30

sopranopillow approved these changes Oct 14, 2022

View reviewed changes

tudorpopams approved these changes Oct 18, 2022

View reviewed changes

layershifter closed this Oct 18, 2022

layershifter reopened this Oct 18, 2022

layershifter merged commit 06865da into microsoft:master Oct 18, 2022

layershifter deleted the chore/bump-griffel-3 branch October 18, 2022 13:45

NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022

chore: Update Griffel to latest version (microsoft#25212)

1380e39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: Update Griffel to latest version #25212

chore: Update Griffel to latest version #25212

Uh oh!

layershifter commented Oct 13, 2022 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Oct 13, 2022 •

edited

Loading

Uh oh!

size-auditor bot commented Oct 13, 2022 •

edited

Loading

Uh oh!

fabricteam commented Oct 13, 2022 •

edited

Loading

Uh oh!

fabricteam commented Oct 13, 2022 •

edited

Loading

Uh oh!

fabricteam commented Oct 13, 2022 •

edited

Loading

Uh oh!

fabricteam commented Oct 13, 2022 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

chore: Update Griffel to latest version #25212

chore: Update Griffel to latest version #25212

Uh oh!

Conversation

layershifter commented Oct 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New Behavior

Uh oh!

codesandbox-ci bot commented Oct 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Oct 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

layershifter commented Oct 13, 2022 •

edited

Loading

codesandbox-ci bot commented Oct 13, 2022 •

edited

Loading

size-auditor bot commented Oct 13, 2022 •

edited

Loading

fabricteam commented Oct 13, 2022 •

edited

Loading

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

fabricteam commented Oct 13, 2022 •

edited

Loading

fabricteam commented Oct 13, 2022 •

edited

Loading

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

fabricteam commented Oct 13, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)