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.

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

Carousel: Stable Release #32883

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

Mitch-At-Work
Copy link
Contributor

WARNING: Our stable script is currently broken in production, this PR will remain in draft until verified it has been set to stable correctly.

Previous Behavior

Carousel in preview

New Behavior

Carousel in release

Related Issue(s)

@fabricteam
Copy link
Collaborator

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

@@ -364,9 +364,9 @@ packages/react-components/react-icons-compat/stories @microsoft/cxe-red @tomi-ms
packages/react-components/react-tag-picker @microsoft/teams-prg
Copy link
Collaborator

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual regressions to review in the fluentuiv8 Visual Regression Report

react-charting-AreaChart 1 screenshots
Image Name Diff(in Pixels) Image Type
react-charting-AreaChart.Custom Accessibility.chromium.png 11 Changed
react-charting-LineChart 1 screenshots
Image Name Diff(in Pixels) Image Type
react-charting-LineChart.Gaps.chromium.png 1 Changed

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender 36 36 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 641 623 5000
Button mount 305 334 5000
Field mount 1188 1125 5000
FluentProvider mount 701 706 5000
FluentProviderWithTheme mount 83 84 10
FluentProviderWithTheme virtual-rerender 36 36 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 78 78 10
MakeStyles mount 889 863 50000
Persona mount 1763 1713 5000
SpinButton mount 1416 1401 5000
SwatchPicker mount 1662 1689 5000

@fabricteam
Copy link
Collaborator

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
RefMinimalPerf.default 121 107 1.13:1
AvatarMinimalPerf.default 115 104 1.11:1
GridMinimalPerf.default 207 189 1.1:1
TreeWith60ListItems.default 91 83 1.1:1
ButtonSlotsPerf.default 325 298 1.09:1
SkeletonMinimalPerf.default 209 192 1.09:1
ChatDuplicateMessagesPerf.default 157 146 1.08:1
ChatWithPopoverPerf.default 219 203 1.08:1
HeaderMinimalPerf.default 219 203 1.08:1
TextMinimalPerf.default 204 189 1.08:1
CarouselMinimalPerf.default 274 255 1.07:1
ButtonMinimalPerf.default 92 87 1.06:1
DropdownManyItemsPerf.default 404 382 1.06:1
FlexMinimalPerf.default 160 151 1.06:1
DropdownMinimalPerf.default 1473 1406 1.05:1
LayoutMinimalPerf.default 216 205 1.05:1
LoaderMinimalPerf.default 199 190 1.05:1
SegmentMinimalPerf.default 200 190 1.05:1
DialogMinimalPerf.default 463 445 1.04:1
EmbedMinimalPerf.default 1935 1863 1.04:1
ListMinimalPerf.default 316 305 1.04:1
StatusMinimalPerf.default 408 391 1.04:1
ItemLayoutMinimalPerf.default 720 696 1.03:1
ListCommonPerf.default 394 381 1.03:1
ListNestedPerf.default 324 314 1.03:1
RosterPerf.default 1592 1546 1.03:1
ProviderMergeThemesPerf.default 664 645 1.03:1
TooltipMinimalPerf.default 1308 1271 1.03:1
AnimationMinimalPerf.default 303 298 1.02:1
PortalMinimalPerf.default 87 85 1.02:1
ProviderMinimalPerf.default 205 201 1.02:1
TableManyItemsPerf.default 1123 1101 1.02:1
ToolbarMinimalPerf.default 536 524 1.02:1
BoxMinimalPerf.default 200 198 1.01:1
CheckboxMinimalPerf.default 1169 1158 1.01:1
DividerMinimalPerf.default 210 208 1.01:1
HeaderSlotsPerf.default 461 455 1.01:1
MenuButtonMinimalPerf.default 970 965 1.01:1
SliderMinimalPerf.default 750 745 1.01:1
ButtonOverridesMissPerf.default 653 650 1:1
DatepickerMinimalPerf.default 3614 3622 1:1
InputMinimalPerf.default 550 549 1:1
TextAreaMinimalPerf.default 302 303 1:1
AlertMinimalPerf.default 160 162 0.99:1
MenuMinimalPerf.default 504 508 0.99:1
PopupMinimalPerf.default 352 355 0.99:1
SplitButtonMinimalPerf.default 2284 2316 0.99:1
IconMinimalPerf.default 382 385 0.99:1
CustomToolbarPrototype.default 1494 1507 0.99:1
VideoMinimalPerf.default 436 441 0.99:1
AttachmentSlotsPerf.default 654 668 0.98:1
TreeMinimalPerf.default 488 499 0.98:1
ListWith60ListItems.default 349 359 0.97:1
TableMinimalPerf.default 232 238 0.97:1
AccordionMinimalPerf.default 81 84 0.96:1
CardMinimalPerf.default 298 310 0.96:1
ImageMinimalPerf.default 217 225 0.96:1
LabelMinimalPerf.default 219 229 0.96:1
AttachmentMinimalPerf.default 75 79 0.95:1
ChatMinimalPerf.default 433 457 0.95:1
RadioGroupMinimalPerf.default 249 262 0.95:1
ReactionMinimalPerf.default 208 220 0.95:1
FormMinimalPerf.default 219 235 0.93:1

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.1 MB
271.983 kB
1.147 MB
287.126 kB
47.365 kB
15.143 kB
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.224 kB
23.353 kB
react
Announced
38.48 kB
13.282 kB
react
Autofill
15.428 kB
4.768 kB
react
Breadcrumb
202.185 kB
60.419 kB
react
Button
195.64 kB
56.642 kB
react
ButtonGrid
180.571 kB
54.626 kB
react
Calendar
121.763 kB
37.01 kB
react
Callout
84.292 kB
27.63 kB
react
Check
53.185 kB
17.843 kB
react
Checkbox
59.971 kB
19.889 kB
react
ChoiceGroup
65.48 kB
21.488 kB
react
ChoiceGroupOption
58.748 kB
19.364 kB
react
Coachmark
93.132 kB
29.416 kB
react
Color
7.789 kB
3.127 kB
react
ColorPicker
135.222 kB
42.228 kB
react
ComboBox
252.077 kB
72.336 kB
react
CommandBar
203.226 kB
60.147 kB
react
ContextualMenu
155.108 kB
48.186 kB
react
DatePicker
184.185 kB
56.175 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
DetailsList
229.966 kB
65.926 kB
react
Dialog
211.492 kB
63.169 kB
react
Divider
19.591 kB
6.841 kB
react
DocumentCard
217.178 kB
64.45 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
34.305 kB
11.509 kB
react
Dropdown
234.124 kB
68.674 kB
react
ExtendedPicker
96.795 kB
27.893 kB
react
Fabric
41.732 kB
14.349 kB
react
Facepile
210.78 kB
63.193 kB
react
FloatingPicker
242.221 kB
69.023 kB
react
FocusTrapZone
17.03 kB
5.924 kB
react
FocusZone
55.053 kB
17.47 kB
react
Grid
180.571 kB
54.626 kB
react
GroupedList
135.03 kB
40.749 kB
react
GroupedListV2
122.619 kB
37.852 kB
react
HoverCard
97.16 kB
30.816 kB
react
Icon
51.873 kB
17.266 kB
react
Icons
66.361 kB
24.397 kB
react
Image
46.887 kB
15.703 kB
react
Keytip
81.661 kB
26.758 kB
react
KeytipData
14.028 kB
4.587 kB
react
KeytipLayer
103.459 kB
32.014 kB
react
Keytips
106.227 kB
33.014 kB
react
Label
38.335 kB
13.251 kB
react
Layer
48.084 kB
16.358 kB
react
Link
39.668 kB
13.662 kB
react
List
39.4 kB
12.481 kB
react
MarqueeSelection
74.528 kB
22.424 kB
react
MessageBar
190.675 kB
57.075 kB
react
Modal
93.657 kB
30.253 kB
react
Nav
188.175 kB
56.524 kB
react
OverflowSet
33.376 kB
11.317 kB
react
Overlay
40.889 kB
14.084 kB
react
Panel
201.233 kB
60.035 kB
react
Persona
114.83 kB
36.503 kB
react
PersonaCoin
114.83 kB
36.503 kB
react
PersonaPresence
58.055 kB
19.378 kB
react
Pickers
294.244 kB
82.438 kB
react
Pivot
189.068 kB
57.252 kB
react
Popup
12.294 kB
4.195 kB
react
Positioning
22.807 kB
7.701 kB
react
PositioningContainer
73.838 kB
23.759 kB
react
ProgressIndicator
39.491 kB
13.54 kB
react
Rating
81.995 kB
26.107 kB
react
Fluent UI React (entire library)
1.014 MB
281.935 kB
react
ResizeGroup
13.338 kB
4.377 kB
react
ResponsiveMode
8.13 kB
2.966 kB
react
ScrollablePane
55.551 kB
17.729 kB
react
SearchBox
188.95 kB
56.685 kB
react
SelectableOption
724 B
413 B
react
SelectedItemsList
232.732 kB
67.931 kB
react
Selection
42.464 kB
12.301 kB
react
Separator
35.372 kB
12.142 kB
react
Shimmer
49.238 kB
16.264 kB
react
ShimmeredDetailsList
240.748 kB
68.656 kB
react
Slider
57.639 kB
19.206 kB
react
SpinButton
192.651 kB
57.78 kB
react
Spinner
41.764 kB
14.469 kB
react
Stack
41.734 kB
14.268 kB
react
Sticky
32.613 kB
10.509 kB
react
Styling
46.033 kB
15.135 kB
react
SwatchColorPicker
190.896 kB
58.128 kB
react
TeachingBubble
205.952 kB
61.057 kB
react
Text
36.908 kB
12.822 kB
react
TextField
80.792 kB
25.333 kB
react
Theme
43.501 kB
14.183 kB
react
ThemeGenerator
12.392 kB
4.126 kB
react
TimePicker
241.859 kB
70.092 kB
react
Toggle
46.21 kB
15.966 kB
react
Tooltip
87.324 kB
28.217 kB
react
Utilities
82.675 kB
25.119 kB
react
Viewport
23.888 kB
7.656 kB
react
WeeklyDayPicker
101.917 kB
31.829 kB
react
WindowProvider
1.059 kB
541 B
react-accordion
Accordion (including children components)
104.529 kB
32.097 kB
react-avatar
Avatar
49.303 kB
15.815 kB
react-avatar
AvatarGroup
20.106 kB
7.968 kB
react-avatar
AvatarGroupItem
63.447 kB
20.034 kB
react-badge
Badge
25.954 kB
8.595 kB
react-badge
CounterBadge
26.733 kB
8.872 kB
react-badge
PresenceBadge
25.719 kB
9.457 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
113.699 kB
31.498 kB
react-button
Button
37.104 kB
10.766 kB
react-button
CompoundButton
43.518 kB
12.068 kB
react-button
MenuButton
41.916 kB
12.119 kB
react-button
SplitButton
49.933 kB
13.693 kB
react-button
ToggleButton
53.037 kB
12.528 kB
react-calendar-compat
Calendar Compat
149.573 kB
39.871 kB
react-card
Card - All
101.248 kB
28.626 kB
react-card
Card
94.022 kB
26.806 kB
react-card
CardFooter
14.355 kB
5.79 kB
react-card
CardHeader
16.888 kB
6.669 kB
react-card
CardPreview
14.42 kB
5.922 kB
react-checkbox
Checkbox
35.118 kB
12.077 kB
react-combobox
Combobox (including child components)
104.398 kB
34.199 kB
react-combobox
Dropdown (including child components)
104.984 kB
34.114 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.14 kB
20.137 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
218.197 kB
63.203 kB
react-components
react-components: FluentProvider & webLightTheme
44.447 kB
14.59 kB
react-datepicker-compat
DatePicker Compat
223.64 kB
63.299 kB
react-dialog
Dialog (including children components)
99.724 kB
29.912 kB
react-divider
Divider
21.328 kB
7.953 kB
react-field
Field
23.384 kB
8.891 kB
react-image
Image
15.36 kB
6.236 kB
react-input
Input
28.014 kB
9.444 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.671 kB
5.99 kB
react-link
Link
17.192 kB
6.98 kB
react-list-preview
List
88.626 kB
26.435 kB
react-list-preview
ListItem
112.168 kB
33.273 kB
react-menu
Menu (including children components)
151.856 kB
45.848 kB
react-menu
Menu (including selectable components)
154.537 kB
46.326 kB
react-message-bar
MessageBar (all components)
24.722 kB
9.205 kB
react-motion
@fluentui/react-motion - createMotionComponent()
4.303 kB
1.899 kB
react-motion
@fluentui/react-motion - createPresenceComponent()
5.038 kB
2.229 kB
react-motion
@fluentui/react-motion - PresenceGroup
1.714 kB
819 B
react-northstar
Accordion
85.383 kB
26.519 kB
react-northstar
Alert
87.438 kB
26.904 kB
react-northstar
Animation
55.331 kB
17.83 kB
react-northstar
Attachment
86.832 kB
26.7 kB
react-northstar
Avatar
80.267 kB
24.633 kB
react-northstar
Box
75.236 kB
23.812 kB
react-northstar
Breadcrumb
79.911 kB
24.717 kB
react-northstar
Button
83.148 kB
25.952 kB
react-northstar
Card
82.696 kB
25.036 kB
react-northstar
Carousel
105.173 kB
31.872 kB
react-northstar
Chat
154.081 kB
46.876 kB
react-northstar
Checkbox
79.795 kB
25.08 kB
react-northstar
Datepicker
186.642 kB
56.99 kB
react-northstar
Debug
8.801 kB
3.594 kB
react-northstar
Design
36.589 kB
12.067 kB
react-northstar
Dialog
112.049 kB
33.622 kB
react-northstar
Divider
76.607 kB
24.135 kB
react-northstar
Dropdown
198.202 kB
60.222 kB
react-northstar
Embed
81.468 kB
25.424 kB
react-northstar
Flex
47.716 kB
15.443 kB
react-northstar
Form
92.518 kB
28.888 kB
react-northstar
Grid
70.572 kB
22.282 kB
react-northstar
Header
74.744 kB
23.465 kB
react-northstar
Image
73.579 kB
23.333 kB
react-northstar
Input
88.337 kB
27.78 kB
react-northstar
ItemLayout
78.219 kB
24.458 kB
react-northstar
Label
77.908 kB
24.413 kB
react-northstar
Layout
75.381 kB
23.803 kB
react-northstar
List
88.481 kB
27.556 kB
react-northstar
Loader
78.604 kB
24.733 kB
react-northstar
Menu
128.593 kB
40.737 kB
react-northstar
MenuButton
162.999 kB
49.613 kB
react-northstar
Pill
83.71 kB
26.069 kB
react-northstar
Popup
135.307 kB
42.257 kB
react-northstar
Portal
58.329 kB
18.851 kB
react-northstar
Provider
93.129 kB
29.627 kB
react-northstar
RadioGroup
83.273 kB
26.053 kB
react-northstar
Reaction
77.268 kB
24.127 kB
react-northstar
Segment
76.197 kB
23.896 kB
react-northstar
Skeleton
77.753 kB
24.205 kB
react-northstar
Slider
84.261 kB
26.755 kB
react-northstar
SplitButton
178.237 kB
53.438 kB
react-northstar
Status
76.26 kB
24.054 kB
react-northstar
SvgIcon
36.811 kB
11.746 kB
react-northstar
Table
80.787 kB
25.156 kB
react-northstar
Text
74.102 kB
23.511 kB
react-northstar
TextArea
74.236 kB
23.496 kB
react-northstar
Toolbar
175.048 kB
52.846 kB
react-northstar
Tooltip
109.964 kB
35.236 kB
react-northstar
Tree
87.843 kB
27.222 kB
react-northstar
Video
75.402 kB
23.797 kB
react-overflow
hooks only
12.808 kB
4.819 kB
react-persona
Persona
56.194 kB
17.695 kB
react-popover
Popover
128.329 kB
40.143 kB
react-portal
Portal
14.563 kB
5.118 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-positioning
usePositioning
27.057 kB
9.698 kB
react-progress
ProgressBar
17.084 kB
6.891 kB
react-provider
FluentProvider
24.623 kB
8.893 kB
react-radio
Radio
32.672 kB
10.343 kB
react-radio
RadioGroup
15.762 kB
6.423 kB
react-select
Select
27.732 kB
10.124 kB
react-slider
Slider
37.169 kB
12.538 kB
react-spinbutton
SpinButton
36.06 kB
11.815 kB
react-spinner
Spinner
25.245 kB
8.539 kB
react-swatch-picker
@fluentui/react-swatch-picker - package
103.736 kB
30.073 kB
react-switch
Switch
35.319 kB
11.314 kB
react-table
DataGrid
160.471 kB
45.539 kB
react-table
Table (Primitives only)
42.643 kB
13.82 kB
react-table
Table as DataGrid
131.325 kB
36.373 kB
react-table
Table (Selection only)
70.512 kB
19.965 kB
react-table
Table (Sort only)
69.155 kB
19.576 kB
react-tag-picker
@fluentui/react-tag-picker - package
183.584 kB
55.264 kB
react-tags
InteractionTag
15.199 kB
6.157 kB
react-tags
Tag
29.016 kB
9.524 kB
react-tags
TagGroup
82.197 kB
24.362 kB
react-text
Text - Default
17.061 kB
6.723 kB
react-text
Text - Wrappers
20.242 kB
7.048 kB
react-textarea
Textarea
26.572 kB
9.755 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-timepicker-compat
TimePicker
107.387 kB
35.758 kB
react-toast
Toast (including Toaster)
97.816 kB
29.438 kB
react-tooltip
Tooltip
55.517 kB
19.515 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against c189a92730fbf4befd28fad97fc27638c277207d

@@ -364,9 +364,9 @@ packages/react-components/react-icons-compat/stories @microsoft/cxe-red @tomi-ms
packages/react-components/react-tag-picker @microsoft/teams-prg
Copy link
Collaborator

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Avatar Converged 2 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.Badge Mask RTL.chromium.png 3 Changed
Avatar Converged.badgeMask.chromium.png 18 Changed
Drawer 2 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.Full Overlay Dark Mode.chromium.png 2513 Changed
Drawer.overlay drawer full.chromium.png 1167 Changed

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 618 619 5000
Breadcrumb mount 1688 1707 1000
Checkbox mount 1697 1689 5000
CheckboxBase mount 1542 1496 5000
ChoiceGroup mount 2935 2959 5000
ComboBox mount 674 668 1000
CommandBar mount 6600 6767 1000
ContextualMenu mount 13646 13472 1000
DefaultButton mount 797 812 5000
DetailsRow mount 2206 2266 5000
DetailsRowFast mount 2251 2273 5000
DetailsRowNoStyles mount 2037 2057 5000
Dialog mount 2835 2752 1000
DocumentCardTitle mount 235 228 1000
Dropdown mount 2013 2041 5000
FocusTrapZone mount 1170 1159 5000
FocusZone mount 1073 1073 5000
GroupedList mount 42200 42920 2
GroupedList virtual-rerender 20395 20354 2
GroupedList virtual-rerender-with-unmount 52036 52169 2
GroupedListV2 mount 226 232 2
GroupedListV2 virtual-rerender 213 217 2
GroupedListV2 virtual-rerender-with-unmount 233 227 2
IconButton mount 1127 1162 5000
Label mount 344 341 5000
Layer mount 2764 2789 5000
Link mount 400 407 5000
MenuButton mount 1001 1007 5000
MessageBar mount 21448 21140 5000
Nav mount 2001 2076 1000
OverflowSet mount 786 785 5000
Panel mount 1824 1856 1000
Persona mount 724 752 1000
Pivot mount 922 898 1000
PrimaryButton mount 954 917 5000
Rating mount 4702 4692 5000
SearchBox mount 922 959 5000
Shimmer mount 1896 1892 5000
Slider mount 1360 1302 5000
SpinButton mount 2916 3001 5000
Spinner mount 409 384 5000
SplitButton mount 1850 1864 5000
Stack mount 441 430 5000
StackWithIntrinsicChildren mount 868 859 5000
StackWithTextChildren mount 2755 2813 5000
SwatchColorPicker mount 6445 6448 5000
TagPicker mount 1482 1477 5000
Text mount 387 389 5000
TextField mount 963 936 5000
ThemeProvider mount 852 856 5000
ThemeProvider virtual-rerender 570 572 5000
ThemeProvider virtual-rerender-with-unmount 1299 1317 5000
Toggle mount 618 635 5000
buttonNative mount 191 193 5000

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Carousel
2 participants