chore: bump @griffel/* packages by layershifter · Pull Request #31258 · microsoft/fluentui

layershifter · 2024-05-02T15:12:11Z

New Behavior

This PR bumps @griffel/* packages to latest.

Notable changes

CSS shorthands support 🚀 core: add support for CSS shorthands griffel#531
Fixed breaking change in types due bump of csstype csstype bump to 3.1.3 causing BREAKING CHANGEs on type-level griffel#510
Improved error reporting for Babel plugin/Webpack loader chore: improve error reporting griffel#522
Improved speed of @griffel/jest-serializer Improve speed of serializer test function griffel#516

Note on bundle size changes:

runtime part of Griffel became 400 bytes bigger to handle insertion by priority (chore: add support for priority in CSS rules griffel#539), needed for shorthands support

non-compiled version of makeStyles() (without AOT) became 4kb bigger as it bundles shorthands mapping (feat: add support for shorthands griffel#544)

PR changes

package.json files & change log files
@babel/* packages have been bumped to avoid duplicates
- packages/react-components/babel-preset-global-context/src/index.ts have been updated due TS error "types were not portable"
As the most of shorthands.*() have been deprecated:
- packages/eslint-plugin/src/configs/core.js have been temporary updated to exclude to disable deprecation rule for ['**/*.stories.tsx', '**/*.styles.ts', '**/*.cy.tsx', '**/*.mixins.ts']
- packages/react-components/react-calendar-compat/src/utils/animations.ts disabled deprecation/deprecation
- packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts disabled deprecation/deprecation
- packages/react-components/theme-designer/src/* disabled deprecation/deprecation
Bug fix in @griffel/jest-serializer that removes trailing spaces:
- packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx updated
Renamed packages/react-components/theme-designer/src/components/ColorTokens/TokenList.styles.ts to have .styles.ts suffix instead of style.ts

Follow ups

Run codemod, see core: add support for CSS shorthands griffel#531 (tracked by Run Griffel codemod to remove usage of shorthands.*() #31318)
Remove disabled deprecation/deprecation (tracked by Run Griffel codemod to remove usage of shorthands.*() #31318)

fabricteam · 2024-05-02T15:19:47Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`101.386 kB` `30.643 kB`	`101.791 kB` `30.819 kB`	`405 B` `176 B`
`react-alert` Alert	`83.737 kB` `23.475 kB`	`84.099 kB` `23.645 kB`	`362 B` `170 B`
`react-avatar` Avatar	`50.175 kB` `15.944 kB`	`50.537 kB` `16.11 kB`	`362 B` `166 B`
`react-avatar` AvatarGroup	`19.702 kB` `7.794 kB`	`20.107 kB` `7.973 kB`	`405 B` `179 B`
`react-avatar` AvatarGroupItem	`64.829 kB` `20.272 kB`	`65.191 kB` `20.441 kB`	`362 B` `169 B`
`react-badge` Badge	`26.905 kB` `8.73 kB`	`27.31 kB` `8.901 kB`	`405 B` `171 B`
`react-badge` CounterBadge	`27.806 kB` `9.025 kB`	`28.214 kB` `9.202 kB`	`408 B` `177 B`
`react-badge` PresenceBadge	`25.311 kB` `9.307 kB`	`25.717 kB` `9.483 kB`	`406 B` `176 B`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`117.263 kB` `32.241 kB`	`117.668 kB` `32.416 kB`	`405 B` `175 B`
`react-button` Button	`39.513 kB` `11.17 kB`	`39.917 kB` `11.339 kB`	`404 B` `169 B`
`react-button` CompoundButton	`46.874 kB` `12.662 kB`	`47.278 kB` `12.834 kB`	`404 B` `172 B`
`react-button` MenuButton	`44.292 kB` `12.544 kB`	`44.698 kB` `12.729 kB`	`406 B` `185 B`
`react-button` SplitButton	`52.306 kB` `14.135 kB`	`52.71 kB` `14.313 kB`	`404 B` `178 B`
`react-button` ToggleButton	`56.558 kB` `13.068 kB`	`56.963 kB` `13.243 kB`	`405 B` `175 B`
`react-calendar-compat` Calendar Compat	`154.469 kB` `40.161 kB`	`154.849 kB` `40.324 kB`	`380 B` `163 B`
`react-card` Card - All	`104.438 kB` `29.41 kB`	`104.845 kB` `29.585 kB`	`407 B` `175 B`
`react-card` Card	`97.449 kB` `27.681 kB`	`97.858 kB` `27.837 kB`	`409 B` `156 B`
`react-card` CardFooter	`13.971 kB` `5.626 kB`	`14.375 kB` `5.796 kB`	`404 B` `170 B`
`react-card` CardHeader	`16.214 kB` `6.386 kB`	`16.618 kB` `6.555 kB`	`404 B` `169 B`
`react-card` CardPreview	`14.015 kB` `5.752 kB`	`14.418 kB` `5.931 kB`	`403 B` `179 B`
`react-checkbox` Checkbox	`36.102 kB` `12.131 kB`	`36.506 kB` `12.305 kB`	`404 B` `174 B`
`react-combobox` Combobox (including child components)	`105.628 kB` `33.907 kB`	`106.032 kB` `34.071 kB`	`404 B` `164 B`
`react-combobox` Dropdown (including child components)	`107.043 kB` `33.877 kB`	`107.447 kB` `34.045 kB`	`404 B` `168 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`71.55 kB` `20.584 kB`	`71.955 kB` `20.772 kB`	`405 B` `188 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`221.825 kB` `62.568 kB`	`222.188 kB` `62.744 kB`	`363 B` `176 B`
`react-components` react-components: FluentProvider & webLightTheme	`44.037 kB` `14.418 kB`	`44.442 kB` `14.607 kB`	`405 B` `189 B`
`react-components` react-components: entire library	`1.162 MB` `279.076 kB`	`1.166 MB` `280.346 kB`	`4.195 kB` `1.27 kB`
`react-datepicker-compat` DatePicker Compat	`228.584 kB` `63.546 kB`	`228.881 kB` `63.703 kB`	`297 B` `157 B`
`react-dialog` Dialog (including children components)	`100.192 kB` `29.884 kB`	`100.597 kB` `30.053 kB`	`405 B` `169 B`
`react-divider` Divider	`20.922 kB` `7.791 kB`	`21.326 kB` `7.963 kB`	`404 B` `172 B`
`react-field` Field	`22.976 kB` `8.722 kB`	`23.382 kB` `8.901 kB`	`406 B` `179 B`
`react-image` Image	`15.745 kB` `6.231 kB`	`16.15 kB` `6.407 kB`	`405 B` `176 B`
`react-input` Input	`28.122 kB` `9.36 kB`	`28.444 kB` `9.526 kB`	`322 B` `166 B`
`react-label` Label	`14.266 kB` `5.829 kB`	`14.67 kB` `6 kB`	`404 B` `171 B`
`react-link` Link	`17.082 kB` `6.911 kB`	`17.466 kB` `7.079 kB`	`384 B` `168 B`
`react-menu` Menu (including children components)	`154.383 kB` `46.161 kB`	`154.746 kB` `46.327 kB`	`363 B` `166 B`
`react-menu` Menu (including selectable components)	`157.069 kB` `46.71 kB`	`157.432 kB` `46.888 kB`	`363 B` `178 B`
`react-message-bar` MessageBar (all components)	`24.204 kB` `8.983 kB`	`24.608 kB` `9.155 kB`	`404 B` `172 B`
`react-persona` Persona	`57.066 kB` `17.821 kB`	`57.428 kB` `17.99 kB`	`362 B` `169 B`
`react-popover` Popover	`128.669 kB` `40.26 kB`	`129.074 kB` `40.438 kB`	`405 B` `178 B`
`react-portal` Portal	`14.163 kB` `4.948 kB`	`14.563 kB` `5.118 kB`	`400 B` `170 B`
`react-progress` ProgressBar	`17.428 kB` `6.899 kB`	`17.833 kB` `7.074 kB`	`405 B` `175 B`
`react-provider` FluentProvider	`24.211 kB` `8.721 kB`	`24.616 kB` `8.903 kB`	`405 B` `182 B`
`react-radio` Radio	`33.396 kB` `10.316 kB`	`33.802 kB` `10.485 kB`	`406 B` `169 B`
`react-radio` RadioGroup	`15.354 kB` `6.265 kB`	`15.758 kB` `6.431 kB`	`404 B` `166 B`
`react-select` Select	`28.609 kB` `10.204 kB`	`28.997 kB` `10.374 kB`	`388 B` `170 B`
`react-slider` Slider	`40.395 kB` `13.024 kB`	`40.8 kB` `13.201 kB`	`405 B` `177 B`
`react-spinbutton` SpinButton	`36.78 kB` `11.789 kB`	`37.101 kB` `11.955 kB`	`321 B` `166 B`
`react-spinner` Spinner	`24.729 kB` `8.348 kB`	`25.134 kB` `8.521 kB`	`405 B` `173 B`
`react-swatch-picker` @fluentui/react-swatch-picker - package	`109.642 kB` `30.569 kB`	`110.047 kB` `30.74 kB`	`405 B` `171 B`
`react-switch` Switch	`36.04 kB` `11.305 kB`	`36.444 kB` `11.48 kB`	`404 B` `175 B`
`react-table` DataGrid	`169.274 kB` `46.907 kB`	`169.681 kB` `47.067 kB`	`407 B` `160 B`
`react-table` Table (Primitives only)	`45.77 kB` `14.174 kB`	`46.175 kB` `14.35 kB`	`405 B` `176 B`
`react-table` Table as DataGrid	`138.358 kB` `37.213 kB`	`138.765 kB` `37.41 kB`	`407 B` `197 B`
`react-table` Table (Selection only)	`76.774 kB` `20.602 kB`	`77.181 kB` `20.767 kB`	`407 B` `165 B`
`react-table` Table (Sort only)	`75.417 kB` `20.205 kB`	`75.824 kB` `20.369 kB`	`407 B` `164 B`
`react-tag-picker` @fluentui/react-tag-picker - package	`188.833 kB` `55.784 kB`	`189.079 kB` `55.943 kB`	`246 B` `159 B`
`react-tags` InteractionTag	`15.299 kB` `6.08 kB`	`15.703 kB` `6.253 kB`	`404 B` `173 B`
`react-tags` Tag	`29.092 kB` `9.418 kB`	`29.408 kB` `9.593 kB`	`316 B` `175 B`
`react-tags` TagGroup	`82.49 kB` `24.46 kB`	`82.895 kB` `24.635 kB`	`405 B` `175 B`
`react-text` Text - Default	`16.705 kB` `6.57 kB`	`17.11 kB` `6.744 kB`	`405 B` `174 B`
`react-text` Text - Wrappers	`19.878 kB` `6.897 kB`	`20.282 kB` `7.074 kB`	`404 B` `177 B`
`react-textarea` Textarea	`30.947 kB` `10.477 kB`	`31.351 kB` `10.651 kB`	`404 B` `174 B`
`react-timepicker-compat` TimePicker	`107.646 kB` `35.281 kB`	`108.051 kB` `35.451 kB`	`405 B` `170 B`
`react-toast` Toast (including Toaster)	`99.113 kB` `29.844 kB`	`99.518 kB` `30.001 kB`	`405 B` `157 B`
`react-tooltip` Tooltip	`55.201 kB` `19.285 kB`	`55.606 kB` `19.444 kB`	`405 B` `159 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `328 B`
`global-context` createContextSelector	`537 B` `339 B`
`keyboard-key` keyboard-key package	`3.746 kB` `1.928 kB`
`priority-overflow` createOverflowManager	`4.457 kB` `1.856 kB`
`react` ActivityItem	`71.019 kB` `23.288 kB`
`react` Announced	`38.291 kB` `13.239 kB`
`react` Autofill	`15.365 kB` `4.743 kB`
`react` Breadcrumb	`201.796 kB` `60.267 kB`
`react` Button	`195.26 kB` `56.471 kB`
`react` ButtonGrid	`180.207 kB` `54.515 kB`
`react` Calendar	`121.542 kB` `36.943 kB`
`react` Callout	`84.108 kB` `27.552 kB`
`react` Check	`52.963 kB` `17.773 kB`
`react` Checkbox	`59.751 kB` `19.806 kB`
`react` ChoiceGroup	`65.276 kB` `21.438 kB`
`react` ChoiceGroupOption	`58.531 kB` `19.309 kB`
`react` Coachmark	`92.937 kB` `29.356 kB`
`react` Color	`7.737 kB` `3.106 kB`
`react` ColorPicker	`132.985 kB` `41.502 kB`
`react` ComboBox	`251.561 kB` `72.081 kB`
`react` CommandBar	`202.829 kB` `59.975 kB`
`react` ContextualMenu	`154.789 kB` `48.068 kB`
`react` DatePicker	`183.939 kB` `56.079 kB`
`react` DateTimeUtilities	`5.244 kB` `1.849 kB`
`react` DetailsList	`229.317 kB` `65.63 kB`
`react` Dialog	`211.12 kB` `62.982 kB`
`react` Divider	`19.399 kB` `6.798 kB`
`react` DocumentCard	`216.805 kB` `64.269 kB`
`react` DragDrop	`8.343 kB` `2.724 kB`
`react` DraggableZone	`34.109 kB` `11.448 kB`
`react` Dropdown	`233.726 kB` `68.456 kB`
`react` ExtendedPicker	`96.565 kB` `27.809 kB`
`react` Fabric	`41.537 kB` `14.283 kB`
`react` Facepile	`210.377 kB` `63.035 kB`
`react` FloatingPicker	`241.851 kB` `68.827 kB`
`react` FocusTrapZone	`16.975 kB` `5.917 kB`
`react` FocusZone	`54.844 kB` `17.402 kB`
`react` Grid	`180.207 kB` `54.515 kB`
`react` GroupedList	`134.634 kB` `40.596 kB`
`react` GroupedListV2	`122.251 kB` `37.703 kB`
`react` HoverCard	`96.969 kB` `30.741 kB`
`react` Icon	`51.644 kB` `17.197 kB`
`react` Icons	`66.305 kB` `24.379 kB`
`react` Image	`46.701 kB` `15.646 kB`
`react` Keytip	`81.482 kB` `26.712 kB`
`react` KeytipData	`13.969 kB` `4.57 kB`
`react` KeytipLayer	`103.278 kB` `31.961 kB`
`react` Keytips	`106.046 kB` `32.966 kB`
`react` Label	`38.134 kB` `13.207 kB`
`react` Layer	`47.887 kB` `16.295 kB`
`react` Link	`39.488 kB` `13.614 kB`
`react` List	`39.176 kB` `12.384 kB`
`react` MarqueeSelection	`74.321 kB` `22.385 kB`
`react` MessageBar	`190.311 kB` `56.941 kB`
`react` Modal	`93.44 kB` `30.18 kB`
`react` Nav	`187.789 kB` `56.378 kB`
`react` OverflowSet	`33.191 kB` `11.252 kB`
`react` Overlay	`40.694 kB` `14.023 kB`
`react` Panel	`200.831 kB` `59.888 kB`
`react` Persona	`114.617 kB` `36.442 kB`
`react` PersonaCoin	`114.617 kB` `36.442 kB`
`react` PersonaPresence	`57.833 kB` `19.303 kB`
`react` Pickers	`293.537 kB` `82.173 kB`
`react` Pivot	`188.703 kB` `57.114 kB`
`react` Popup	`12.242 kB` `4.181 kB`
`react` Positioning	`22.608 kB` `7.63 kB`
`react` PositioningContainer	`73.643 kB` `23.706 kB`
`react` ProgressIndicator	`39.286 kB` `13.482 kB`
`react` Rating	`81.762 kB` `26.057 kB`
`react` Fluent UI React (entire library)	`1.013 MB` `281.289 kB`
`react` ResizeGroup	`13.286 kB` `4.365 kB`
`react` ResponsiveMode	`8.078 kB` `2.95 kB`
`react` ScrollablePane	`55.325 kB` `17.669 kB`
`react` SearchBox	`188.586 kB` `56.544 kB`
`react` SelectableOption	`724 B` `413 B`
`react` SelectedItemsList	`232.346 kB` `67.779 kB`
`react` Selection	`42.252 kB` `12.203 kB`
`react` Separator	`35.183 kB` `12.088 kB`
`react` Shimmer	`49.049 kB` `16.206 kB`
`react` ShimmeredDetailsList	`240.092 kB` `68.397 kB`
`react` Slider	`57.449 kB` `19.143 kB`
`react` SpinButton	`192.314 kB` `57.665 kB`
`react` Spinner	`41.481 kB` `14.412 kB`
`react` Stack	`41.547 kB` `14.233 kB`
`react` Sticky	`32.541 kB` `10.49 kB`
`react` Styling	`45.853 kB` `15.082 kB`
`react` SwatchColorPicker	`190.533 kB` `57.999 kB`
`react` TeachingBubble	`205.586 kB` `60.896 kB`
`react` Text	`36.723 kB` `12.763 kB`
`react` TextField	`80.555 kB` `25.262 kB`
`react` Theme	`43.321 kB` `14.129 kB`
`react` ThemeGenerator	`12.34 kB` `4.106 kB`
`react` TimePicker	`241.365 kB` `69.856 kB`
`react` Toggle	`46.02 kB` `15.903 kB`
`react` Tooltip	`87.136 kB` `28.164 kB`
`react` Utilities	`82.495 kB` `25.047 kB`
`react` Viewport	`23.703 kB` `7.589 kB`
`react` WeeklyDayPicker	`101.682 kB` `31.738 kB`
`react` WindowProvider	`1.059 kB` `541 B`
`react-jsx-runtime` Classic Pragma	`1.057 kB` `530 B`
`react-jsx-runtime` JSX Dev Runtime	`3.781 kB` `1.646 kB`
`react-jsx-runtime` JSX Runtime	`4.377 kB` `1.881 kB`
`react-northstar` Accordion	`85.392 kB` `26.518 kB`
`react-northstar` Alert	`87.45 kB` `26.902 kB`
`react-northstar` Animation	`55.34 kB` `17.829 kB`
`react-northstar` Attachment	`86.844 kB` `26.692 kB`
`react-northstar` Avatar	`80.279 kB` `24.629 kB`
`react-northstar` Box	`75.248 kB` `23.806 kB`
`react-northstar` Breadcrumb	`79.92 kB` `24.709 kB`
`react-northstar` Button	`83.16 kB` `25.947 kB`
`react-northstar` Card	`82.705 kB` `25.023 kB`
`react-northstar` Carousel	`105.182 kB` `31.871 kB`
`react-northstar` Chat	`152.378 kB` `45.964 kB`
`react-northstar` Checkbox	`79.807 kB` `25.078 kB`
`react-northstar` Datepicker	`184.939 kB` `56.194 kB`
`react-northstar` Debug	`8.801 kB` `3.594 kB`
`react-northstar` Design	`36.589 kB` `12.067 kB`
`react-northstar` Dialog	`112.058 kB` `33.615 kB`
`react-northstar` Divider	`76.619 kB` `24.129 kB`
`react-northstar` Dropdown	`196.499 kB` `59.455 kB`
`react-northstar` Embed	`81.477 kB` `25.417 kB`
`react-northstar` Flex	`47.728 kB` `15.438 kB`
`react-northstar` Form	`92.527 kB` `28.879 kB`
`react-northstar` Grid	`70.584 kB` `22.278 kB`
`react-northstar` Header	`74.756 kB` `23.461 kB`
`react-northstar` Image	`73.591 kB` `23.329 kB`
`react-northstar` Input	`88.346 kB` `27.78 kB`
`react-northstar` ItemLayout	`78.231 kB` `24.454 kB`
`react-northstar` Label	`77.92 kB` `24.41 kB`
`react-northstar` Layout	`75.393 kB` `23.798 kB`
`react-northstar` List	`88.493 kB` `27.547 kB`
`react-northstar` Loader	`78.616 kB` `24.729 kB`
`react-northstar` Menu	`126.89 kB` `39.872 kB`
`react-northstar` MenuButton	`161.296 kB` `48.883 kB`
`react-northstar` Pill	`83.722 kB` `26.069 kB`
`react-northstar` Popup	`133.604 kB` `41.483 kB`
`react-northstar` Portal	`58.338 kB` `18.852 kB`
`react-northstar` Provider	`93.138 kB` `29.63 kB`
`react-northstar` RadioGroup	`83.282 kB` `26.053 kB`
`react-northstar` Reaction	`77.28 kB` `24.122 kB`
`react-northstar` Segment	`76.209 kB` `23.892 kB`
`react-northstar` Skeleton	`77.765 kB` `24.2 kB`
`react-northstar` Slider	`84.27 kB` `26.737 kB`
`react-northstar` SplitButton	`176.534 kB` `52.63 kB`
`react-northstar` Status	`76.272 kB` `24.05 kB`
`react-northstar` SvgIcon	`36.823 kB` `11.743 kB`
`react-northstar` Table	`80.796 kB` `25.154 kB`
`react-northstar` Text	`74.114 kB` `23.507 kB`
`react-northstar` TextArea	`74.248 kB` `23.492 kB`
`react-northstar` Toolbar	`173.345 kB` `52.08 kB`
`react-northstar` Tooltip	`108.261 kB` `34.482 kB`
`react-northstar` Tree	`87.855 kB` `27.217 kB`
`react-northstar` Video	`75.411 kB` `23.799 kB`
`react-overflow` hooks only	`12.87 kB` `4.83 kB`
`react-portal-compat` PortalCompatProvider	`8.39 kB` `2.64 kB`
`react-positioning` usePositioning	`26.489 kB` `9.552 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 e69f90d32c4b4f11dfab5e563d2475d0d3f8940a}

fabricteam · 2024-05-02T15:29:35Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	632	630	5000
Button	mount	313	324	5000
Field	mount	1132	1141	5000
FluentProvider	mount	717	725	5000
FluentProviderWithTheme	mount	83	85	10
FluentProviderWithTheme	virtual-rerender	37	46	10
FluentProviderWithTheme	virtual-rerender-with-unmount	85	78	10
MakeStyles	mount	854	869	50000
Persona	mount	1779	1694	5000
SpinButton	mount	1378	1362	5000
SwatchPicker	mount	1610	1583	5000

fabricteam · 2024-05-02T15:34:58Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	89	80	1.11:1
RefMinimalPerf.default	114	104	1.1:1
LoaderMinimalPerf.default	197	180	1.09:1
PortalMinimalPerf.default	89	82	1.09:1
DividerMinimalPerf.default	224	207	1.08:1
TextAreaMinimalPerf.default	288	267	1.08:1
AccordionMinimalPerf.default	85	80	1.06:1
ButtonSlotsPerf.default	318	301	1.06:1
DropdownManyItemsPerf.default	390	369	1.06:1
AlertMinimalPerf.default	160	152	1.05:1
AnimationMinimalPerf.default	302	288	1.05:1
BoxMinimalPerf.default	199	190	1.05:1
LayoutMinimalPerf.default	201	192	1.05:1
SegmentMinimalPerf.default	197	187	1.05:1
ButtonMinimalPerf.default	94	90	1.04:1
ChatDuplicateMessagesPerf.default	155	149	1.04:1
DatepickerMinimalPerf.default	3721	3573	1.04:1
ImageMinimalPerf.default	243	234	1.04:1
ListMinimalPerf.default	315	302	1.04:1
TableMinimalPerf.default	232	223	1.04:1
TreeMinimalPerf.default	494	477	1.04:1
CardMinimalPerf.default	318	308	1.03:1
CheckboxMinimalPerf.default	1154	1125	1.03:1
ListNestedPerf.default	326	315	1.03:1
ProviderMinimalPerf.default	202	196	1.03:1
DialogMinimalPerf.default	450	442	1.02:1
HeaderMinimalPerf.default	206	202	1.02:1
HeaderSlotsPerf.default	466	456	1.02:1
MenuButtonMinimalPerf.default	951	931	1.02:1
SplitButtonMinimalPerf.default	2260	2205	1.02:1
CustomToolbarPrototype.default	1472	1446	1.02:1
AttachmentSlotsPerf.default	631	626	1.01:1
DropdownMinimalPerf.default	1432	1412	1.01:1
InputMinimalPerf.default	536	533	1.01:1
ReactionMinimalPerf.default	214	211	1.01:1
SliderMinimalPerf.default	740	730	1.01:1
StatusMinimalPerf.default	394	389	1.01:1
TableManyItemsPerf.default	1097	1086	1.01:1
TreeWith60ListItems.default	84	83	1.01:1
AvatarMinimalPerf.default	107	107	1:1
ChatWithPopoverPerf.default	192	192	1:1
EmbedMinimalPerf.default	1846	1853	1:1
ItemLayoutMinimalPerf.default	710	708	1:1
RadioGroupMinimalPerf.default	257	257	1:1
TooltipMinimalPerf.default	1280	1283	1:1
ButtonOverridesMissPerf.default	642	649	0.99:1
FormMinimalPerf.default	219	222	0.99:1
LabelMinimalPerf.default	218	221	0.99:1
IconMinimalPerf.default	396	399	0.99:1
ToolbarMinimalPerf.default	543	547	0.99:1
CarouselMinimalPerf.default	252	258	0.98:1
FlexMinimalPerf.default	152	155	0.98:1
MenuMinimalPerf.default	500	509	0.98:1
SkeletonMinimalPerf.default	190	194	0.98:1
VideoMinimalPerf.default	416	426	0.98:1
PopupMinimalPerf.default	350	359	0.97:1
ProviderMergeThemesPerf.default	634	655	0.97:1
RosterPerf.default	1537	1598	0.96:1
TextMinimalPerf.default	195	203	0.96:1
ListCommonPerf.default	375	394	0.95:1
ChatMinimalPerf.default	433	459	0.94:1
ListWith60ListItems.default	354	375	0.94:1
GridMinimalPerf.default	175	188	0.93:1

fabricteam · 2024-05-02T15:45:56Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	629	642	5000
Breadcrumb	mount	1754	1778	1000
Checkbox	mount	1702	1699	5000
CheckboxBase	mount	1489	1493	5000
ChoiceGroup	mount	2957	2975	5000
ComboBox	mount	655	691	1000
CommandBar	mount	6781	6766	1000
ContextualMenu	mount	16549	16283	1000
DefaultButton	mount	786	798	5000
DetailsRow	mount	2174	2250	5000
DetailsRowFast	mount	2211	2227	5000
DetailsRowNoStyles	mount	2070	2038	5000
Dialog	mount	2738	2691	1000
DocumentCardTitle	mount	233	221	1000
Dropdown	mount	1981	2017	5000
FocusTrapZone	mount	1154	1137	5000
FocusZone	mount	1114	1052	5000
GroupedList	mount	42629	42502	2
GroupedList	virtual-rerender	20234	20448	2
GroupedList	virtual-rerender-with-unmount	52221	58463	2
GroupedListV2	mount	243	234	2
GroupedListV2	virtual-rerender	206	220	2
GroupedListV2	virtual-rerender-with-unmount	236	238	2
IconButton	mount	1137	1142	5000
Label	mount	326	345	5000
Layer	mount	2724	2743	5000
Link	mount	401	400	5000
MenuButton	mount	988	992	5000
MessageBar	mount	21947	21982	5000
Nav	mount	2059	2061	1000
OverflowSet	mount	806	779	5000
Panel	mount	1857	1773	1000
Persona	mount	760	741	1000
Pivot	mount	904	898	1000
PrimaryButton	mount	931	924	5000
Rating	mount	4655	4658	5000
SearchBox	mount	904	942	5000
Shimmer	mount	1895	1915	5000
Slider	mount	1310	1348	5000
SpinButton	mount	3035	2966	5000
Spinner	mount	407	384	5000
SplitButton	mount	1937	1888	5000
Stack	mount	409	416	5000
StackWithIntrinsicChildren	mount	876	854	5000
StackWithTextChildren	mount	2616	2632	5000
SwatchColorPicker	mount	6473	6420	5000
TagPicker	mount	1479	1502	5000
Text	mount	374	380	5000
TextField	mount	963	981	5000
ThemeProvider	mount	836	838	5000
ThemeProvider	virtual-rerender	585	567	5000
ThemeProvider	virtual-rerender-with-unmount	1276	1292	5000
Toggle	mount	607	635	5000
buttonNative	mount	180	202	5000

codesandbox-ci · 2024-05-02T15:48:59Z

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.

fabricteam · 2024-05-02T15:56:36Z

🕵 FluentUIV0 No visual regressions between this PR and main

packages/react-components/babel-preset-global-context/src/index.ts

package.json

Hotell · 2024-05-14T08:06:15Z

those bundle size increases will be gone once we migrate to new shorthands api right ?

layershifter · 2024-05-14T09:20:01Z

those bundle size increases will be gone once we migrate to new shorthands api right ?

@Hotell The increase comes from changes in createDOMRenderer().

For consumers using CSS extraction, there will no be no increase as they don't use it
For all others, upcoming PRs with running the codemod introduce reductions for almost all components (you can check poc/try shorthands #30765 for results)

apps/perf-test-react-components/package.json

github-actions bot added this to the April Project Cycle Q1 2024 milestone May 2, 2024

layershifter force-pushed the chore/bump-griffel-shorthands branch 2 times, most recently from 4fd297b to 3dfdb42 Compare May 2, 2024 15:19

layershifter force-pushed the chore/bump-griffel-shorthands branch 2 times, most recently from b5ef886 to 9cc495e Compare May 2, 2024 15:28

layershifter force-pushed the chore/bump-griffel-shorthands branch from 9cc495e to 28d417c Compare May 2, 2024 15:37

layershifter force-pushed the chore/bump-griffel-shorthands branch 5 times, most recently from 86a56f8 to 24aba5f Compare May 9, 2024 09:36

layershifter mentioned this pull request May 9, 2024

Run Griffel codemod to remove usage of shorthands.*() #31318

Closed

layershifter force-pushed the chore/bump-griffel-shorthands branch from 24aba5f to 2cf18ea Compare May 9, 2024 10:19

layershifter marked this pull request as ready for review May 9, 2024 12:03

layershifter requested review from a team, Mitch-At-Work, marcosmoura, mltejera, smhigley, sopranopillow and tomi-msft as code owners May 9, 2024 12:03

layershifter requested review from a team, GeoffCoxMSFT, behowell, chpalac, khmakoto, ling1726, micahgodbolt, ms-acalzaretto and spmonahan as code owners May 9, 2024 12:03

bsunderhus approved these changes May 9, 2024

View reviewed changes

Hotell reviewed May 13, 2024

View reviewed changes

packages/react-components/babel-preset-global-context/src/index.ts Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

layershifter force-pushed the chore/bump-griffel-shorthands branch 2 times, most recently from d9c253c to 8130bf9 Compare May 13, 2024 14:25

Hotell approved these changes May 14, 2024

View reviewed changes

spmonahan approved these changes May 16, 2024

View reviewed changes

Mitch-At-Work approved these changes May 16, 2024

View reviewed changes

layershifter force-pushed the chore/bump-griffel-shorthands branch from 8130bf9 to 10d8c80 Compare May 17, 2024 10:28

fabricteam reviewed May 17, 2024

View reviewed changes

apps/perf-test-react-components/package.json Show resolved Hide resolved

fabricteam reviewed May 17, 2024

View reviewed changes

apps/perf-test-react-components/package.json Show resolved Hide resolved

fabricteam reviewed May 17, 2024

View reviewed changes

apps/perf-test-react-components/package.json Show resolved Hide resolved

chore: bump @griffel/* packages

f294ef3

layershifter force-pushed the chore/bump-griffel-shorthands branch from 10d8c80 to f294ef3 Compare May 17, 2024 11:29

layershifter merged commit 973489f into microsoft:master May 17, 2024

layershifter deleted the chore/bump-griffel-shorthands branch May 17, 2024 12:34

layershifter mentioned this pull request May 23, 2024

chore: re-enable lint rule #31459

Merged

miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request Jun 14, 2024

chore: bump @griffel/* packages (microsoft#31258)

5d80bf4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: bump @griffel/* packages#31258

chore: bump @griffel/* packages#31258
layershifter merged 1 commit intomicrosoft:masterfrom
layershifter:chore/bump-griffel-shorthands

layershifter commented May 2, 2024 •

edited

Loading

Uh oh!

fabricteam commented May 2, 2024 •

edited

Loading

Uh oh!

fabricteam commented May 2, 2024 •

edited

Loading

Uh oh!

fabricteam commented May 2, 2024 •

edited

Loading

Uh oh!

fabricteam commented May 2, 2024 •

edited

Loading

Uh oh!

codesandbox-ci bot commented May 2, 2024 •

edited

Loading

Uh oh!

fabricteam commented May 2, 2024 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Hotell commented May 14, 2024

Uh oh!

layershifter commented May 14, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

layershifter commented May 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New Behavior

Notable changes

PR changes

Follow ups

Uh oh!

fabricteam commented May 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented May 2, 2024 • 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 May 2, 2024 • 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 May 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

codesandbox-ci bot commented May 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented May 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 FluentUIV0 No visual regressions between this PR and main

Uh oh!

Uh oh!

Uh oh!

Hotell commented May 14, 2024

Uh oh!

layershifter commented May 14, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

layershifter commented May 2, 2024 •

edited

Loading

fabricteam commented May 2, 2024 •

edited

Loading

fabricteam commented May 2, 2024 •

edited

Loading

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

fabricteam commented May 2, 2024 •

edited

Loading

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

fabricteam commented May 2, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react`)

codesandbox-ci bot commented May 2, 2024 •

edited

Loading

fabricteam commented May 2, 2024 •

edited

Loading