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

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

Mitch-At-Work
Copy link
Contributor

@Mitch-At-Work Mitch-At-Work commented Sep 20, 2024

V9 react-carousel stable release.

Previous Behavior

Carousel in preview

New Behavior

Carousel in release

Related Issue(s)

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 20, 2024

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 647 662 5000
Button mount 307 318 5000
Field mount 1149 1165 5000
FluentProvider mount 742 749 5000
FluentProviderWithTheme mount 105 91 10
FluentProviderWithTheme virtual-rerender 37 42 10
FluentProviderWithTheme virtual-rerender-with-unmount 89 101 10
MakeStyles mount 856 883 50000
Persona mount 1836 1771 5000
SpinButton mount 1463 1473 5000
SwatchPicker mount 1711 1717 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 20, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 20, 2024

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
AttachmentMinimalPerf.default 84 83 1.01:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 98 78 1.26:1
ProviderMinimalPerf.default 227 201 1.13:1
AvatarMinimalPerf.default 117 106 1.1:1
DividerMinimalPerf.default 211 196 1.08:1
SkeletonMinimalPerf.default 210 195 1.08:1
CarouselMinimalPerf.default 267 249 1.07:1
TreeWith60ListItems.default 88 82 1.07:1
AnimationMinimalPerf.default 314 297 1.06:1
ButtonSlotsPerf.default 329 311 1.06:1
AttachmentSlotsPerf.default 645 612 1.05:1
CardMinimalPerf.default 311 297 1.05:1
LabelMinimalPerf.default 226 215 1.05:1
LayoutMinimalPerf.default 205 195 1.05:1
ReactionMinimalPerf.default 216 206 1.05:1
AlertMinimalPerf.default 164 157 1.04:1
DropdownManyItemsPerf.default 404 387 1.04:1
PortalMinimalPerf.default 87 84 1.04:1
RadioGroupMinimalPerf.default 264 253 1.04:1
TextAreaMinimalPerf.default 292 280 1.04:1
DropdownMinimalPerf.default 1447 1409 1.03:1
HeaderSlotsPerf.default 468 454 1.03:1
ItemLayoutMinimalPerf.default 718 696 1.03:1
MenuMinimalPerf.default 516 501 1.03:1
TooltipMinimalPerf.default 1259 1227 1.03:1
CheckboxMinimalPerf.default 1151 1126 1.02:1
DialogMinimalPerf.default 452 445 1.02:1
ListCommonPerf.default 402 393 1.02:1
MenuButtonMinimalPerf.default 971 951 1.02:1
PopupMinimalPerf.default 355 349 1.02:1
RefMinimalPerf.default 112 110 1.02:1
TableMinimalPerf.default 237 233 1.02:1
RosterPerf.default 1559 1540 1.01:1
SegmentMinimalPerf.default 200 198 1.01:1
ChatMinimalPerf.default 441 441 1:1
ImageMinimalPerf.default 228 228 1:1
ListMinimalPerf.default 307 307 1:1
ProviderMergeThemesPerf.default 655 655 1:1
SplitButtonMinimalPerf.default 2281 2278 1:1
CustomToolbarPrototype.default 1483 1486 1:1
TreeMinimalPerf.default 479 480 1:1
ChatWithPopoverPerf.default 200 202 0.99:1
EmbedMinimalPerf.default 1904 1916 0.99:1
LoaderMinimalPerf.default 183 184 0.99:1
TableManyItemsPerf.default 1113 1125 0.99:1
ButtonOverridesMissPerf.default 649 664 0.98:1
FormMinimalPerf.default 231 235 0.98:1
SliderMinimalPerf.default 738 751 0.98:1
StatusMinimalPerf.default 382 388 0.98:1
ToolbarMinimalPerf.default 526 535 0.98:1
BoxMinimalPerf.default 194 199 0.97:1
DatepickerMinimalPerf.default 3615 3737 0.97:1
GridMinimalPerf.default 186 192 0.97:1
HeaderMinimalPerf.default 193 200 0.97:1
ListNestedPerf.default 315 324 0.97:1
ListWith60ListItems.default 353 365 0.97:1
IconMinimalPerf.default 402 416 0.97:1
VideoMinimalPerf.default 423 435 0.97:1
FlexMinimalPerf.default 147 155 0.95:1
InputMinimalPerf.default 543 570 0.95:1
TextMinimalPerf.default 191 201 0.95:1
AccordionMinimalPerf.default 82 89 0.92:1
ChatDuplicateMessagesPerf.default 146 158 0.92:1

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 20, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.101 MB
272.228 kB
1.148 MB
287.379 kB
47.111 kB
15.151 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.236 kB
23.357 kB
react
Announced
38.493 kB
13.297 kB
react
Autofill
15.428 kB
4.768 kB
react
Breadcrumb
202.234 kB
60.43 kB
react
Button
195.686 kB
56.66 kB
react
ButtonGrid
180.62 kB
54.643 kB
react
Calendar
121.776 kB
37.029 kB
react
Callout
84.33 kB
27.648 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.151 kB
29.428 kB
react
Color
7.789 kB
3.127 kB
react
ColorPicker
135.241 kB
42.223 kB
react
ComboBox
252.123 kB
72.332 kB
react
CommandBar
203.275 kB
60.174 kB
react
ContextualMenu
155.133 kB
48.198 kB
react
DatePicker
184.204 kB
56.175 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
DetailsList
229.978 kB
65.921 kB
react
Dialog
211.612 kB
63.202 kB
react
Divider
19.603 kB
6.845 kB
react
DocumentCard
217.227 kB
64.472 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
34.305 kB
11.509 kB
react
Dropdown
234.173 kB
68.691 kB
react
ExtendedPicker
96.795 kB
27.893 kB
react
Fabric
41.745 kB
14.366 kB
react
Facepile
210.826 kB
63.211 kB
react
FloatingPicker
242.268 kB
69.042 kB
react
FocusTrapZone
17.03 kB
5.924 kB
react
FocusZone
55.053 kB
17.47 kB
react
Grid
180.62 kB
54.643 kB
react
GroupedList
135.049 kB
40.758 kB
react
GroupedListV2
122.638 kB
37.857 kB
react
HoverCard
97.179 kB
30.82 kB
react
Icon
51.885 kB
17.272 kB
react
Icons
66.361 kB
24.397 kB
react
Image
46.904 kB
15.707 kB
react
Keytip
81.693 kB
26.766 kB
react
KeytipData
14.028 kB
4.587 kB
react
KeytipLayer
103.478 kB
32.017 kB
react
Keytips
106.239 kB
33.023 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.4 kB
12.481 kB
react
MarqueeSelection
74.541 kB
22.44 kB
react
MessageBar
190.75 kB
57.107 kB
react
Modal
93.747 kB
30.278 kB
react
Nav
188.226 kB
56.538 kB
react
OverflowSet
33.393 kB
11.329 kB
react
Overlay
40.902 kB
14.095 kB
react
Panel
201.284 kB
60.037 kB
react
Persona
114.849 kB
36.512 kB
react
PersonaCoin
114.849 kB
36.512 kB
react
PersonaPresence
58.074 kB
19.384 kB
react
Pickers
294.29 kB
82.458 kB
react
Pivot
189.118 kB
57.275 kB
react
Popup
12.294 kB
4.195 kB
react
Positioning
22.807 kB
7.701 kB
react
PositioningContainer
73.85 kB
23.765 kB
react
ProgressIndicator
39.504 kB
13.554 kB
react
Rating
82.014 kB
26.112 kB
react
Fluent UI React (entire library)
1.014 MB
282.131 kB
react
ResizeGroup
13.338 kB
4.377 kB
react
ResponsiveMode
8.13 kB
2.966 kB
react
ScrollablePane
55.563 kB
17.734 kB
react
SearchBox
188.999 kB
56.692 kB
react
SelectableOption
724 B
413 B
react
SelectedItemsList
232.778 kB
67.938 kB
react
Selection
42.464 kB
12.301 kB
react
Separator
35.384 kB
12.146 kB
react
Shimmer
49.259 kB
16.268 kB
react
ShimmeredDetailsList
240.76 kB
68.667 kB
react
Slider
57.651 kB
19.217 kB
react
SpinButton
192.702 kB
57.797 kB
react
Spinner
41.777 kB
14.478 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.945 kB
58.143 kB
react
TeachingBubble
206.001 kB
61.059 kB
react
Text
36.908 kB
12.822 kB
react
TextField
80.816 kB
25.332 kB
react
Theme
43.501 kB
14.183 kB
react
ThemeGenerator
12.392 kB
4.126 kB
react
TimePicker
241.905 kB
70.078 kB
react
Toggle
46.225 kB
15.986 kB
react
Tooltip
87.338 kB
28.223 kB
react
Utilities
82.813 kB
25.115 kB
react
Viewport
23.888 kB
7.656 kB
react
WeeklyDayPicker
101.929 kB
31.829 kB
react
WindowProvider
1.059 kB
541 B
react-accordion
Accordion (including children components)
105.051 kB
32.257 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
114.221 kB
31.654 kB
react-button
Button
37.104 kB
10.766 kB
react-button
CompoundButton
43.518 kB
12.068 kB
react-button
MenuButton
41.919 kB
12.108 kB
react-button
SplitButton
49.936 kB
13.681 kB
react-button
ToggleButton
53.037 kB
12.528 kB
react-calendar-compat
Calendar Compat
150.095 kB
40.026 kB
react-card
Card - All
101.77 kB
28.772 kB
react-card
Card
94.544 kB
26.951 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)
105.011 kB
34.125 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.842 kB
63.382 kB
react-components
react-components: FluentProvider & webLightTheme
44.447 kB
14.59 kB
react-datepicker-compat
DatePicker Compat
224.165 kB
63.423 kB
react-dialog
Dialog (including children components)
100.247 kB
30.042 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.326 kB
7.032 kB
react-list-preview
List
89.148 kB
26.597 kB
react-list-preview
ListItem
112.69 kB
33.425 kB
react-menu
Menu (including children components)
152.534 kB
46.049 kB
react-menu
Menu (including selectable components)
155.215 kB
46.53 kB
react-message-bar
MessageBar (all components)
24.85 kB
9.256 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.854 kB
40.286 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
104.258 kB
30.231 kB
react-switch
Switch
35.319 kB
11.314 kB
react-table
DataGrid
160.985 kB
45.678 kB
react-table
Table (Primitives only)
42.643 kB
13.82 kB
react-table
Table as DataGrid
131.837 kB
36.531 kB
react-table
Table (Selection only)
70.504 kB
19.962 kB
react-table
Table (Sort only)
69.147 kB
19.574 kB
react-tag-picker
@fluentui/react-tag-picker - package
184.106 kB
55.428 kB
react-tags
InteractionTag
15.199 kB
6.157 kB
react-tags
Tag
29.016 kB
9.524 kB
react-tags
TagGroup
82.719 kB
24.524 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)
98.338 kB
29.591 kB
react-tooltip
Tooltip
55.517 kB
19.515 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against 972683d49b56e0f0009c8c82f7c7e04ac589ee74

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 20, 2024

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 644 628 5000
Breadcrumb mount 1683 1684 1000
Checkbox mount 1694 1730 5000
CheckboxBase mount 1488 1480 5000
ChoiceGroup mount 3041 2953 5000
ComboBox mount 702 692 1000
CommandBar mount 6545 6524 1000
ContextualMenu mount 11599 11970 1000
DefaultButton mount 784 830 5000
DetailsRow mount 2221 2185 5000
DetailsRowFast mount 2239 2205 5000
DetailsRowNoStyles mount 2049 2046 5000
Dialog mount 2671 2804 1000
DocumentCardTitle mount 228 227 1000
Dropdown mount 2025 2024 5000
FocusTrapZone mount 1164 1146 5000
FocusZone mount 1120 1068 5000
GroupedList mount 42344 42694 2
GroupedList virtual-rerender 20430 20306 2
GroupedList virtual-rerender-with-unmount 51807 51936 2
GroupedListV2 mount 231 227 2
GroupedListV2 virtual-rerender 212 219 2
GroupedListV2 virtual-rerender-with-unmount 230 230 2
IconButton mount 1124 1156 5000
Label mount 344 340 5000
Layer mount 2728 2762 5000
Link mount 397 391 5000
MenuButton mount 991 992 5000
MessageBar mount 21462 21739 5000
Nav mount 2038 2078 1000
OverflowSet mount 776 801 5000
Panel mount 1879 1823 1000
Persona mount 746 751 1000
Pivot mount 916 915 1000
PrimaryButton mount 944 941 5000
Rating mount 4730 4720 5000
SearchBox mount 949 949 5000
Shimmer mount 1898 1920 5000
Slider mount 1322 1358 5000
SpinButton mount 2960 3034 5000
Spinner mount 384 388 5000
SplitButton mount 1907 1850 5000
Stack mount 427 423 5000
StackWithIntrinsicChildren mount 893 865 5000
StackWithTextChildren mount 2812 2790 5000
SwatchColorPicker mount 6429 6367 5000
TagPicker mount 1483 1468 5000
Text mount 385 390 5000
TextField mount 954 960 5000
ThemeProvider mount 866 851 5000
ThemeProvider virtual-rerender 591 578 5000
ThemeProvider virtual-rerender-with-unmount 1288 1293 5000
Toggle mount 621 611 5000
buttonNative mount 187 190 5000

@Mitch-At-Work Mitch-At-Work marked this pull request as ready for review September 27, 2024 22:03
@fabricteam
Copy link
Collaborator

fabricteam commented Oct 1, 2024

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

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
5 participants