poc/try shorthands by layershifter · Pull Request #30765 · microsoft/fluentui

layershifter · 2024-03-12T09:37:41Z

docs: rework icons catalog
use tokens
try shorthands

Previous Behavior

New Behavior

Related Issue(s)

Fixes #

fabricteam · 2024-03-12T09:44:43Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`100.94 kB` `30.574 kB`	`100.813 kB` `30.647 kB`	`-127 B` `73 B`
`react-alert` Alert	`83.737 kB` `23.475 kB`	`78.817 kB` `22.543 kB`	`-4.92 kB` `-932 B`
`react-avatar` Avatar	`50.175 kB` `15.944 kB`	`49.299 kB` `15.837 kB`	`-876 B` `-107 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`	`63.316 kB` `20.017 kB`	`-1.513 kB` `-255 B`
`react-badge` Badge	`26.905 kB` `8.73 kB`	`25.95 kB` `8.612 kB`	`-955 B` `-118 B`
`react-badge` CounterBadge	`27.806 kB` `9.025 kB`	`26.729 kB` `8.886 kB`	`-1.077 kB` `-139 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	`116.817 kB` `32.173 kB`	`114.024 kB` `31.744 kB`	`-2.793 kB` `-429 B`
`react-button` Button	`39.513 kB` `11.17 kB`	`37.103 kB` `10.784 kB`	`-2.41 kB` `-386 B`
`react-button` CompoundButton	`46.874 kB` `12.662 kB`	`43.514 kB` `12.074 kB`	`-3.36 kB` `-588 B`
`react-button` MenuButton	`44.292 kB` `12.544 kB`	`41.884 kB` `12.132 kB`	`-2.408 kB` `-412 B`
`react-button` SplitButton	`52.306 kB` `14.135 kB`	`49.896 kB` `13.724 kB`	`-2.41 kB` `-411 B`
`react-button` ToggleButton	`56.558 kB` `13.068 kB`	`53.03 kB` `12.543 kB`	`-3.528 kB` `-525 B`
`react-calendar-compat` Calendar Compat	`153.428 kB` `40.128 kB`	`147.054 kB` `39.223 kB`	`-6.374 kB` `-905 B`
`react-card` Card - All	`103.992 kB` `29.35 kB`	`103.593 kB` `29.381 kB`	`-399 B` `31 B`
`react-card` Card	`97.003 kB` `27.61 kB`	`96.627 kB` `27.649 kB`	`-376 B` `39 B`
`react-card` CardFooter	`13.971 kB` `5.626 kB`	`14.354 kB` `5.795 kB`	`383 B` `169 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	`35.656 kB` `12.07 kB`	`35.618 kB` `12.153 kB`	`-38 B` `83 B`
`react-combobox` Combobox (including child components)	`104.926 kB` `33.812 kB`	`100.754 kB` `33.276 kB`	`-4.172 kB` `-536 B`
`react-combobox` Dropdown (including child components)	`106.398 kB` `33.79 kB`	`102.322 kB` `33.27 kB`	`-4.076 kB` `-520 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`71.104 kB` `20.52 kB`	`68.695 kB` `20.093 kB`	`-2.409 kB` `-427 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`221.287 kB` `62.497 kB`	`215.082 kB` `61.568 kB`	`-6.205 kB` `-929 B`
`react-components` react-components: FluentProvider & webLightTheme	`43.591 kB` `14.356 kB`	`43.996 kB` `14.543 kB`	`405 B` `187 B`
`react-components` react-components: entire library	`1.099 MB` `266.966 kB`	`1.055 MB` `260.45 kB`	`-44.274 kB` `-6.516 kB`
`react-datepicker-compat` DatePicker Compat	`227.451 kB` `63.531 kB`	`220.535 kB` `62.569 kB`	`-6.916 kB` `-962 B`
`react-dialog` Dialog (including children components)	`116.899 kB` `36.102 kB`	`117.32 kB` `36.261 kB`	`421 B` `159 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`	`15.36 kB` `6.245 kB`	`-385 B` `14 B`
`react-infobutton` InfoButton	`139.885 kB` `43.723 kB`	`138.137 kB` `43.428 kB`	`-1.748 kB` `-295 B`
`react-infobutton` InfoLabel	`143.7 kB` `44.944 kB`	`141.951 kB` `44.646 kB`	`-1.749 kB` `-298 B`
`react-input` Input	`28.122 kB` `9.36 kB`	`27.985 kB` `9.444 kB`	`-137 B` `84 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.144 kB` `7.02 kB`	`62 B` `109 B`
`react-menu` Menu (including children components)	`153.846 kB` `46.074 kB`	`153.201 kB` `46.015 kB`	`-645 B` `-59 B`
`react-menu` Menu (including selectable components)	`156.532 kB` `46.623 kB`	`155.887 kB` `46.572 kB`	`-645 B` `-51 B`
`react-message-bar` MessageBar (all components)	`24.204 kB` `8.983 kB`	`24.411 kB` `9.114 kB`	`207 B` `131 B`
`react-persona` Persona	`57.066 kB` `17.821 kB`	`56.19 kB` `17.726 kB`	`-876 B` `-95 B`
`react-popover` Popover	`128.132 kB` `40.174 kB`	`127.113 kB` `39.998 kB`	`-1.019 kB` `-176 B`
`react-portal` Portal	`13.717 kB` `4.886 kB`	`14.117 kB` `5.06 kB`	`400 B` `174 B`
`react-progress` ProgressBar	`17.428 kB` `6.899 kB`	`17.084 kB` `6.904 kB`	`-344 B` `5 B`
`react-provider` FluentProvider	`23.765 kB` `8.662 kB`	`24.17 kB` `8.845 kB`	`405 B` `183 B`
`react-radio` Radio	`32.95 kB` `10.252 kB`	`33.186 kB` `10.394 kB`	`236 B` `142 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`	`27.636 kB` `10.106 kB`	`-973 B` `-98 B`
`react-slider` Slider	`39.949 kB` `12.968 kB`	`38.17 kB` `12.708 kB`	`-1.779 kB` `-260 B`
`react-spinbutton` SpinButton	`36.78 kB` `11.789 kB`	`35.78 kB` `11.735 kB`	`-1 kB` `-54 B`
`react-spinner` Spinner	`24.729 kB` `8.348 kB`	`25.134 kB` `8.521 kB`	`405 B` `173 B`
`react-swatch-picker-preview` @fluentui/react-swatch-picker-preview - package	`108.416 kB` `30.25 kB`	`103.136 kB` `30.044 kB`	`-5.28 kB` `-206 B`
`react-switch` Switch	`35.14 kB` `11.199 kB`	`35.374 kB` `11.349 kB`	`234 B` `150 B`
`react-table` DataGrid	`168.828 kB` `46.848 kB`	`164.328 kB` `46.401 kB`	`-4.5 kB` `-447 B`
`react-table` Table (Primitives only)	`45.324 kB` `14.116 kB`	`42.081 kB` `13.794 kB`	`-3.243 kB` `-322 B`
`react-table` Table as DataGrid	`137.912 kB` `37.14 kB`	`133.441 kB` `36.72 kB`	`-4.471 kB` `-420 B`
`react-table` Table (Selection only)	`76.328 kB` `20.545 kB`	`71.857 kB` `20.081 kB`	`-4.471 kB` `-464 B`
`react-table` Table (Sort only)	`74.971 kB` `20.148 kB`	`70.5 kB` `19.687 kB`	`-4.471 kB` `-461 B`
`react-tag-picker-preview` @fluentui/react-tag-picker-preview - package	`188.273 kB` `55.749 kB`	`181.285 kB` `54.665 kB`	`-6.988 kB` `-1.084 kB`
`react-tags` InteractionTag	`15.299 kB` `6.08 kB`	`15.165 kB` `6.134 kB`	`-134 B` `54 B`
`react-tags` Tag	`29.092 kB` `9.418 kB`	`28.994 kB` `9.518 kB`	`-98 B` `100 B`
`react-tags` TagGroup	`82.044 kB` `24.39 kB`	`82.449 kB` `24.566 kB`	`405 B` `176 B`
`react-text` Text - Default	`16.705 kB` `6.57 kB`	`17.061 kB` `6.731 kB`	`356 B` `161 B`
`react-text` Text - Wrappers	`19.878 kB` `6.897 kB`	`20.233 kB` `7.061 kB`	`355 B` `164 B`
`react-textarea` Textarea	`30.947 kB` `10.477 kB`	`26.472 kB` `9.677 kB`	`-4.475 kB` `-800 B`
`react-timepicker-compat` TimePicker	`106.944 kB` `35.169 kB`	`103.552 kB` `34.622 kB`	`-3.392 kB` `-547 B`
`react-toast` Toast (including Toaster)	`98.667 kB` `29.793 kB`	`99.072 kB` `29.943 kB`	`405 B` `150 B`
`react-tooltip` Tooltip	`54.664 kB` `19.206 kB`	`53.922 kB` `19.108 kB`	`-742 B` `-98 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.447 kB` `1.853 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	`200.619 kB` `60.07 kB`
`react` Button	`194.573 kB` `56.3 kB`
`react` ButtonGrid	`180.349 kB` `54.518 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	`250.423 kB` `71.926 kB`
`react` CommandBar	`201.843 kB` `59.824 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.3 kB` `65.63 kB`
`react` Dialog	`209.943 kB` `62.812 kB`
`react` Divider	`19.399 kB` `6.798 kB`
`react` DocumentCard	`215.628 kB` `64.085 kB`
`react` DragDrop	`8.343 kB` `2.724 kB`
`react` DraggableZone	`34.109 kB` `11.448 kB`
`react` Dropdown	`232.588 kB` `68.284 kB`
`react` ExtendedPicker	`96.565 kB` `27.809 kB`
`react` Fabric	`41.537 kB` `14.283 kB`
`react` Facepile	`210.48 kB` `63.032 kB`
`react` FloatingPicker	`240.713 kB` `68.651 kB`
`react` FocusTrapZone	`16.975 kB` `5.917 kB`
`react` FocusZone	`54.844 kB` `17.402 kB`
`react` Grid	`180.349 kB` `54.518 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	`189.134 kB` `56.778 kB`
`react` Modal	`93.44 kB` `30.18 kB`
`react` Nav	`187.931 kB` `56.384 kB`
`react` OverflowSet	`33.191 kB` `11.252 kB`
`react` Overlay	`40.694 kB` `14.023 kB`
`react` Panel	`199.654 kB` `59.727 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	`292.399 kB` `82.007 kB`
`react` Pivot	`188.845 kB` `57.107 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.012 MB` `281.091 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	`187.409 kB` `56.377 kB`
`react` SelectableOption	`724 B` `413 B`
`react` SelectedItemsList	`231.169 kB` `67.62 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.075 kB` `68.397 kB`
`react` Slider	`57.449 kB` `19.143 kB`
`react` SpinButton	`191.137 kB` `57.503 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.675 kB` `57.985 kB`
`react` TeachingBubble	`204.685 kB` `60.713 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	`240.227 kB` `69.693 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.86 kB` `4.825 kB`
`react-portal-compat` PortalCompatProvider	`7.944 kB` `2.588 kB`
`react-positioning` usePositioning	`26.398 kB` `9.539 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 eff9e16953c787b1f3c803bfc6bb2966cdb6ccd9}

layershifter · 2024-03-12T09:49:36Z

/azp run

azure-pipelines · 2024-03-12T09:49:57Z

Azure Pipelines successfully started running 4 pipeline(s).

fabricteam · 2024-03-12T09:58:54Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	35	33	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	650	626	5000
Button	mount	307	292	5000
Field	mount	1125	1150	5000
FluentProvider	mount	715	702	5000
FluentProviderWithTheme	mount	81	93	10
FluentProviderWithTheme	virtual-rerender	35	33	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	81	83	10
MakeStyles	mount	868	880	50000
Persona	mount	1764	1712	5000
SpinButton	mount	1368	1378	5000
SwatchPicker	mount	1530	1555	5000

fabricteam · 2024-03-12T10:04:06Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	88	75	1.17:1
ChatDuplicateMessagesPerf.default	162	143	1.13:1
PortalMinimalPerf.default	94	84	1.12:1
FlexMinimalPerf.default	160	144	1.11:1
AttachmentMinimalPerf.default	86	80	1.08:1
ButtonMinimalPerf.default	92	87	1.06:1
LabelMinimalPerf.default	223	211	1.06:1
ListWith60ListItems.default	375	354	1.06:1
StatusMinimalPerf.default	404	382	1.06:1
TableMinimalPerf.default	235	221	1.06:1
AttachmentSlotsPerf.default	672	637	1.05:1
InputMinimalPerf.default	560	531	1.05:1
ReactionMinimalPerf.default	213	203	1.05:1
DialogMinimalPerf.default	458	440	1.04:1
ItemLayoutMinimalPerf.default	727	699	1.04:1
SkeletonMinimalPerf.default	194	187	1.04:1
ToolbarMinimalPerf.default	544	524	1.04:1
TreeMinimalPerf.default	504	484	1.04:1
VideoMinimalPerf.default	454	435	1.04:1
ButtonOverridesMissPerf.default	657	640	1.03:1
CarouselMinimalPerf.default	267	258	1.03:1
DatepickerMinimalPerf.default	3587	3490	1.03:1
DividerMinimalPerf.default	202	197	1.03:1
ImageMinimalPerf.default	233	226	1.03:1
RadioGroupMinimalPerf.default	264	257	1.03:1
IconMinimalPerf.default	390	380	1.03:1
AvatarMinimalPerf.default	115	113	1.02:1
CardMinimalPerf.default	312	305	1.02:1
CheckboxMinimalPerf.default	1147	1120	1.02:1
DropdownMinimalPerf.default	1424	1397	1.02:1
ListCommonPerf.default	394	386	1.02:1
MenuButtonMinimalPerf.default	956	935	1.02:1
PopupMinimalPerf.default	352	346	1.02:1
SplitButtonMinimalPerf.default	2262	2215	1.02:1
TextAreaMinimalPerf.default	291	286	1.02:1
EmbedMinimalPerf.default	1888	1877	1.01:1
LoaderMinimalPerf.default	200	198	1.01:1
MenuMinimalPerf.default	510	506	1.01:1
ProviderMinimalPerf.default	206	203	1.01:1
SliderMinimalPerf.default	739	730	1.01:1
AnimationMinimalPerf.default	301	300	1:1
ChatMinimalPerf.default	436	434	1:1
FormMinimalPerf.default	230	230	1:1
HeaderMinimalPerf.default	205	204	1:1
SegmentMinimalPerf.default	192	192	1:1
TableManyItemsPerf.default	1112	1113	1:1
BoxMinimalPerf.default	193	194	0.99:1
HeaderSlotsPerf.default	453	457	0.99:1
ListMinimalPerf.default	303	305	0.99:1
ProviderMergeThemesPerf.default	644	649	0.99:1
GridMinimalPerf.default	186	189	0.98:1
LayoutMinimalPerf.default	193	196	0.98:1
TextMinimalPerf.default	191	194	0.98:1
CustomToolbarPrototype.default	1454	1487	0.98:1
AlertMinimalPerf.default	161	166	0.97:1
DropdownManyItemsPerf.default	373	384	0.97:1
RosterPerf.default	1540	1582	0.97:1
TooltipMinimalPerf.default	1258	1303	0.97:1
ButtonSlotsPerf.default	311	323	0.96:1
ListNestedPerf.default	310	322	0.96:1
RefMinimalPerf.default	101	106	0.95:1
ChatWithPopoverPerf.default	186	197	0.94:1
TreeWith60ListItems.default	85	90	0.94:1

fabricteam · 2024-03-12T10:08:17Z

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam · 2024-03-12T10:14:35Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	624	635	5000
Breadcrumb	mount	1699	1706	1000
Checkbox	mount	1701	1684	5000
CheckboxBase	mount	1472	1500	5000
ChoiceGroup	mount	3052	2966	5000
ComboBox	mount	689	693	1000
CommandBar	mount	6543	6551	1000
ContextualMenu	mount	13405	13122	1000
DefaultButton	mount	786	801	5000
DetailsRow	mount	2226	2232	5000
DetailsRowFast	mount	2221	2235	5000
DetailsRowNoStyles	mount	2022	2109	5000
Dialog	mount	2831	2813	1000
DocumentCardTitle	mount	243	236	1000
Dropdown	mount	2041	2029	5000
FocusTrapZone	mount	1143	1146	5000
FocusZone	mount	1070	1054	5000
GroupedList	mount	42379	42358	2
GroupedList	virtual-rerender	18234	20329	2
GroupedList	virtual-rerender-with-unmount	51149	50967	2
GroupedListV2	mount	230	223	2
GroupedListV2	virtual-rerender	213	205	2
GroupedListV2	virtual-rerender-with-unmount	236	231	2
IconButton	mount	1139	1147	5000
Label	mount	339	343	5000
Layer	mount	2742	2768	5000
Link	mount	394	382	5000
MenuButton	mount	985	978	5000
MessageBar	mount	21500	21521	5000
Nav	mount	2057	2076	1000
OverflowSet	mount	801	783	5000
Panel	mount	1798	1828	1000
Persona	mount	749	751	1000
Pivot	mount	917	902	1000
PrimaryButton	mount	942	924	5000
Rating	mount	4682	4674	5000
SearchBox	mount	914	906	5000
Shimmer	mount	1885	1932	5000
Slider	mount	1381	1359	5000
SpinButton	mount	3034	3057	5000
Spinner	mount	396	381	5000
SplitButton	mount	1897	1877	5000
Stack	mount	412	407	5000
StackWithIntrinsicChildren	mount	880	890	5000
StackWithTextChildren	mount	2702	2657	5000
SwatchColorPicker	mount	6343	6441	5000
TagPicker	mount	1479	1465	5000
Text	mount	379	375	5000
TextField	mount	974	968	5000
ThemeProvider	mount	847	854	5000
ThemeProvider	virtual-rerender	578	583	5000
ThemeProvider	virtual-rerender-with-unmount	1321	1290	5000
Toggle	mount	600	605	5000
buttonNative	mount	190	196	5000

codesandbox-ci · 2024-03-12T10:49:05Z

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-03-12T14:39:13Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2024-05-02T12:49:54Z

🕵 fluentuiv9 No visual regressions between this PR and main

github-actions Bot added this to the March Project Cycle Q1 2024 milestone Mar 12, 2024

layershifter force-pushed the poc/try-shorthands branch from ac4d0af to 1d67ef9 Compare March 12, 2024 09:40

layershifter force-pushed the poc/try-shorthands branch from 1d67ef9 to 3268fa6 Compare March 12, 2024 09:47

layershifter force-pushed the poc/try-shorthands branch from 3268fa6 to f2440dd Compare March 12, 2024 10:35

layershifter force-pushed the poc/try-shorthands branch 6 times, most recently from 5689342 to a9fbc04 Compare March 12, 2024 14:23

layershifter force-pushed the poc/try-shorthands branch from a9fbc04 to 006900c Compare April 8, 2024 14:46

github-actions Bot modified the milestones: March Project Cycle Q1 2024, April Project Cycle Q1 2024 Apr 8, 2024

layershifter force-pushed the poc/try-shorthands branch 6 times, most recently from 94d40d6 to a197fbe Compare April 12, 2024 15:53

layershifter force-pushed the poc/try-shorthands branch 2 times, most recently from 84adea5 to 9eb88aa Compare April 16, 2024 11:31

layershifter force-pushed the poc/try-shorthands branch 3 times, most recently from 42ae137 to 082c5ef Compare April 17, 2024 08:34

layershifter force-pushed the poc/try-shorthands branch 6 times, most recently from 78153f7 to a5f52a6 Compare May 2, 2024 09:48

try shorthands

8fb93cb

layershifter force-pushed the poc/try-shorthands branch from a5f52a6 to 8fb93cb Compare May 2, 2024 12:22

layershifter closed this May 14, 2024

layershifter mentioned this pull request May 14, 2024

chore: bump @griffel/* packages #31258

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

poc/try shorthands#30765

poc/try shorthands#30765
layershifter wants to merge 1 commit into
microsoft:masterfrom
layershifter:poc/try-shorthands

layershifter commented Mar 12, 2024

Uh oh!

fabricteam commented Mar 12, 2024 •

edited

Loading

Uh oh!

layershifter commented Mar 12, 2024

Uh oh!

azure-pipelines Bot commented Mar 12, 2024

Uh oh!

fabricteam commented Mar 12, 2024 •

edited

Loading

Uh oh!

fabricteam commented Mar 12, 2024 •

edited

Loading

Uh oh!

fabricteam commented Mar 12, 2024 •

edited

Loading

Uh oh!

fabricteam commented Mar 12, 2024 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Mar 12, 2024 •

edited

Loading

Uh oh!

fabricteam commented Mar 12, 2024 •

edited

Loading

Uh oh!

fabricteam commented May 2, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

layershifter commented Mar 12, 2024

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

layershifter commented Mar 12, 2024

Uh oh!

azure-pipelines Bot commented Mar 12, 2024

Uh oh!

fabricteam commented Mar 12, 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 Mar 12, 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 Mar 12, 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!

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

Uh oh!

Uh oh!

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

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

fabricteam commented May 2, 2024

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fabricteam commented Mar 12, 2024 •

edited

Loading

fabricteam commented Mar 12, 2024 •

edited

Loading

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

fabricteam commented Mar 12, 2024 •

edited

Loading

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

fabricteam commented Mar 12, 2024 •

edited

Loading

fabricteam commented Mar 12, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react`)

codesandbox-ci Bot commented Mar 12, 2024 •

edited

Loading

fabricteam commented Mar 12, 2024 •

edited

Loading