Skip to content

chore: bump @babel and @griffel webpack/babel to latest#30694

Closed
Hotell wants to merge 1 commit intomicrosoft:masterfrom
Hotell:deps/bump-griffel
Closed

chore: bump @babel and @griffel webpack/babel to latest#30694
Hotell wants to merge 1 commit intomicrosoft:masterfrom
Hotell:deps/bump-griffel

Conversation

@Hotell
Copy link
Contributor

@Hotell Hotell commented Mar 4, 2024 •
edited
Loading

Previous Behavior

New Behavior

see PR title

NOTE:

🚨 this PR reveals Griffel Breaking Change on type-level surface.

Repro:

yarn workspace @fluentui/react-positioning type-check

src/createArrowStyles.ts:93:34 - error TS2769: No overload matches this call.
  Overload 1 of 6, '(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderBottomStyle', gave the following error.
    Argument of type 'BorderBottomWidth<GriffelStylesCSSValue> | readonly BorderBottomWidth<GriffelStylesCSSValue>[]' is not assignable to parameter of type 'BorderWidthInput'.
      Type 'readonly BorderBottomWidth<GriffelStylesCSSValue>[]' is not assignable to type 'BorderWidthInput'.
        The type 'readonly BorderBottomWidth<GriffelStylesCSSValue>[]' is 'readonly' and cannot be assigned to the mutable type 'BorderWidth<GriffelStylesCSSValue>[]'.
  Overload 2 of 6, '(style: BorderStyleInput, width: BorderWidthInput, color: BorderColorInput): BorderBottomStyle', gave the following error.
    Argument of type 'BorderBottomWidth<GriffelStylesCSSValue> | readonly BorderBottomWidth<GriffelStylesCSSValue>[]' is not assignable to parameter of type 'BorderStyleInput'.
      Type '0' is not assignable to type 'BorderStyleInput'.

93       ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
                                    ~~~~~~~~~~~

Related Issue(s)

@github-actions github-actions bot added this to the March Project Cycle Q1 2024 milestone Mar 4, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Mar 4, 2024 •
edited
Loading

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
keyboard-key
keyboard-key package		 3.746 kB
1.928 kB
priority-overflow
createOverflowManager		 4.447 kB
1.853 kB
react-theme
Single theme token import		 69 B
89 B
react-theme
Teams: all themes		 35.666 kB
7.453 kB
react-theme
Teams: Light theme		 19.642 kB
5.549 kB
react-utilities
SSRProvider		 180 B
160 B
🤖 This report was generated against 7583dbf86702e301c2c899a9f8626c750bc3193d

@Hotell Hotell force-pushed the deps/bump-griffel branch from e3256dc to e49140e Compare March 4, 2024 10:52
@Hotell Hotell mentioned this pull request Mar 4, 2024
Closed
@fabricteam
Copy link
Collaborator

fabricteam commented Mar 4, 2024

Perf Analysis (@fluentui/react-components)

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

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 649 609 5000
Button mount 300 301 5000
Field mount 1121 1119 5000
FluentProvider mount 696 707 5000
FluentProviderWithTheme mount 74 81 10
FluentProviderWithTheme virtual-rerender 64 63 10
FluentProviderWithTheme virtual-rerender-with-unmount 78 70 10 Possible regression
MakeStyles mount 848 862 50000
Persona mount 1776 1771 5000
SpinButton mount 1360 1393 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 4, 2024

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 92 80 1.15:1
ButtonMinimalPerf.default 93 82 1.13:1
AttachmentMinimalPerf.default 88 80 1.1:1
CarouselMinimalPerf.default 275 250 1.1:1
ListCommonPerf.default 402 368 1.09:1
RefMinimalPerf.default 116 106 1.09:1
SkeletonMinimalPerf.default 213 196 1.09:1
FlexMinimalPerf.default 166 154 1.08:1
HeaderMinimalPerf.default 212 199 1.07:1
ChatDuplicateMessagesPerf.default 159 150 1.06:1
LoaderMinimalPerf.default 198 186 1.06:1
TextMinimalPerf.default 203 191 1.06:1
ProviderMinimalPerf.default 205 195 1.05:1
TreeMinimalPerf.default 497 472 1.05:1
AttachmentSlotsPerf.default 637 615 1.04:1
TableMinimalPerf.default 234 226 1.04:1
TreeWith60ListItems.default 85 82 1.04:1
AvatarMinimalPerf.default 102 99 1.03:1
BoxMinimalPerf.default 195 189 1.03:1
ButtonOverridesMissPerf.default 652 634 1.03:1
DividerMinimalPerf.default 201 196 1.03:1
GridMinimalPerf.default 193 187 1.03:1
PopupMinimalPerf.default 356 347 1.03:1
CheckboxMinimalPerf.default 1159 1134 1.02:1
InputMinimalPerf.default 532 524 1.02:1
ProviderMergeThemesPerf.default 653 642 1.02:1
SegmentMinimalPerf.default 193 190 1.02:1
StatusMinimalPerf.default 393 384 1.02:1
DropdownManyItemsPerf.default 395 393 1.01:1
LayoutMinimalPerf.default 197 195 1.01:1
ListMinimalPerf.default 315 313 1.01:1
ListWith60ListItems.default 376 373 1.01:1
RadioGroupMinimalPerf.default 271 267 1.01:1
SplitButtonMinimalPerf.default 2237 2225 1.01:1
TableManyItemsPerf.default 1097 1088 1.01:1
CustomToolbarPrototype.default 1482 1465 1.01:1
ToolbarMinimalPerf.default 538 535 1.01:1
AccordionMinimalPerf.default 92 92 1:1
DatepickerMinimalPerf.default 3524 3521 1:1
DialogMinimalPerf.default 443 443 1:1
ItemLayoutMinimalPerf.default 707 704 1:1
MenuButtonMinimalPerf.default 943 941 1:1
ReactionMinimalPerf.default 214 214 1:1
AlertMinimalPerf.default 161 162 0.99:1
EmbedMinimalPerf.default 1856 1883 0.99:1
ImageMinimalPerf.default 219 222 0.99:1
VideoMinimalPerf.default 428 432 0.99:1
AnimationMinimalPerf.default 293 299 0.98:1
CardMinimalPerf.default 300 307 0.98:1
ChatMinimalPerf.default 434 441 0.98:1
DropdownMinimalPerf.default 1416 1446 0.98:1
HeaderSlotsPerf.default 439 447 0.98:1
ListNestedPerf.default 311 317 0.98:1
RosterPerf.default 1558 1583 0.98:1
SliderMinimalPerf.default 722 734 0.98:1
IconMinimalPerf.default 383 392 0.98:1
FormMinimalPerf.default 221 228 0.97:1
MenuMinimalPerf.default 497 511 0.97:1
TextAreaMinimalPerf.default 281 291 0.97:1
TooltipMinimalPerf.default 1234 1280 0.96:1
LabelMinimalPerf.default 211 221 0.95:1
ButtonSlotsPerf.default 302 323 0.93:1
ChatWithPopoverPerf.default 186 204 0.91:1

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 4, 2024

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 4, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 4, 2024

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 4, 2024

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 639 626 5000
Breadcrumb mount 1661 1666 1000
Checkbox mount 1708 1703 5000
CheckboxBase mount 1487 1468 5000
ChoiceGroup mount 3008 2978 5000
ComboBox mount 665 669 1000
CommandBar mount 6191 6252 1000
ContextualMenu mount 12005 11814 1000
DefaultButton mount 751 771 5000
DetailsRow mount 2174 2172 5000
DetailsRowFast mount 2211 2266 5000
DetailsRowNoStyles mount 2054 2003 5000
Dialog mount 2764 2651 1000
DocumentCardTitle mount 230 237 1000
Dropdown mount 1974 1969 5000
FocusTrapZone mount 1143 1138 5000
FocusZone mount 1062 1066 5000
GroupedList mount 46974 47202 2
GroupedList virtual-rerender 24711 22698 2
GroupedList virtual-rerender-with-unmount 50562 51093 2
GroupedListV2 mount 220 237 2
GroupedListV2 virtual-rerender 209 215 2
GroupedListV2 virtual-rerender-with-unmount 217 218 2
IconButton mount 1117 1064 5000
Label mount 333 349 5000
Layer mount 2767 2773 5000
Link mount 396 394 5000
MenuButton mount 944 945 5000
MessageBar mount 21676 21665 5000
Nav mount 1937 1979 1000
OverflowSet mount 801 792 5000
Panel mount 1792 1767 1000
Persona mount 751 754 1000
Pivot mount 902 883 1000
PrimaryButton mount 848 874 5000
Rating mount 4631 4578 5000
SearchBox mount 931 905 5000
Shimmer mount 1854 1868 5000
Slider mount 1337 1319 5000
SpinButton mount 2851 2900 5000
Spinner mount 392 378 5000
SplitButton mount 1853 1879 5000
Stack mount 410 413 5000
StackWithIntrinsicChildren mount 893 856 5000
StackWithTextChildren mount 2562 2594 5000
SwatchColorPicker mount 6140 6163 5000
TagPicker mount 1494 1441 5000
Text mount 363 374 5000
TextField mount 925 942 5000
ThemeProvider mount 842 829 5000
ThemeProvider virtual-rerender 582 592 5000
ThemeProvider virtual-rerender-with-unmount 1258 1286 5000
Toggle mount 603 627 5000
buttonNative mount 185 195 5000

@layershifter
Copy link
Member

layershifter commented Aug 13, 2024

This have been solved, dependencies have been already bumped 👍

@Hotell Hotell deleted the deps/bump-griffel branch August 14, 2024 08:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

March Project Cycle Q1 2024

Development

Successfully merging this pull request may close these issues.

3 participants

@Hotell @fabricteam @layershifter