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.

Sign up for GitHub

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

Jump to bottom

chore: Update Griffel to latest version #25075

Merged
merged 1 commit into from Oct 10, 2022
Merged

chore: Update Griffel to latest version #25075

merged 1 commit into from Oct 10, 2022

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Oct 4, 2022 •
edited

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).

@github-actions github-actions bot added this to the October Project Cycle Q4 2022 milestone Oct 4, 2022
@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 4, 2022 •
edited

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
Copy link

size-auditor bot commented Oct 4, 2022 •
edited

Asset size changes

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

Baseline commit: b4a703103ebdf240bdce2fd629d8e5783ebb6ad1 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 4, 2022 •
edited

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
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
Copy link
Collaborator

fabricteam commented Oct 4, 2022 •
edited

📊 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
Copy link
Collaborator

fabricteam commented Oct 4, 2022 •
edited

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

@layershifter layershifter added the Ready for VR Used to trigger screener checks for PRs label Oct 4, 2022
@fabricteam
Copy link
Collaborator

fabricteam commented Oct 4, 2022 •
edited

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
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

@layershifter layershifter mentioned this pull request Oct 5, 2022
Merged
@layershifter layershifter marked this pull request as ready for review October 5, 2022 16:29
spmonahan
spmonahan approved these changes Oct 5, 2022
View reviewed changes
Copy link
Contributor

@spmonahan spmonahan left a comment •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. I approved the SpinButton changes in Screener

@layershifter
Copy link
Member Author

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@layershifter layershifter enabled auto-merge (squash) October 10, 2022 16:37
@layershifter layershifter merged commit 1a527d4 into microsoft:master Oct 10, 2022
@layershifter layershifter deleted the chore/bump-griffel-2 branch October 10, 2022 18:01
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Oct 11, 2022
@marcosmoura
Merge branch 'master' into marcosmoura/feat/selectable-cards
459453b 
* 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)
@layershifter layershifter mentioned this pull request Oct 13, 2022
Merged
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
@layershifter @NotWoods
chore: Update Griffel to latest version (microsoft#25075)
33730ec
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Hotell Hotell Hotell approved these changes

@micahgodbolt micahgodbolt micahgodbolt approved these changes

@bsunderhus bsunderhus bsunderhus approved these changes

@khmakoto khmakoto khmakoto approved these changes

@ling1726 ling1726 ling1726 approved these changes

@spmonahan spmonahan spmonahan approved these changes

@sopranopillow sopranopillow Awaiting requested review from sopranopillow sopranopillow is a code owner

@tomi-msft tomi-msft Awaiting requested review from tomi-msft tomi-msft is a code owner

@chpalac chpalac Awaiting requested review from chpalac chpalac is a code owner

@behowell behowell Awaiting requested review from behowell behowell is a code owner

@GeoffCoxMSFT GeoffCoxMSFT Awaiting requested review from GeoffCoxMSFT GeoffCoxMSFT is a code owner

@smhigley smhigley Awaiting requested review from smhigley smhigley is a code owner

Assignees

@miroslavstastny miroslavstastny

Labels
Ready for VR Used to trigger screener checks for PRs
Projects
None yet
Milestone
October Project Cycle Q4 2022
Development

Successfully merging this pull request may close these issues.

None yet
9 participants
@layershifter @fabricteam @Hotell @micahgodbolt @bsunderhus @khmakoto @ling1726 @spmonahan @miroslavstastny