Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Update Griffel to latest version #28684

Merged
merged 1 commit into from Aug 8, 2023

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Jul 31, 2023

This PR bumps Griffel dependencies to fix #28552, get better types (microsoft/griffel#70), improved React 18 support (microsoft/griffel#72) and reduced bundle size (microsoft/griffel#388).

Related Issue(s)

Fixes #28552

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 31, 2023

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 2060810:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration
awesome-napier-lqkslq Issue #28552

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 31, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender-with-unmount 81 73 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 618 585 5000
Button mount 305 309 5000
Field mount 1079 1087 5000
FluentProvider mount 682 659 5000
FluentProviderWithTheme mount 75 84 10
FluentProviderWithTheme virtual-rerender 73 74 10
FluentProviderWithTheme virtual-rerender-with-unmount 81 73 10 Possible regression
InfoButton mount 16 17 5000
MakeStyles mount 868 870 50000
Persona mount 1704 1676 5000
SpinButton mount 1335 1378 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 31, 2023

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 98 80 1.23:1
TreeWith60ListItems.default 90 82 1.1:1
SegmentMinimalPerf.default 211 197 1.07:1
AttachmentMinimalPerf.default 86 81 1.06:1
ChatWithPopoverPerf.default 202 190 1.06:1
CarouselMinimalPerf.default 266 253 1.05:1
TooltipMinimalPerf.default 1304 1240 1.05:1
CheckboxMinimalPerf.default 1177 1128 1.04:1
GridMinimalPerf.default 191 183 1.04:1
HeaderMinimalPerf.default 210 202 1.04:1
CardMinimalPerf.default 307 297 1.03:1
ListMinimalPerf.default 308 298 1.03:1
ListNestedPerf.default 316 308 1.03:1
MenuButtonMinimalPerf.default 970 938 1.03:1
TableManyItemsPerf.default 1132 1100 1.03:1
BoxMinimalPerf.default 194 191 1.02:1
InputMinimalPerf.default 543 534 1.02:1
ListCommonPerf.default 392 383 1.02:1
ProviderMergeThemesPerf.default 671 660 1.02:1
SplitButtonMinimalPerf.default 2289 2251 1.02:1
AnimationMinimalPerf.default 300 298 1.01:1
DatepickerMinimalPerf.default 3728 3673 1.01:1
DialogMinimalPerf.default 438 434 1.01:1
HeaderSlotsPerf.default 464 459 1.01:1
PopupMinimalPerf.default 355 351 1.01:1
SliderMinimalPerf.default 730 726 1.01:1
ToolbarMinimalPerf.default 532 526 1.01:1
AttachmentSlotsPerf.default 622 625 1:1
AvatarMinimalPerf.default 106 106 1:1
DividerMinimalPerf.default 201 202 1:1
EmbedMinimalPerf.default 1850 1841 1:1
ImageMinimalPerf.default 220 221 1:1
ItemLayoutMinimalPerf.default 700 700 1:1
LoaderMinimalPerf.default 190 190 1:1
RadioGroupMinimalPerf.default 258 257 1:1
SkeletonMinimalPerf.default 202 202 1:1
TableMinimalPerf.default 236 236 1:1
CustomToolbarPrototype.default 1456 1456 1:1
AccordionMinimalPerf.default 78 79 0.99:1
MenuMinimalPerf.default 489 495 0.99:1
RosterPerf.default 1520 1542 0.99:1
PortalMinimalPerf.default 82 83 0.99:1
ProviderMinimalPerf.default 196 197 0.99:1
ReactionMinimalPerf.default 206 209 0.99:1
IconMinimalPerf.default 388 390 0.99:1
TreeMinimalPerf.default 469 475 0.99:1
ButtonOverridesMissPerf.default 638 649 0.98:1
ChatMinimalPerf.default 441 448 0.98:1
DropdownManyItemsPerf.default 379 388 0.98:1
DropdownMinimalPerf.default 1395 1422 0.98:1
FormMinimalPerf.default 225 229 0.98:1
TextAreaMinimalPerf.default 279 286 0.98:1
ChatDuplicateMessagesPerf.default 150 155 0.97:1
FlexMinimalPerf.default 150 155 0.97:1
LabelMinimalPerf.default 221 227 0.97:1
ButtonSlotsPerf.default 299 311 0.96:1
ListWith60ListItems.default 346 359 0.96:1
RefMinimalPerf.default 107 111 0.96:1
StatusMinimalPerf.default 376 391 0.96:1
TextMinimalPerf.default 191 198 0.96:1
VideoMinimalPerf.default 423 439 0.96:1
AlertMinimalPerf.default 149 159 0.94:1
LayoutMinimalPerf.default 189 205 0.92:1

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 31, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)
88.575 kB
26.865 kB
88.454 kB
26.843 kB
-121 B
-22 B
react-alert
Alert
84.978 kB
22.064 kB
81.759 kB
21.96 kB
-3.219 kB
-104 B
react-avatar
Avatar
47.624 kB
14.483 kB
46.872 kB
14.46 kB
-752 B
-23 B
react-avatar
AvatarGroup
15.719 kB
6.334 kB
15.978 kB
6.39 kB
259 B
56 B
react-avatar
AvatarGroupItem
63.771 kB
18.971 kB
61.651 kB
18.874 kB
-2.12 kB
-97 B
react-badge
Badge
23.391 kB
7.208 kB
23.045 kB
7.213 kB
-346 B
5 B
react-badge
CounterBadge
24.298 kB
7.51 kB
23.946 kB
7.515 kB
-352 B
5 B
react-badge
PresenceBadge
22.072 kB
7.824 kB
22.002 kB
7.829 kB
-70 B
5 B
react-button
Button
39.044 kB
9.695 kB
37.001 kB
9.688 kB
-2.043 kB
-7 B
react-button
CompoundButton
46.512 kB
11.199 kB
44.35 kB
11.168 kB
-2.162 kB
-31 B
react-button
MenuButton
43.431 kB
10.959 kB
41.387 kB
10.94 kB
-2.044 kB
-19 B
react-button
SplitButton
51.628 kB
12.554 kB
49.422 kB
12.486 kB
-2.206 kB
-68 B
react-button
ToggleButton
57.473 kB
11.597 kB
54.047 kB
11.58 kB
-3.426 kB
-17 B
react-card
Card - All
89.546 kB
25.335 kB
88.197 kB
25.233 kB
-1.349 kB
-102 B
react-card
Card
83.891 kB
23.74 kB
83.039 kB
23.703 kB
-852 B
-37 B
react-card
CardFooter
9.019 kB
3.846 kB
9.2 kB
3.901 kB
181 B
55 B
react-card
CardHeader
11.492 kB
4.671 kB
11.452 kB
4.677 kB
-40 B
6 B
react-card
CardPreview
9.841 kB
4.2 kB
10.159 kB
4.277 kB
318 B
77 B
react-checkbox
Checkbox
32.997 kB
10.667 kB
32.734 kB
10.612 kB
-263 B
-55 B
react-combobox
Combobox (including child components)
87.815 kB
28.336 kB
86.937 kB
28.237 kB
-878 B
-99 B
react-combobox
Dropdown (including child components)
86.238 kB
27.953 kB
85.297 kB
27.873 kB
-941 B
-80 B
react-components
react-components: Button, FluentProvider & webLightTheme
68.555 kB
18.47 kB
66.514 kB
18.436 kB
-2.041 kB
-34 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
208.126 kB
58.048 kB
202.94 kB
57.552 kB
-5.186 kB
-496 B
react-components
react-components: FluentProvider & webLightTheme
37.573 kB
12.31 kB
37.626 kB
12.33 kB
53 B
20 B
react-datepicker-compat
DatePicker Compat
217.98 kB
58.129 kB
206.915 kB
57.343 kB
-11.065 kB
-786 B
react-dialog
Dialog (including children components)
87.131 kB
26.363 kB
86.6 kB
26.306 kB
-531 B
-57 B
react-divider
Divider
17.181 kB
6.254 kB
16.96 kB
6.264 kB
-221 B
10 B
react-field
Field
18.001 kB
6.902 kB
18.157 kB
6.951 kB
156 B
49 B
react-image
Image
11.575 kB
4.659 kB
11.891 kB
4.743 kB
316 B
84 B
react-infobutton
InfoButton
126.524 kB
39.279 kB
125.086 kB
39.203 kB
-1.438 kB
-76 B
react-infobutton
InfoLabel
130.194 kB
40.466 kB
128.756 kB
40.382 kB
-1.438 kB
-84 B
react-input
Input
23.976 kB
7.688 kB
23.099 kB
7.643 kB
-877 B
-45 B
react-label
Label
9.967 kB
4.193 kB
10.285 kB
4.28 kB
318 B
87 B
react-link
Link
12.8 kB
5.267 kB
13.117 kB
5.357 kB
317 B
90 B
react-menu
Menu (including children components)
136.04 kB
41.462 kB
134.931 kB
41.37 kB
-1.109 kB
-92 B
react-menu
Menu (including selectable components)
138.726 kB
41.963 kB
137.617 kB
41.865 kB
-1.109 kB
-98 B
react-persona
Persona
55.256 kB
16.485 kB
53.767 kB
16.333 kB
-1.489 kB
-152 B
react-popover
Popover
115.399 kB
35.938 kB
114.439 kB
35.889 kB
-960 B
-49 B
react-portal
Portal
11.935 kB
4.421 kB
12.255 kB
4.504 kB
320 B
83 B
react-progress
ProgressBar
13.637 kB
5.406 kB
13.58 kB
5.445 kB
-57 B
39 B
react-provider
FluentProvider
18.141 kB
6.75 kB
18.194 kB
6.767 kB
53 B
17 B
react-radio
Radio
26.815 kB
8.608 kB
26.479 kB
8.568 kB
-336 B
-40 B
react-radio
RadioGroup
11.37 kB
4.766 kB
11.484 kB
4.791 kB
114 B
25 B
react-select
Select
24.71 kB
8.633 kB
24.461 kB
8.613 kB
-249 B
-20 B
react-slider
Slider
34.539 kB
11.053 kB
33.996 kB
10.999 kB
-543 B
-54 B
react-spinbutton
SpinButton
33.39 kB
10.219 kB
32.543 kB
10.171 kB
-847 B
-48 B
react-spinner
Spinner
21.614 kB
7.094 kB
19.439 kB
6.974 kB
-2.175 kB
-120 B
react-switch
Switch
29.28 kB
9.203 kB
28.954 kB
9.177 kB
-326 B
-26 B
react-table
DataGrid
158.266 kB
42.453 kB
152.632 kB
42.207 kB
-5.634 kB
-246 B
react-table
Table (Primitives only)
43.838 kB
12.235 kB
39.5 kB
12.097 kB
-4.338 kB
-138 B
react-table
Table as DataGrid
132.107 kB
33.882 kB
126.086 kB
33.576 kB
-6.021 kB
-306 B
react-table
Table (Selection only)
77.481 kB
19.189 kB
71.456 kB
18.875 kB
-6.025 kB
-314 B
react-table
Table (Sort only)
76.1 kB
18.789 kB
70.075 kB
18.478 kB
-6.025 kB
-311 B
react-tags-preview
InteractionTag
34.304 kB
9.196 kB
33.651 kB
9.138 kB
-653 B
-58 B
react-tags-preview
Tag
25.83 kB
8.421 kB
25.29 kB
8.358 kB
-540 B
-63 B
react-tags-preview
TagGroup
69.426 kB
20.423 kB
69.521 kB
20.46 kB
95 B
37 B
react-text
Text - Default
12.589 kB
5.013 kB
12.905 kB
5.1 kB
316 B
87 B
react-text
Text - Wrappers
15.745 kB
5.321 kB
16.077 kB
5.408 kB
332 B
87 B
react-textarea
Textarea
27.35 kB
9.017 kB
27.164 kB
9.01 kB
-186 B
-7 B
react-toast
Toast (including Toaster)
88.11 kB
26.02 kB
87.552 kB
26.004 kB
-558 B
-16 B
react-tooltip
Tooltip
47.99 kB
16.778 kB
47.778 kB
16.805 kB
-212 B
27 B
react-tree
FlatTree
131.948 kB
37.419 kB
129.668 kB
37.185 kB
-2.28 kB
-234 B
react-tree
PersonaFlatTree
133.299 kB
37.668 kB
130.691 kB
37.369 kB
-2.608 kB
-299 B
react-tree
PersonaTree
130.192 kB
36.563 kB
127.586 kB
36.262 kB
-2.606 kB
-301 B
react-tree
Tree
128.842 kB
36.311 kB
126.563 kB
36.063 kB
-2.279 kB
-248 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
330 B
global-context
createContextSelector
537 B
342 B
priority-overflow
createOverflowManager
4.324 kB
1.771 kB
react-overflow
hooks only
12.581 kB
4.73 kB
react-portal-compat
PortalCompatProvider
6.48 kB
2.203 kB
react-positioning
usePositioning
25.111 kB
9.1 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
34.588 kB
7.286 kB
react-theme
Teams: Light theme
19.259 kB
5.477 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 90b6ff33ce9719a1e07487f05c6d38e414b6cc40

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 31, 2023

🕵 FluentUIV0 No visual regressions between this PR and main

@size-auditor
Copy link

size-auditor bot commented Jul 31, 2023

Asset size changes

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

Baseline commit: 90b6ff33ce9719a1e07487f05c6d38e414b6cc40 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 31, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 31, 2023

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 619 633 5000
Breadcrumb mount 1687 1644 1000
Checkbox mount 1654 1705 5000
CheckboxBase mount 1487 1491 5000
ChoiceGroup mount 2944 2948 5000
ComboBox mount 679 653 1000
CommandBar mount 6167 6240 1000
ContextualMenu mount 13313 13112 1000
DefaultButton mount 734 730 5000
DetailsRow mount 2164 2192 5000
DetailsRowFast mount 2187 2151 5000
DetailsRowNoStyles mount 2000 2012 5000
Dialog mount 2774 2660 1000
DocumentCardTitle mount 230 236 1000
Dropdown mount 2044 1995 5000
FocusTrapZone mount 1117 1108 5000
FocusZone mount 1081 1044 5000
GroupedList mount 41022 41274 2
GroupedList virtual-rerender 19719 19846 2
GroupedList virtual-rerender-with-unmount 50370 50337 2
GroupedListV2 mount 225 223 2
GroupedListV2 virtual-rerender 212 206 2
GroupedListV2 virtual-rerender-with-unmount 233 221 2
IconButton mount 1039 1064 5000
Label mount 334 350 5000
Layer mount 2704 2675 5000
Link mount 385 378 5000
MenuButton mount 921 968 5000
MessageBar mount 21301 21283 5000
Nav mount 1954 1890 1000
OverflowSet mount 762 767 5000
Panel mount 1776 1798 1000
Persona mount 746 717 1000
Pivot mount 880 862 1000
PrimaryButton mount 834 857 5000
Rating mount 4525 4621 5000
SearchBox mount 889 920 5000
Shimmer mount 1850 1862 5000
Slider mount 1306 1299 5000
SpinButton mount 2940 2900 5000
Spinner mount 387 386 5000
SplitButton mount 1779 1792 5000
Stack mount 402 432 5000
StackWithIntrinsicChildren mount 864 876 5000
StackWithTextChildren mount 2610 2591 5000
SwatchColorPicker mount 6008 5965 5000
TagPicker mount 1448 1450 5000
Text mount 373 383 5000
TextField mount 947 907 5000
ThemeProvider mount 812 811 5000
ThemeProvider virtual-rerender 574 594 5000
ThemeProvider virtual-rerender-with-unmount 1286 1262 5000
Toggle mount 594 608 5000
buttonNative mount 196 190 5000

@layershifter layershifter marked this pull request as ready for review July 31, 2023 13:49
@layershifter layershifter merged commit b090c03 into microsoft:master Aug 8, 2023
26 checks passed
@layershifter layershifter deleted the chore/bump-griffel branch August 8, 2023 17:08
@layershifter
Copy link
Member Author

Force merged as approvals from all team members are present.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: React-components Button high contrast styles too easily overridden by custom styles
7 participants