chore: Update Griffel to latest version #26045

layershifter · 2022-12-20T12:09:15Z

New Behavior

All Griffel packages are up to date.

Lands following fixes:

Improvements:

feat: expose "styleElementAttributes" on GriffelRenderer griffel#298 (needed for [Bug]: styleElementAttributes doesn't apply to fui-FluentProvider style element #25421)

size-auditor · 2022-12-20T12:21:48Z

Asset size changes

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

Baseline commit: 5b9b1f47e2dc20ac0479cde325bf1827914977db (build)

codesandbox-ci · 2022-12-20T12:25:07Z

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 69893f6:

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

fabricteam · 2022-12-20T12:28:38Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1314	1303	5000
Button	mount	935	934	5000
FluentProvider	mount	1583	1586	5000
FluentProviderWithTheme	mount	633	637	10
FluentProviderWithTheme	virtual-rerender	601	595	10
FluentProviderWithTheme	virtual-rerender-with-unmount	634	632	10
MakeStyles	mount	1943	1900	50000
Persona	mount	3025	2998	5000
SpinButton	mount	2550	2574	5000

fabricteam · 2022-12-20T12:29:19Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`79.673 kB` `24.57 kB`	`80.097 kB` `24.712 kB`	`424 B` `142 B`
`react-alert` Alert	`84.15 kB` `21.28 kB`	`84.612 kB` `21.445 kB`	`462 B` `165 B`
`react-avatar` Avatar	`51.083 kB` `14.289 kB`	`51.515 kB` `14.449 kB`	`432 B` `160 B`
`react-avatar` AvatarGroup	`15.006 kB` `6.009 kB`	`15.42 kB` `6.167 kB`	`414 B` `158 B`
`react-avatar` AvatarGroupItem	`67.313 kB` `18.585 kB`	`67.733 kB` `18.746 kB`	`420 B` `161 B`
`react-badge` Badge	`23.357 kB` `7.361 kB`	`23.78 kB` `7.542 kB`	`423 B` `181 B`
`react-badge` CounterBadge	`24.247 kB` `7.643 kB`	`24.67 kB` `7.825 kB`	`423 B` `182 B`
`react-badge` PresenceBadge	`24.001 kB` `7.049 kB`	`24.437 kB` `7.189 kB`	`436 B` `140 B`
`react-button` Button	`32.923 kB` `8.61 kB`	`33.354 kB` `8.779 kB`	`431 B` `169 B`
`react-button` CompoundButton	`39.953 kB` `9.933 kB`	`40.384 kB` `10.127 kB`	`431 B` `194 B`
`react-button` MenuButton	`37.611 kB` `9.942 kB`	`38.043 kB` `10.096 kB`	`432 B` `154 B`
`react-button` SplitButton	`45.057 kB` `11.323 kB`	`45.488 kB` `11.501 kB`	`431 B` `178 B`
`react-button` ToggleButton	`48.753 kB` `10.715 kB`	`49.184 kB` `10.875 kB`	`431 B` `160 B`
`react-card` Card - All	`77.54 kB` `22.326 kB`	`77.975 kB` `22.496 kB`	`435 B` `170 B`
`react-card` Card	`72.484 kB` `20.915 kB`	`72.92 kB` `21.108 kB`	`436 B` `193 B`
`react-card` CardFooter	`8.617 kB` `3.62 kB`	`9.04 kB` `3.807 kB`	`423 B` `187 B`
`react-card` CardHeader	`10.382 kB` `4.258 kB`	`10.805 kB` `4.443 kB`	`423 B` `185 B`
`react-card` CardPreview	`9.424 kB` `3.97 kB`	`9.847 kB` `4.159 kB`	`423 B` `189 B`
`react-checkbox` Checkbox	`28.65 kB` `9.09 kB`	`29.081 kB` `9.258 kB`	`431 B` `168 B`
`react-checkbox` CheckboxField	`35.067 kB` `10.89 kB`	`35.51 kB` `11.026 kB`	`443 B` `136 B`
`react-combobox` Combobox (including child components)	`79.532 kB` `25.434 kB`	`79.959 kB` `25.572 kB`	`427 B` `138 B`
`react-combobox` ComboboxField	`76.735 kB` `25.396 kB`	`77.155 kB` `25.536 kB`	`420 B` `140 B`
`react-combobox` Dropdown (including child components)	`78.78 kB` `25.373 kB`	`79.205 kB` `25.496 kB`	`425 B` `123 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`59.381 kB` `16.465 kB`	`59.812 kB` `16.62 kB`	`431 B` `155 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`188.355 kB` `52.891 kB`	`188.779 kB` `53.034 kB`	`424 B` `143 B`
`react-components` react-components: FluentProvider & webLightTheme	`33.843 kB` `11.129 kB`	`34.276 kB` `11.309 kB`	`433 B` `180 B`
`react-dialog` Dialog (including children components)	`83.035 kB` `24.76 kB`	`83.459 kB` `24.913 kB`	`424 B` `153 B`
`react-divider` Divider	`16.515 kB` `5.921 kB`	`16.938 kB` `6.103 kB`	`423 B` `182 B`
`react-image` Image	`10.836 kB` `4.283 kB`	`11.259 kB` `4.473 kB`	`423 B` `190 B`
`react-infobutton` InfoButton	`119.2 kB` `35.738 kB`	`119.624 kB` `35.891 kB`	`424 B` `153 B`
`react-input` Input	`24.194 kB` `7.89 kB`	`24.617 kB` `8.059 kB`	`423 B` `169 B`
`react-input` InputField	`33.408 kB` `10.584 kB`	`33.839 kB` `10.73 kB`	`431 B` `146 B`
`react-label` Label	`9.394 kB` `3.88 kB`	`9.817 kB` `4.067 kB`	`423 B` `187 B`
`react-link` Link	`11.862 kB` `4.885 kB`	`12.285 kB` `5.063 kB`	`423 B` `178 B`
`react-menu` Menu (including children components)	`119.068 kB` `36.76 kB`	`119.492 kB` `36.913 kB`	`424 B` `153 B`
`react-menu` Menu (including selectable components)	`122.137 kB` `37.287 kB`	`122.561 kB` `37.436 kB`	`424 B` `149 B`
`react-persona` Persona	`57.12 kB` `15.945 kB`	`57.552 kB` `16.102 kB`	`432 B` `157 B`
`react-popover` Popover	`104.936 kB` `32.304 kB`	`105.36 kB` `32.451 kB`	`424 B` `147 B`
`react-portal` Portal	`10.697 kB` `3.938 kB`	`11.12 kB` `4.096 kB`	`423 B` `158 B`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`	`6.069 kB` `2.053 kB`	`212 B` `75 B`
`react-progress` ProgressBar	`13.155 kB` `5.048 kB`	`13.578 kB` `5.235 kB`	`423 B` `187 B`
`react-progress` ProgressField	`22.461 kB` `7.919 kB`	`22.892 kB` `8.057 kB`	`431 B` `138 B`
`react-provider` FluentProvider	`15.91 kB` `5.931 kB`	`16.343 kB` `6.11 kB`	`433 B` `179 B`
`react-radio` Radio	`31.827 kB` `10.316 kB`	`32.247 kB` `10.468 kB`	`420 B` `152 B`
`react-radio` RadioGroup	`14.304 kB` `5.72 kB`	`14.718 kB` `5.886 kB`	`414 B` `166 B`
`react-radio` RadioGroupField	`23.604 kB` `8.65 kB`	`24.024 kB` `8.796 kB`	`420 B` `146 B`
`react-select` Select	`23.474 kB` `8.017 kB`	`23.902 kB` `8.187 kB`	`428 B` `170 B`
`react-select` SelectField	`31.731 kB` `10.256 kB`	`32.162 kB` `10.406 kB`	`431 B` `150 B`
`react-slider` Slider	`32.091 kB` `10.183 kB`	`32.52 kB` `10.357 kB`	`429 B` `174 B`
`react-slider` SliderField	`41.113 kB` `12.903 kB`	`41.544 kB` `13.046 kB`	`431 B` `143 B`
`react-spinbutton` SpinButton	`44.502 kB` `12.812 kB`	`44.933 kB` `12.97 kB`	`431 B` `158 B`
`react-spinbutton` SpinButtonField	`52.784 kB` `15.085 kB`	`53.229 kB` `15.232 kB`	`445 B` `147 B`
`react-spinner` Spinner	`20.013 kB` `6.446 kB`	`20.445 kB` `6.621 kB`	`432 B` `175 B`
`react-switch` Switch	`33.427 kB` `10.581 kB`	`33.865 kB` `10.735 kB`	`438 B` `154 B`
`react-switch` SwitchField	`39.745 kB` `12.362 kB`	`40.176 kB` `12.514 kB`	`431 B` `152 B`
`react-text` Text - Default	`11.838 kB` `4.625 kB`	`12.261 kB` `4.819 kB`	`423 B` `194 B`
`react-text` Text - Wrappers	`15.148 kB` `5.06 kB`	`15.571 kB` `5.23 kB`	`423 B` `170 B`
`react-textarea` Textarea	`25.733 kB` `8.328 kB`	`26.156 kB` `8.508 kB`	`423 B` `180 B`
`react-textarea` TextareaField	`34.949 kB` `11.012 kB`	`35.38 kB` `11.157 kB`	`431 B` `145 B`
`react-tooltip` Tooltip	`42.969 kB` `15.016 kB`	`43.405 kB` `15.166 kB`	`436 B` `150 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-positioning` usePositioning	`20.694 kB` `7.691 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-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 5b9b1f47e2dc20ac0479cde325bf1827914977db}

fabricteam · 2022-12-20T12:30:40Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2022-12-20T12:34:12Z

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

⚠️ No perf measurements available

fabricteam · 2022-12-20T12:35:24Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2022-12-20T12:40:57Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1195	1203	5000
Breadcrumb	mount	2805	2813	1000
Checkbox	mount	2658	2651	5000
CheckboxBase	mount	2362	2371	5000
ChoiceGroup	mount	4310	4275	5000
ComboBox	mount	1168	1179	1000
CommandBar	mount	9260	9222	1000
ContextualMenu	mount	10190	10203	1000
DefaultButton	mount	1347	1354	5000
DetailsRow	mount	3403	3340	5000
DetailsRowFast	mount	3376	3364	5000
DetailsRowNoStyles	mount	3243	3250	5000
Dialog	mount	2919	2937	1000
DocumentCardTitle	mount	585	578	1000
Dropdown	mount	3192	3183	5000
FocusTrapZone	mount	1953	1980	5000
FocusZone	mount	1909	1922	5000
GroupedList	mount	1829	2024	2
GroupedList	virtual-rerender	1105	1098	2
GroupedList	virtual-rerender-with-unmount	1598	1601	2
GroupedListV2	mount	572	559	2
GroupedListV2	virtual-rerender	566	550	2
GroupedListV2	virtual-rerender-with-unmount	565	564	2
IconButton	mount	1799	1794	5000
Label	mount	760	756	5000
Layer	mount	4187	4192	5000
Link	mount	851	870	5000
MenuButton	mount	1620	1586	5000
MessageBar	mount	2321	2283	5000
Nav	mount	3087	3040	1000
OverflowSet	mount	1407	1419	5000
Panel	mount	2502	2481	1000
Persona	mount	1295	1281	1000
Pivot	mount	1522	1533	1000
PrimaryButton	mount	1495	1490	5000
Rating	mount	6920	6924	5000
SearchBox	mount	1497	1486	5000
Shimmer	mount	2924	2955	5000
Slider	mount	2113	2129	5000
SpinButton	mount	4264	4499	5000
Spinner	mount	825	820	5000
SplitButton	mount	2856	2829	5000
Stack	mount	868	873	5000
StackWithIntrinsicChildren	mount	2261	2261	5000
StackWithTextChildren	mount	4967	4993	5000
SwatchColorPicker	mount	9559	9525	5000
TagPicker	mount	2346	2364	5000
TeachingBubble	mount	76211	74413	5000
Text	mount	826	824	5000
TextField	mount	1576	1565	5000
ThemeProvider	mount	1458	1441	5000
ThemeProvider	virtual-rerender	1161	1146	5000
ThemeProvider	virtual-rerender-with-unmount	1994	1987	5000
Toggle	mount	1157	1122	5000
buttonNative	mount	539	540	5000

fabricteam · 2022-12-20T12:45:50Z

🕵 FluentUI-v0 Open the Visual Regressions report to inspect the 1 screenshots

✅ There was 0 screenshots added, 0 screenshots removed, 1259 screenshots unchanged, 0 screenshots with different dimensions and 1 screenshots with visible difference.

unknown 1 screenshots

Image Name	Diff(in Pixels)	Image Type
Menu.Menu Example Toolbar Shorthand Teams.Clicks on the last item and opens submenu.chromium.png	378	Changed

msft-fluent-ui-bot assigned bsunderhus Dec 20, 2022

github-actions bot added this to the October Project Cycle Q4 2022 milestone Dec 20, 2022

layershifter marked this pull request as ready for review December 20, 2022 12:33

layershifter requested review from a team, GeoffCoxMSFT, sopranopillow, tomi-msft, chpalac, ling1726, behowell, khmakoto, spmonahan, micahgodbolt and smhigley as code owners December 20, 2022 12:33

ling1726 approved these changes Dec 20, 2022

View reviewed changes

tudorpopams self-requested a review December 20, 2022 13:07

TristanWatanabe approved these changes Dec 20, 2022

View reviewed changes

spmonahan approved these changes Dec 20, 2022

View reviewed changes

khmakoto approved these changes Dec 20, 2022

View reviewed changes

layershifter force-pushed the chore/bump-griffel branch from 4806d97 to 4d4f0db Compare December 21, 2022 09:34

chore: Update Griffel to latest version

69893f6

layershifter force-pushed the chore/bump-griffel branch from 4d4f0db to 69893f6 Compare January 3, 2023 09:53

layershifter merged commit 2c38f1e into microsoft:master Jan 3, 2023

layershifter deleted the chore/bump-griffel branch January 3, 2023 12:38

q1b pushed a commit to q1b/fluentui that referenced this pull request Jan 24, 2023

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

cd992ba

Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023

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

ef5ebf2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Update Griffel to latest version #26045

chore: Update Griffel to latest version #26045

layershifter commented Dec 20, 2022

size-auditor bot commented Dec 20, 2022 •

edited

Loading

codesandbox-ci bot commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022

fabricteam commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

chore: Update Griffel to latest version #26045

chore: Update Griffel to latest version #26045

Conversation

layershifter commented Dec 20, 2022

New Behavior

size-auditor bot commented Dec 20, 2022 • edited Loading

Asset size changes

codesandbox-ci bot commented Dec 20, 2022 • edited Loading

fabricteam commented Dec 20, 2022 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Dec 20, 2022 • edited Loading

📊 Bundle size report

fabricteam commented Dec 20, 2022 • edited Loading

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam commented Dec 20, 2022

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Dec 20, 2022 • edited Loading

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam commented Dec 20, 2022 • edited Loading

Perf Analysis (@fluentui/react)

fabricteam commented Dec 20, 2022 • edited Loading

🕵 FluentUI-v0 Open the Visual Regressions report to inspect the 1 screenshots

size-auditor bot commented Dec 20, 2022 •

edited

Loading

codesandbox-ci bot commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

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

fabricteam commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

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

fabricteam commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Dec 20, 2022 •

edited

Loading