chore: Update Griffel to latest version by layershifter · Pull Request #25075 · microsoft/fluentui

layershifter · 2022-10-04T15:55:14Z

New Behavior

Bumps Griffel packages to latest versions to get microsoft/griffel#207. Because of that fix there is a visual regression in SpinButton that works now correctly (described in microsoft/griffel#204).

codesandbox-ci · 2022-10-04T16:07:47Z

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 626770c:

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

size-auditor · 2022-10-04T16:09:44Z

Asset size changes

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

Baseline commit: b4a703103ebdf240bdce2fd629d8e5783ebb6ad1 (build)

fabricteam · 2022-10-04T16:11:56Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1292	1304	5000
Button	mount	938	927	5000
FluentProvider	mount	1494	1471	5000
FluentProviderWithTheme	mount	593	568	10
FluentProviderWithTheme	virtual-rerender	540	542	10
FluentProviderWithTheme	virtual-rerender-with-unmount	579	572	10
MakeStyles	mount	2024	2029	50000
SpinButton	mount	2409	2350	5000

fabricteam · 2022-10-04T16:18:33Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`79.037 kB` `24.059 kB`	`79.083 kB` `24.079 kB`	`46 B` `20 B`
`react-alert` Alert	`84.529 kB` `21.171 kB`	`84.575 kB` `21.195 kB`	`46 B` `24 B`
`react-avatar` Avatar	`48.828 kB` `13.842 kB`	`48.874 kB` `13.864 kB`	`46 B` `22 B`
`react-avatar` AvatarGroup	`14.95 kB` `5.989 kB`	`14.996 kB` `6.013 kB`	`46 B` `24 B`
`react-avatar` AvatarGroupItem	`68.796 kB` `19.182 kB`	`68.842 kB` `19.205 kB`	`46 B` `23 B`
`react-badge` Badge	`22.6 kB` `7.205 kB`	`22.646 kB` `7.228 kB`	`46 B` `23 B`
`react-badge` CounterBadge	`23.49 kB` `7.489 kB`	`23.536 kB` `7.512 kB`	`46 B` `23 B`
`react-badge` PresenceBadge	`24.05 kB` `7.067 kB`	`24.096 kB` `7.09 kB`	`46 B` `23 B`
`react-button` Button	`36.69 kB` `9.818 kB`	`36.736 kB` `9.845 kB`	`46 B` `27 B`
`react-button` CompoundButton	`43.715 kB` `11.036 kB`	`43.761 kB` `11.061 kB`	`46 B` `25 B`
`react-button` MenuButton	`39.384 kB` `10.72 kB`	`39.43 kB` `10.745 kB`	`46 B` `25 B`
`react-button` SplitButton	`46.83 kB` `12.102 kB`	`46.876 kB` `12.129 kB`	`46 B` `27 B`
`react-button` ToggleButton	`52.557 kB` `11.29 kB`	`52.603 kB` `11.317 kB`	`46 B` `27 B`
`react-card` Card - All	`67.17 kB` `19.281 kB`	`67.216 kB` `19.304 kB`	`46 B` `23 B`
`react-card` Card	`62.852 kB` `18.198 kB`	`62.898 kB` `18.22 kB`	`46 B` `22 B`
`react-card` CardFooter	`8.561 kB` `3.601 kB`	`8.607 kB` `3.622 kB`	`46 B` `21 B`
`react-card` CardHeader	`9.604 kB` `3.94 kB`	`9.65 kB` `3.962 kB`	`46 B` `22 B`
`react-card` CardPreview	`8.662 kB` `3.656 kB`	`8.708 kB` `3.678 kB`	`46 B` `22 B`
`react-combobox` Combobox (including child components)	`75.071 kB` `24.394 kB`	`75.117 kB` `24.42 kB`	`46 B` `26 B`
`react-combobox` Dropdown (including child components)	`74.799 kB` `24.352 kB`	`74.845 kB` `24.382 kB`	`46 B` `30 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`62.781 kB` `17.574 kB`	`62.827 kB` `17.599 kB`	`46 B` `25 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`189.227 kB` `52.474 kB`	`189.273 kB` `52.499 kB`	`46 B` `25 B`
`react-components` react-components: FluentProvider & webLightTheme	`33.4 kB` `11.008 kB`	`33.446 kB` `11.033 kB`	`46 B` `25 B`
`react-dialog` Dialog (including children components)	`82.465 kB` `24.447 kB`	`82.511 kB` `24.473 kB`	`46 B` `26 B`
`react-divider` Divider	`16.459 kB` `5.902 kB`	`16.505 kB` `5.925 kB`	`46 B` `23 B`
`react-image` Image	`10.78 kB` `4.264 kB`	`10.826 kB` `4.286 kB`	`46 B` `22 B`
`react-infobutton` InfoButton	`7.696 kB` `3.241 kB`	`7.742 kB` `3.265 kB`	`46 B` `24 B`
`react-input` Input	`23.762 kB` `7.706 kB`	`23.808 kB` `7.729 kB`	`46 B` `23 B`
`react-label` Label	`9.338 kB` `3.86 kB`	`9.384 kB` `3.883 kB`	`46 B` `23 B`
`react-link` Link	`11.806 kB` `4.868 kB`	`11.852 kB` `4.888 kB`	`46 B` `20 B`
`react-menu` Menu (including children components)	`116.558 kB` `35.725 kB`	`116.604 kB` `35.753 kB`	`46 B` `28 B`
`react-menu` Menu (including selectable components)	`119.627 kB` `36.246 kB`	`119.673 kB` `36.273 kB`	`46 B` `27 B`
`react-persona` Persona	`53.946 kB` `15.225 kB`	`53.992 kB` `15.25 kB`	`46 B` `25 B`
`react-popover` Popover	`102.756 kB` `31.5 kB`	`102.802 kB` `31.516 kB`	`46 B` `16 B`
`react-portal` Portal	`10.582 kB` `3.875 kB`	`10.628 kB` `3.899 kB`	`46 B` `24 B`
`react-progress` Progress	`11.302 kB` `4.549 kB`	`11.348 kB` `4.572 kB`	`46 B` `23 B`
`react-provider` FluentProvider	`15.761 kB` `5.885 kB`	`15.807 kB` `5.909 kB`	`46 B` `24 B`
`react-radio` Radio	`36.39 kB` `12.103 kB`	`36.436 kB` `12.126 kB`	`46 B` `23 B`
`react-radio` RadioGroup	`14.248 kB` `5.7 kB`	`14.294 kB` `5.723 kB`	`46 B` `23 B`
`react-select` Select	`20.846 kB` `7.346 kB`	`20.892 kB` `7.367 kB`	`46 B` `21 B`
`react-slider` Slider	`31.759 kB` `10.064 kB`	`31.805 kB` `10.085 kB`	`46 B` `21 B`
`react-spinbutton` SpinButton	`44.102 kB` `12.425 kB`	`44.228 kB` `12.454 kB`	`126 B` `29 B`
`react-spinner` Spinner	`19.977 kB` `6.438 kB`	`20.023 kB` `6.461 kB`	`46 B` `23 B`
`react-switch` Switch	`33.342 kB` `10.557 kB`	`33.388 kB` `10.578 kB`	`46 B` `21 B`
`react-text` Text - Default	`11.782 kB` `4.605 kB`	`11.828 kB` `4.627 kB`	`46 B` `22 B`
`react-text` Text - Wrappers	`15.092 kB` `5.044 kB`	`15.138 kB` `5.064 kB`	`46 B` `20 B`
`react-textarea` Textarea	`25.018 kB` `8.133 kB`	`25.064 kB` `8.158 kB`	`46 B` `25 B`
`react-tooltip` Tooltip	`41.648 kB` `14.66 kB`	`41.694 kB` `14.685 kB`	`46 B` `25 B`

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-overflow` hooks only	`11.004 kB` `4.188 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-positioning` usePositioning	`19.7 kB` `7.404 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-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against b4a703103ebdf240bdce2fd629d8e5783ebb6ad1}

fabricteam · 2022-10-04T16:19:35Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	139	128	1.09:1
AttachmentMinimalPerf.default	127	121	1.05:1
BoxMinimalPerf.default	285	272	1.05:1
LayoutMinimalPerf.default	300	285	1.05:1
AvatarMinimalPerf.default	157	151	1.04:1
FormMinimalPerf.default	318	306	1.04:1
IconMinimalPerf.default	553	531	1.04:1
AccordionMinimalPerf.default	119	116	1.03:1
CarouselMinimalPerf.default	390	380	1.03:1
GridMinimalPerf.default	279	272	1.03:1
HeaderSlotsPerf.default	634	614	1.03:1
TableManyItemsPerf.default	1585	1541	1.03:1
TooltipMinimalPerf.default	1949	1898	1.03:1
ChatWithPopoverPerf.default	309	302	1.02:1
ImageMinimalPerf.default	317	311	1.02:1
PopupMinimalPerf.default	528	520	1.02:1
RefMinimalPerf.default	178	174	1.02:1
SegmentMinimalPerf.default	287	281	1.02:1
TreeMinimalPerf.default	665	655	1.02:1
AlertMinimalPerf.default	214	212	1.01:1
CardMinimalPerf.default	437	431	1.01:1
ChatMinimalPerf.default	600	592	1.01:1
DividerMinimalPerf.default	289	285	1.01:1
DropdownMinimalPerf.default	2244	2219	1.01:1
HeaderMinimalPerf.default	293	290	1.01:1
ItemLayoutMinimalPerf.default	968	962	1.01:1
RosterPerf.default	1765	1751	1.01:1
ProviderMergeThemesPerf.default	1063	1048	1.01:1
SkeletonMinimalPerf.default	284	282	1.01:1
SliderMinimalPerf.default	1348	1339	1.01:1
SplitButtonMinimalPerf.default	3657	3620	1.01:1
TableMinimalPerf.default	329	325	1.01:1
ToolbarMinimalPerf.default	754	749	1.01:1
AnimationMinimalPerf.default	439	437	1:1
AttachmentSlotsPerf.default	922	920	1:1
ButtonOverridesMissPerf.default	1092	1094	1:1
CheckboxMinimalPerf.default	1737	1732	1:1
DialogMinimalPerf.default	642	642	1:1
EmbedMinimalPerf.default	3047	3034	1:1
LabelMinimalPerf.default	303	303	1:1
ListMinimalPerf.default	423	425	1:1
MenuMinimalPerf.default	697	697	1:1
MenuButtonMinimalPerf.default	1395	1393	1:1
PortalMinimalPerf.default	137	137	1:1
ProviderMinimalPerf.default	335	335	1:1
ReactionMinimalPerf.default	301	300	1:1
ButtonSlotsPerf.default	449	455	0.99:1
ChatDuplicateMessagesPerf.default	221	223	0.99:1
FlexMinimalPerf.default	234	236	0.99:1
InputMinimalPerf.default	944	956	0.99:1
ListCommonPerf.default	518	522	0.99:1
ListNestedPerf.default	456	461	0.99:1
LoaderMinimalPerf.default	544	547	0.99:1
TextMinimalPerf.default	279	281	0.99:1
ButtonMinimalPerf.default	128	130	0.98:1
RadioGroupMinimalPerf.default	355	364	0.98:1
StatusMinimalPerf.default	554	565	0.98:1
TextAreaMinimalPerf.default	386	394	0.98:1
CustomToolbarPrototype.default	2211	2254	0.98:1
VideoMinimalPerf.default	589	599	0.98:1
DatepickerMinimalPerf.default	4672	4857	0.96:1
DropdownManyItemsPerf.default	538	560	0.96:1
ListWith60ListItems.default	490	510	0.96:1

fabricteam · 2022-10-04T16:38:09Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1184	1208	5000
Breadcrumb	mount	2786	2758	1000
Checkbox	mount	2614	2634	5000
CheckboxBase	mount	2347	2358	5000
ChoiceGroup	mount	4186	4196	5000
ComboBox	mount	1145	1171	1000
CommandBar	mount	9220	9618	1000
ContextualMenu	mount	10139	10099	1000
DefaultButton	mount	1370	1345	5000
DetailsRow	mount	3386	3337	5000
DetailsRowFast	mount	3341	3358	5000
DetailsRowNoStyles	mount	3189	3212	5000
Dialog	mount	2958	2945	1000
DocumentCardTitle	mount	578	584	1000
Dropdown	mount	3151	3302	5000
FocusTrapZone	mount	1911	1932	5000
FocusZone	mount	1932	1908	5000
GroupedList	mount	48159	53908	2
GroupedList	virtual-rerender	23049	22886	2
GroupedList	virtual-rerender-with-unmount	83097	82231	2
GroupedListV2	mount	566	557	2
GroupedListV2	virtual-rerender	526	530	2
GroupedListV2	virtual-rerender-with-unmount	564	548	2
IconButton	mount	1789	1775	5000
Label	mount	743	749	5000
Layer	mount	4149	4137	5000
Link	mount	847	847	5000
MenuButton	mount	1605	1621	5000
MessageBar	mount	2381	2372	5000
Nav	mount	3059	3043	1000
OverflowSet	mount	1401	1406	5000
Panel	mount	2478	2493	1000
Persona	mount	1257	1262	1000
Pivot	mount	1522	1521	1000
PrimaryButton	mount	1482	1472	5000
Rating	mount	6995	6982	5000
SearchBox	mount	1486	1469	5000
Shimmer	mount	2925	2866	5000
Slider	mount	2085	2070	5000
SpinButton	mount	4237	4228	5000
Spinner	mount	838	827	5000
SplitButton	mount	2793	2799	5000
Stack	mount	892	886	5000
StackWithIntrinsicChildren	mount	2251	2226	5000
StackWithTextChildren	mount	4930	4932	5000
SwatchColorPicker	mount	10336	9443	5000
TagPicker	mount	2318	2368	5000
TeachingBubble	mount	75005	75119	5000
Text	mount	829	815	5000
TextField	mount	1529	1534	5000
ThemeProvider	mount	1432	1444	5000
ThemeProvider	virtual-rerender	1141	1140	5000
ThemeProvider	virtual-rerender-with-unmount	1997	2009	5000
Toggle	mount	1126	1133	5000
buttonNative	mount	532	530	5000

spmonahan

Looks good. I approved the SpinButton changes in Screener

layershifter · 2022-10-10T15:26:20Z

/azp run

azure-pipelines · 2022-10-10T15:26:40Z

Azure Pipelines successfully started running 3 pipeline(s).

* master: fix: Menu trigger should be focused when menu is closed with keyboard (microsoft#25165) fix(codemods): Do not fail on empty configMod config (microsoft#25148) fix: Field should have block layout, not inline (microsoft#25126) chore: Update Griffel to latest version (microsoft#25075)

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

github-actions Bot added this to the October Project Cycle Q4 2022 milestone Oct 4, 2022

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

layershifter mentioned this pull request Oct 5, 2022

fix: handle empty strings in mergeClasses() microsoft/griffel#248

Merged

layershifter force-pushed the chore/bump-griffel-2 branch from ddcb438 to 46ea42b Compare October 5, 2022 14:42

layershifter marked this pull request as ready for review October 5, 2022 16:29

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

spmonahan approved these changes Oct 5, 2022

View reviewed changes

khmakoto approved these changes Oct 5, 2022

View reviewed changes

bsunderhus approved these changes Oct 6, 2022

View reviewed changes

Hotell approved these changes Oct 6, 2022

View reviewed changes

layershifter force-pushed the chore/bump-griffel-2 branch from 46ea42b to 779fc59 Compare October 6, 2022 14:54

ling1726 approved these changes Oct 7, 2022

View reviewed changes

micahgodbolt approved these changes Oct 10, 2022

View reviewed changes

layershifter force-pushed the chore/bump-griffel-2 branch from 779fc59 to 6a76d7e Compare October 10, 2022 16:37

layershifter enabled auto-merge (squash) October 10, 2022 16:37

chore: Update Griffel to latest version

626770c

layershifter force-pushed the chore/bump-griffel-2 branch from 6a76d7e to 626770c Compare October 10, 2022 16:42

layershifter merged commit 1a527d4 into microsoft:master Oct 10, 2022

layershifter deleted the chore/bump-griffel-2 branch October 10, 2022 18:01

layershifter mentioned this pull request Oct 13, 2022

chore: Update Griffel to latest version #25212

Merged

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

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

33730ec

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: Update Griffel to latest version#25075

chore: Update Griffel to latest version#25075
layershifter merged 1 commit into
microsoft:masterfrom
layershifter:chore/bump-griffel-2

layershifter commented Oct 4, 2022 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Oct 4, 2022 •

edited

Loading

Uh oh!

size-auditor Bot commented Oct 4, 2022 •

edited

Loading

Uh oh!

fabricteam commented Oct 4, 2022 •

edited

Loading

Uh oh!

fabricteam commented Oct 4, 2022 •

edited

Loading

Uh oh!

fabricteam commented Oct 4, 2022 •

edited

Loading

Uh oh!

fabricteam commented Oct 4, 2022 •

edited

Loading

Uh oh!

spmonahan left a comment •

edited

Loading

Uh oh!

layershifter commented Oct 10, 2022

Uh oh!

azure-pipelines Bot commented Oct 10, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

Uh oh!

Conversation

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

Uh oh!

Uh oh!

size-auditor Bot commented Oct 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 Oct 4, 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 4, 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 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!

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

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

spmonahan left a comment • 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!

layershifter commented Oct 10, 2022

Uh oh!

azure-pipelines Bot commented Oct 10, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

layershifter commented Oct 4, 2022 •

edited

Loading

codesandbox-ci Bot commented Oct 4, 2022 •

edited

Loading

size-auditor Bot commented Oct 4, 2022 •

edited

Loading

fabricteam commented Oct 4, 2022 •

edited

Loading

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

fabricteam commented Oct 4, 2022 •

edited

Loading

fabricteam commented Oct 4, 2022 •

edited

Loading

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

fabricteam commented Oct 4, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

spmonahan left a comment •

edited

Loading