feat(vr-assert): implement visual-regression-assert cli #34024

Hotell · 2025-03-18T14:54:24Z

Previous Behavior

New Behavior

Implements visual regression assert CLI for CI and Local env usage for diffing scenarios. (result of FHL Spring 2025)

More details -> https://github.com/microsoft/fluentui/blob/22c7982af977b6472c15dfc2a31291eead05a2c8/tools/visual-regression-assert/README.md

Related Issue(s)

Fixes #

github-actions · 2025-03-18T15:24:43Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react` ExtendedPicker	`96.915 kB` `27.908 kB`	`96.915 kB` `27.907 kB`	`-1 B`
`react` FloatingPicker	`242.388 kB` `69.002 kB`	`242.388 kB` `69.003 kB`	`1 B`
`react` Fluent UI React (entire library)	`1.019 MB` `282.96 kB`	`1.019 MB` `282.962 kB`	`2 B`
`react` SelectedItemsList	`232.878 kB` `67.891 kB`	`232.878 kB` `67.893 kB`	`2 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`
`keyboard-keys` Multiple keyCodes	`50 B` `70 B`
`keyboard-keys` Multiple keys	`87 B` `94 B`
`keyboard-keys` Single key	`44 B` `64 B`
`keyboard-keys` Single keyCode	`39 B` `59 B`
`priority-overflow` createOverflowManager	`4.481 kB` `1.864 kB`
`react` ActivityItem	`71.236 kB` `23.357 kB`
`react` Announced	`38.489 kB` `13.296 kB`
`react` Autofill	`15.459 kB` `4.782 kB`
`react` Breadcrumb	`202.318 kB` `60.388 kB`
`react` Button	`195.791 kB` `56.627 kB`
`react` ButtonGrid	`180.722 kB` `54.627 kB`
`react` Calendar	`121.875 kB` `37.024 kB`
`react` Callout	`84.323 kB` `27.64 kB`
`react` Check	`53.204 kB` `17.848 kB`
`react` Checkbox	`59.985 kB` `19.903 kB`
`react` ChoiceGroup	`65.494 kB` `21.489 kB`
`react` ChoiceGroupOption	`58.767 kB` `19.362 kB`
`react` Coachmark	`93.121 kB` `29.414 kB`
`react` Color	`7.789 kB` `3.127 kB`
`react` ColorPicker	`135.292 kB` `42.21 kB`
`react` ComboBox	`252.278 kB` `72.315 kB`
`react` CommandBar	`203.359 kB` `60.141 kB`
`react` ContextualMenu	`155.243 kB` `48.202 kB`
`react` DatePicker	`184.295 kB` `56.15 kB`
`react` DateTimeUtilities	`5.244 kB` `1.849 kB`
`react` DetailsList	`229.909 kB` `65.781 kB`
`react` Dialog	`211.717 kB` `63.165 kB`
`react` Divider	`19.603 kB` `6.845 kB`
`react` DocumentCard	`217.336 kB` `64.44 kB`
`react` DragDrop	`8.343 kB` `2.724 kB`
`react` DraggableZone	`34.303 kB` `11.511 kB`
`react` Dropdown	`234.695 kB` `68.743 kB`
`react` Fabric	`41.745 kB` `14.366 kB`
`react` Facepile	`210.893 kB` `63.167 kB`
`react` FocusTrapZone	`17.023 kB` `5.911 kB`
`react` FocusZone	`55.159 kB` `17.492 kB`
`react` Grid	`180.722 kB` `54.627 kB`
`react` GroupedList	`135.07 kB` `40.7 kB`
`react` GroupedListV2	`122.687 kB` `37.788 kB`
`react` HoverCard	`97.16 kB` `30.787 kB`
`react` Icon	`51.885 kB` `17.272 kB`
`react` Icons	`66.361 kB` `24.396 kB`
`react` Image	`46.904 kB` `15.707 kB`
`react` Keytip	`81.693 kB` `26.766 kB`
`react` KeytipData	`14.032 kB` `4.582 kB`
`react` KeytipLayer	`103.478 kB` `32.006 kB`
`react` Keytips	`106.242 kB` `33.002 kB`
`react` Label	`38.347 kB` `13.257 kB`
`react` Layer	`48.099 kB` `16.367 kB`
`react` Link	`39.682 kB` `13.67 kB`
`react` List	`39.371 kB` `12.463 kB`
`react` MarqueeSelection	`74.517 kB` `22.433 kB`
`react` MessageBar	`190.869 kB` `57.103 kB`
`react` Modal	`93.738 kB` `30.271 kB`
`react` Nav	`188.306 kB` `56.485 kB`
`react` OverflowSet	`33.385 kB` `11.314 kB`
`react` Overlay	`40.902 kB` `14.095 kB`
`react` Panel	`201.808 kB` `60.106 kB`
`react` Persona	`114.948 kB` `36.532 kB`
`react` PersonaCoin	`114.948 kB` `36.532 kB`
`react` PersonaPresence	`58.074 kB` `19.384 kB`
`react` Pickers	`299.085 kB` `83.664 kB`
`react` Pivot	`189.226 kB` `57.267 kB`
`react` Popup	`12.294 kB` `4.195 kB`
`react` Positioning	`22.807 kB` `7.701 kB`
`react` PositioningContainer	`73.827 kB` `23.758 kB`
`react` ProgressIndicator	`39.494 kB` `13.55 kB`
`react` Rating	`82.12 kB` `26.127 kB`
`react` ResizeGroup	`13.338 kB` `4.377 kB`
`react` ResponsiveMode	`8.13 kB` `2.966 kB`
`react` ScrollablePane	`55.557 kB` `17.728 kB`
`react` SearchBox	`189.118 kB` `56.68 kB`
`react` SelectableOption	`724 B` `413 B`
`react` Selection	`42.444 kB` `12.278 kB`
`react` Separator	`35.384 kB` `12.146 kB`
`react` Shimmer	`49.259 kB` `16.268 kB`
`react` ShimmeredDetailsList	`240.691 kB` `68.532 kB`
`react` Slider	`57.651 kB` `19.217 kB`
`react` SpinButton	`192.821 kB` `57.775 kB`
`react` Spinner	`41.775 kB` `14.48 kB`
`react` Stack	`42.074 kB` `14.405 kB`
`react` Sticky	`32.599 kB` `10.504 kB`
`react` Styling	`46.033 kB` `15.135 kB`
`react` SwatchColorPicker	`191.136 kB` `58.151 kB`
`react` TeachingBubble	`206.139 kB` `61.063 kB`
`react` Text	`36.908 kB` `12.822 kB`
`react` TextField	`80.79 kB` `25.315 kB`
`react` Theme	`43.493 kB` `14.173 kB`
`react` ThemeGenerator	`12.392 kB` `4.126 kB`
`react` TimePicker	`242.089 kB` `70.072 kB`
`react` Toggle	`46.225 kB` `15.986 kB`
`react` Tooltip	`87.437 kB` `28.26 kB`
`react` Utilities	`82.931 kB` `25.148 kB`
`react` Viewport	`23.888 kB` `7.656 kB`
`react` WeeklyDayPicker	`102.017 kB` `31.834 kB`
`react` WindowProvider	`1.059 kB` `541 B`
`react-accordion` Accordion (including children components)	`106.976 kB` `32.812 kB`
`react-aria` ARIA - Default	`237 B` `181 B`
`react-avatar` Avatar	`49.329 kB` `15.824 kB`
`react-avatar` AvatarGroup	`20.132 kB` `7.976 kB`
`react-avatar` AvatarGroupItem	`63.473 kB` `20.043 kB`
`react-badge` Badge	`25.98 kB` `8.602 kB`
`react-badge` CounterBadge	`26.759 kB` `8.879 kB`
`react-badge` PresenceBadge	`25.745 kB` `9.463 kB`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`114.719 kB` `31.752 kB`
`react-button` Button	`37.602 kB` `10.858 kB`
`react-button` CompoundButton	`44.016 kB` `12.162 kB`
`react-button` MenuButton	`42.417 kB` `12.209 kB`
`react-button` SplitButton	`50.482 kB` `13.776 kB`
`react-button` ToggleButton	`53.535 kB` `12.631 kB`
`react-calendar-compat` Calendar Compat	`150.095 kB` `40.026 kB`
`react-card` Card - All	`102.031 kB` `28.833 kB`
`react-card` Card	`94.677 kB` `26.996 kB`
`react-card` CardFooter	`14.56 kB` `5.874 kB`
`react-card` CardHeader	`17.093 kB` `6.745 kB`
`react-card` CardPreview	`14.626 kB` `6 kB`
`react-checkbox` Checkbox	`35.144 kB` `12.085 kB`
`react-color-picker` ColorArea	`50.206 kB` `17.662 kB`
`react-color-picker` ColorPicker	`18.848 kB` `7.503 kB`
`react-color-picker` ColorSlider	`42.392 kB` `15.711 kB`
`react-combobox` Combobox (including child components)	`105.999 kB` `34.632 kB`
`react-combobox` Dropdown (including child components)	`106.623 kB` `34.564 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`69.638 kB` `20.24 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`225.271 kB` `65.211 kB`
`react-components` react-components: FluentProvider & webLightTheme	`44.473 kB` `14.597 kB`
`react-components` react-components: entire library	`1.217 MB` `305.787 kB`
`react-datepicker-compat` DatePicker Compat	`225.971 kB` `64.065 kB`
`react-dialog` Dialog (including children components)	`101.099 kB` `30.381 kB`
`react-divider` Divider	`21.354 kB` `7.963 kB`
`react-field` Field	`23.425 kB` `8.905 kB`
`react-image` Image	`15.386 kB` `6.243 kB`
`react-input` Input	`28.04 kB` `9.451 kB`
`react-jsx-runtime` Classic Pragma	`1.057 kB` `530 B`
`react-jsx-runtime` JSX Dev Runtime	`3.771 kB` `1.643 kB`
`react-jsx-runtime` JSX Runtime	`4.367 kB` `1.874 kB`
`react-label` Label	`14.697 kB` `5.999 kB`
`react-link` Link	`17.625 kB` `7.146 kB`
`react-list` List	`89.19 kB` `26.607 kB`
`react-list` ListItem	`112.691 kB` `33.41 kB`
`react-menu` Menu (including children components)	`155.616 kB` `46.882 kB`
`react-menu` Menu (including selectable components)	`158.598 kB` `47.478 kB`
`react-message-bar` MessageBar (all components)	`24.882 kB` `9.269 kB`
`react-motion` @fluentui/react-motion - createMotionComponent()	`4.506 kB` `1.967 kB`
`react-motion` @fluentui/react-motion - createPresenceComponent()	`5.189 kB` `2.274 kB`
`react-motion` @fluentui/react-motion - PresenceGroup	`1.714 kB` `819 B`
`react-northstar` Accordion	`85.406 kB` `26.542 kB`
`react-northstar` Alert	`87.463 kB` `26.931 kB`
`react-northstar` Animation	`55.343 kB` `17.839 kB`
`react-northstar` Attachment	`86.851 kB` `26.721 kB`
`react-northstar` Avatar	`80.276 kB` `24.64 kB`
`react-northstar` Box	`75.245 kB` `23.819 kB`
`react-northstar` Breadcrumb	`79.92 kB` `24.723 kB`
`react-northstar` Button	`83.161 kB` `25.967 kB`
`react-northstar` Card	`82.705 kB` `25.047 kB`
`react-northstar` Carousel	`105.2 kB` `31.902 kB`
`react-northstar` Chat	`154.119 kB` `46.93 kB`
`react-northstar` Checkbox	`79.808 kB` `25.096 kB`
`react-northstar` Datepicker	`186.672 kB` `57.026 kB`
`react-northstar` Debug	`8.8 kB` `3.595 kB`
`react-northstar` Design	`36.595 kB` `12.073 kB`
`react-northstar` Dialog	`112.07 kB` `33.637 kB`
`react-northstar` Divider	`76.616 kB` `24.141 kB`
`react-northstar` Dropdown	`198.27 kB` `60.275 kB`
`react-northstar` Embed	`81.479 kB` `25.443 kB`
`react-northstar` Flex	`47.728 kB` `15.451 kB`
`react-northstar` Form	`92.537 kB` `28.908 kB`
`react-northstar` Grid	`70.581 kB` `22.289 kB`
`react-northstar` Header	`74.753 kB` `23.477 kB`
`react-northstar` Image	`73.588 kB` `23.34 kB`
`react-northstar` Input	`88.35 kB` `27.801 kB`
`react-northstar` ItemLayout	`78.253 kB` `24.484 kB`
`react-northstar` Label	`77.917 kB` `24.422 kB`
`react-northstar` Layout	`75.404 kB` `23.819 kB`
`react-northstar` List	`88.493 kB` `27.569 kB`
`react-northstar` Loader	`78.617 kB` `24.749 kB`
`react-northstar` Menu	`128.605 kB` `40.751 kB`
`react-northstar` MenuButton	`163.013 kB` `49.642 kB`
`react-northstar` Pill	`83.719 kB` `26.084 kB`
`react-northstar` Popup	`135.32 kB` `42.278 kB`
`react-northstar` Portal	`58.33 kB` `18.854 kB`
`react-northstar` Provider	`93.14 kB` `29.653 kB`
`react-northstar` RadioGroup	`83.286 kB` `26.072 kB`
`react-northstar` Reaction	`77.281 kB` `24.147 kB`
`react-northstar` Segment	`76.206 kB` `23.911 kB`
`react-northstar` Skeleton	`77.762 kB` `24.214 kB`
`react-northstar` Slider	`84.28 kB` `26.775 kB`
`react-northstar` SplitButton	`178.255 kB` `53.474 kB`
`react-northstar` Status	`76.269 kB` `24.065 kB`
`react-northstar` SvgIcon	`36.817 kB` `11.753 kB`
`react-northstar` Table	`80.8 kB` `25.172 kB`
`react-northstar` Text	`74.111 kB` `23.524 kB`
`react-northstar` TextArea	`74.245 kB` `23.507 kB`
`react-northstar` Toolbar	`175.072 kB` `52.868 kB`
`react-northstar` Tooltip	`109.976 kB` `35.257 kB`
`react-northstar` Tree	`87.854 kB` `27.236 kB`
`react-northstar` Video	`75.411 kB` `23.808 kB`
`react-overflow` hooks only	`12.832 kB` `4.828 kB`
`react-persona` Persona	`56.22 kB` `17.704 kB`
`react-popover` Popover	`131.05 kB` `41.016 kB`
`react-portal` Portal	`14.563 kB` `5.118 kB`
`react-portal-compat` PortalCompatProvider	`8.39 kB` `2.64 kB`
`react-positioning` usePositioning	`28.144 kB` `10.046 kB`
`react-progress` ProgressBar	`17.11 kB` `6.899 kB`
`react-provider` FluentProvider	`24.649 kB` `8.902 kB`
`react-radio` Radio	`32.698 kB` `10.351 kB`
`react-radio` RadioGroup	`15.788 kB` `6.431 kB`
`react-select` Select	`27.758 kB` `10.131 kB`
`react-slider` Slider	`37.994 kB` `12.723 kB`
`react-spinbutton` SpinButton	`35.24 kB` `11.754 kB`
`react-spinner` Spinner	`25.271 kB` `8.547 kB`
`react-swatch-picker` @fluentui/react-swatch-picker - package	`105.112 kB` `30.526 kB`
`react-switch` Switch	`35.345 kB` `11.322 kB`
`react-table` DataGrid	`160.994 kB` `45.684 kB`
`react-table` Table (Primitives only)	`42.692 kB` `13.862 kB`
`react-table` Table as DataGrid	`131.895 kB` `36.579 kB`
`react-table` Table (Selection only)	`70.562 kB` `20.007 kB`
`react-table` Table (Sort only)	`69.205 kB` `19.618 kB`
`react-tag-picker` @fluentui/react-tag-picker - package	`186.419 kB` `56.035 kB`
`react-tags` InteractionTag	`15.461 kB` `6.224 kB`
`react-tags` Tag	`29.849 kB` `9.732 kB`
`react-tags` TagGroup	`83.532 kB` `24.803 kB`
`react-teaching-popover` TeachingPopover	`101.357 kB` `30.465 kB`
`react-text` Text - Default	`17.087 kB` `6.731 kB`
`react-text` Text - Wrappers	`20.268 kB` `7.055 kB`
`react-textarea` Textarea	`26.607 kB` `9.762 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`35.835 kB` `7.512 kB`
`react-theme` Teams: Light theme	`19.794 kB` `5.602 kB`
`react-timepicker-compat` TimePicker	`108.988 kB` `36.217 kB`
`react-toast` Toast (including Toaster)	`101.201 kB` `30.45 kB`
`react-tooltip` Tooltip	`57.131 kB` `19.949 kB`
`react-tree` FlatTree	`147.751 kB` `42.374 kB`
`react-tree` PersonaFlatTree	`148.496 kB` `42.517 kB`
`react-tree` PersonaTree	`144.707 kB` `41.371 kB`
`react-tree` Tree	`143.968 kB` `41.245 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against acdeb9d1898c378c6168adb6d4e48710c403266d}

fabricteam · 2025-03-18T15:25:48Z

🕵 FluentUIV0 No visual regressions between this PR and main

github-actions · 2025-03-18T15:26:12Z

Pull request demo site: URL

.github/CODEOWNERS

)

github-actions bot added this to the March Project Cycle Q1 2025 milestone Mar 18, 2025

github-actions bot added CI NX: core labels Mar 18, 2025

Hotell force-pushed the vrt/assert branch 2 times, most recently from d1a9b87 to 999e4c9 Compare March 18, 2025 15:12

Hotell force-pushed the vrt/assert branch 2 times, most recently from 22c7982 to 8727c9c Compare March 18, 2025 15:39

fabricteam reviewed Mar 18, 2025

View reviewed changes

.github/CODEOWNERS Show resolved Hide resolved

fabricteam reviewed Mar 18, 2025

View reviewed changes

.github/CODEOWNERS Show resolved Hide resolved

fabricteam reviewed Mar 18, 2025

View reviewed changes

.github/CODEOWNERS Show resolved Hide resolved

Hotell force-pushed the vrt/assert branch 2 times, most recently from 33a7cd3 to fc24732 Compare March 18, 2025 17:26

feat(vr-assert): implement visual-regression-assert cli

38dabae

Hotell force-pushed the vrt/assert branch from fc24732 to 38dabae Compare March 18, 2025 17:50

Hotell added the tools label Mar 18, 2025

Hotell marked this pull request as ready for review March 18, 2025 18:34

Hotell requested review from a team, JustSlone, jurokapsiar and tudorpopams as code owners March 18, 2025 18:34

Hotell requested a review from mainframev March 18, 2025 18:34

Hotell mentioned this pull request Mar 19, 2025

ci: add vrt pipelines workflow for new visual regression assert CLI #34027

Merged

mainframev approved these changes Mar 19, 2025

View reviewed changes

Hotell merged commit a8c8657 into microsoft:master Mar 19, 2025
18 checks passed

Hotell deleted the vrt/assert branch March 19, 2025 09:42

Hotell mentioned this pull request Mar 19, 2025

feat(react-text-vr): bootstrap visual-regression project #34030

Draft

mainframev pushed a commit to mainframev/fluentui that referenced this pull request Jun 9, 2025

feat(vr-assert): implement visual-regression-assert cli (microsoft#34024

e912850

)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(vr-assert): implement visual-regression-assert cli #34024

feat(vr-assert): implement visual-regression-assert cli #34024

Uh oh!

Hotell commented Mar 18, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 18, 2025 •

edited

Loading

Uh oh!

fabricteam commented Mar 18, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 18, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(vr-assert): implement visual-regression-assert cli #34024

feat(vr-assert): implement visual-regression-assert cli #34024

Uh oh!

Conversation

Hotell commented Mar 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

github-actions bot commented Mar 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Mar 18, 2025 • 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!

github-actions bot commented Mar 18, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Hotell commented Mar 18, 2025 •

edited

Loading

github-actions bot commented Mar 18, 2025 •

edited

Loading

fabricteam commented Mar 18, 2025 •

edited

Loading