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.

Sign up for GitHub

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

Jump to bottom

Carousel: Fade and Carousel Modal example (FRE) #33000

Merged
merged 6 commits into from
Oct 15, 2024
Merged

Carousel: Fade and Carousel Modal example (FRE) #33000

merged 6 commits into from
Oct 15, 2024

Conversation

Mitch-At-Work
Copy link
Contributor

Previous Behavior

  • No fade motion present
  • No example of Carousel in Modal

New Behavior

  • New fade prop to enable fade in/out motion on carousel
  • Modal story book added

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 7, 2024 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library		 1.154 MB
288.522 kB		 1.157 MB
289.701 kB		 2.81 kB
1.179 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.391 kB
60.483 kB
react
Button		 195.843 kB
56.7 kB
react
ButtonGrid		 180.777 kB
54.693 kB
react
Calendar		 121.944 kB
37.064 kB
react
Callout		 84.369 kB
27.661 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.19 kB
29.444 kB
react
Color		 7.789 kB
3.127 kB
react
ColorPicker		 135.398 kB
42.274 kB
react
ComboBox		 252.28 kB
72.395 kB
react
CommandBar		 203.432 kB
60.222 kB
react
ContextualMenu		 155.301 kB
48.239 kB
react
DatePicker		 184.372 kB
56.212 kB
react
DateTimeUtilities		 5.244 kB
1.849 kB
react
DetailsList		 230.146 kB
65.961 kB
react
Dialog		 211.769 kB
63.242 kB
react
Divider		 19.603 kB
6.845 kB
react
DocumentCard		 217.384 kB
64.525 kB
react
DragDrop		 8.343 kB
2.724 kB
react
DraggableZone		 34.305 kB
11.509 kB
react
Dropdown		 234.33 kB
68.74 kB
react
ExtendedPicker		 96.963 kB
27.935 kB
react
Fabric		 41.745 kB
14.366 kB
react
Facepile		 210.983 kB
63.258 kB
react
FloatingPicker		 242.425 kB
69.093 kB
react
FocusTrapZone		 17.069 kB
5.945 kB
react
FocusZone		 55.221 kB
17.513 kB
react
Grid		 180.777 kB
54.693 kB
react
GroupedList		 135.217 kB
40.816 kB
react
GroupedListV2		 122.806 kB
37.893 kB
react
HoverCard		 97.218 kB
30.834 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.732 kB
26.778 kB
react
KeytipData		 14.028 kB
4.587 kB
react
KeytipLayer		 103.517 kB
32.03 kB
react
Keytips		 106.278 kB
33.036 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.439 kB
12.491 kB
react
MarqueeSelection		 74.58 kB
22.462 kB
react
MessageBar		 190.907 kB
57.159 kB
react
Modal		 93.786 kB
30.289 kB
react
Nav		 188.383 kB
56.585 kB
react
OverflowSet		 33.432 kB
11.342 kB
react
Overlay		 40.902 kB
14.095 kB
react
Panel		 201.441 kB
60.081 kB
react
Persona		 115.006 kB
36.561 kB
react
PersonaCoin		 115.006 kB
36.561 kB
react
PersonaPresence		 58.074 kB
19.384 kB
react
Pickers		 294.447 kB
82.507 kB
react
Pivot		 189.275 kB
57.329 kB
react
Popup		 12.333 kB
4.217 kB
react
Positioning		 22.807 kB
7.701 kB
react
PositioningContainer		 73.889 kB
23.781 kB
react
ProgressIndicator		 39.504 kB
13.554 kB
react
Rating		 82.182 kB
26.161 kB
react
Fluent UI React (entire library)		 1.015 MB
282.189 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		 189.156 kB
56.747 kB
react
SelectableOption		 724 B
413 B
react
SelectedItemsList		 232.935 kB
67.982 kB
react
Selection		 42.503 kB
12.313 kB
react
Separator		 35.384 kB
12.146 kB
react
Shimmer		 49.259 kB
16.268 kB
react
ShimmeredDetailsList		 240.928 kB
68.71 kB
react
Slider		 57.651 kB
19.217 kB
react
SpinButton		 192.859 kB
57.841 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		 191.102 kB
58.195 kB
react
TeachingBubble		 206.158 kB
61.11 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		 242.062 kB
70.142 kB
react
Toggle		 46.225 kB
15.986 kB
react
Tooltip		 87.495 kB
28.28 kB
react
Utilities		 82.97 kB
25.165 kB
react
Viewport		 23.888 kB
7.656 kB
react
WeeklyDayPicker		 102.097 kB
31.875 kB
react
WindowProvider		 1.059 kB
541 B
react-accordion
Accordion (including children components)		 104.846 kB
32.221 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.637 kB
63.363 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.707 kB
33.428 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.878 kB
9.264 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		 161.002 kB
45.684 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 de0eb04000911e807a8a58372dea8264c131a1d2

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 7, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 88 76 1.16:1
PortalMinimalPerf.default 97 86 1.13:1
ButtonMinimalPerf.default 92 84 1.1:1
SegmentMinimalPerf.default 206 189 1.09:1
RefMinimalPerf.default 118 109 1.08:1
DividerMinimalPerf.default 217 205 1.06:1
SkeletonMinimalPerf.default 204 192 1.06:1
SliderMinimalPerf.default 747 703 1.06:1
IconMinimalPerf.default 390 368 1.06:1
ReactionMinimalPerf.default 218 207 1.05:1
TableMinimalPerf.default 242 231 1.05:1
AccordionMinimalPerf.default 84 81 1.04:1
AlertMinimalPerf.default 165 158 1.04:1
CheckboxMinimalPerf.default 1148 1112 1.03:1
TreeMinimalPerf.default 489 475 1.03:1
ButtonSlotsPerf.default 311 305 1.02:1
DialogMinimalPerf.default 449 440 1.02:1
EmbedMinimalPerf.default 1898 1861 1.02:1
LoaderMinimalPerf.default 190 186 1.02:1
ProviderMinimalPerf.default 205 200 1.02:1
RadioGroupMinimalPerf.default 261 256 1.02:1
TableManyItemsPerf.default 1114 1090 1.02:1
ChatWithPopoverPerf.default 195 193 1.01:1
DropdownManyItemsPerf.default 388 384 1.01:1
InputMinimalPerf.default 533 529 1.01:1
RosterPerf.default 1583 1568 1.01:1
ProviderMergeThemesPerf.default 658 652 1.01:1
ToolbarMinimalPerf.default 552 549 1.01:1
AnimationMinimalPerf.default 306 306 1:1
CarouselMinimalPerf.default 266 266 1:1
FlexMinimalPerf.default 156 156 1:1
HeaderMinimalPerf.default 204 203 1:1
ImageMinimalPerf.default 223 224 1:1
ListCommonPerf.default 412 412 1:1
ListWith60ListItems.default 365 366 1:1
MenuButtonMinimalPerf.default 947 951 1:1
PopupMinimalPerf.default 350 349 1:1
TextAreaMinimalPerf.default 287 286 1:1
CustomToolbarPrototype.default 1452 1449 1:1
VideoMinimalPerf.default 452 453 1:1
ChatDuplicateMessagesPerf.default 154 156 0.99:1
ChatMinimalPerf.default 444 448 0.99:1
DatepickerMinimalPerf.default 3531 3549 0.99:1
FormMinimalPerf.default 225 227 0.99:1
CardMinimalPerf.default 301 307 0.98:1
DropdownMinimalPerf.default 1419 1441 0.98:1
ListMinimalPerf.default 304 311 0.98:1
ListNestedPerf.default 326 333 0.98:1
MenuMinimalPerf.default 493 502 0.98:1
AvatarMinimalPerf.default 105 108 0.97:1
ButtonOverridesMissPerf.default 650 673 0.97:1
ItemLayoutMinimalPerf.default 691 715 0.97:1
SplitButtonMinimalPerf.default 2222 2290 0.97:1
TooltipMinimalPerf.default 1253 1291 0.97:1
AttachmentSlotsPerf.default 626 654 0.96:1
BoxMinimalPerf.default 191 198 0.96:1
LayoutMinimalPerf.default 200 208 0.96:1
GridMinimalPerf.default 184 193 0.95:1
HeaderSlotsPerf.default 455 477 0.95:1
TextMinimalPerf.default 192 202 0.95:1
LabelMinimalPerf.default 211 225 0.94:1
StatusMinimalPerf.default 375 405 0.93:1
TreeWith60ListItems.default 84 95 0.88:1

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 7, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 626 622 5000
Button mount 312 316 5000
Field mount 1150 1125 5000
FluentProvider mount 703 718 5000
FluentProviderWithTheme mount 84 95 10
FluentProviderWithTheme virtual-rerender 33 34 10
FluentProviderWithTheme virtual-rerender-with-unmount 74 75 10
MakeStyles mount 877 858 50000
Persona mount 1767 1705 5000
SpinButton mount 1380 1355 5000
SwatchPicker mount 1657 1615 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 7, 2024 •
edited
Loading

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 8, 2024 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 639 622 5000
Breadcrumb mount 1714 1719 1000
Checkbox mount 1715 1699 5000
CheckboxBase mount 1506 1516 5000
ChoiceGroup mount 2941 3005 5000
ComboBox mount 695 690 1000
CommandBar mount 6629 6592 1000
ContextualMenu mount 12552 12669 1000
DefaultButton mount 804 806 5000
DetailsRow mount 2227 2289 5000
DetailsRowFast mount 2275 2274 5000
DetailsRowNoStyles mount 2080 2043 5000
Dialog mount 2803 2873 1000
DocumentCardTitle mount 230 232 1000
Dropdown mount 2023 2100 5000
FocusTrapZone mount 1154 1181 5000
FocusZone mount 1117 1088 5000
GroupedList mount 43445 43524 2
GroupedList virtual-rerender 20774 20971 2
GroupedList virtual-rerender-with-unmount 52080 53055 2
GroupedListV2 mount 221 242 2
GroupedListV2 virtual-rerender 222 214 2
GroupedListV2 virtual-rerender-with-unmount 227 233 2
IconButton mount 1128 1161 5000
Label mount 348 349 5000
Layer mount 2833 2806 5000
Link mount 406 393 5000
MenuButton mount 988 1007 5000
MessageBar mount 21369 21384 5000
Nav mount 2054 2073 1000
OverflowSet mount 789 790 5000
Panel mount 1903 1804 1000
Persona mount 790 765 1000
Pivot mount 896 903 1000
PrimaryButton mount 946 930 5000
Rating mount 4691 4761 5000
SearchBox mount 944 933 5000
Shimmer mount 1920 1897 5000
Slider mount 1363 1324 5000
SpinButton mount 2988 3038 5000
Spinner mount 391 399 5000
SplitButton mount 1877 1839 5000
Stack mount 423 413 5000
StackWithIntrinsicChildren mount 868 862 5000
StackWithTextChildren mount 2756 2761 5000
SwatchColorPicker mount 6500 6409 5000
TagPicker mount 1459 1462 5000
Text mount 386 387 5000
TextField mount 942 966 5000
ThemeProvider mount 884 861 5000
ThemeProvider virtual-rerender 596 598 5000
ThemeProvider virtual-rerender-with-unmount 1294 1295 5000
Toggle mount 615 598 5000
buttonNative mount 200 197 5000

@Mitch-At-Work Mitch-At-Work marked this pull request as ready for review October 9, 2024 19:15
@Mitch-At-Work Mitch-At-Work requested review from a team as code owners October 9, 2024 19:15
Hotell
Hotell approved these changes Oct 15, 2024
View reviewed changes
Copy link
Contributor

@Hotell Hotell left a comment

Choose a reason for hiding this comment

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

LGTM for v-build owned files

@Mitch-At-Work Mitch-At-Work merged commit 99e85d1 into microsoft:master Oct 15, 2024
23 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fabricteam fabricteam fabricteam left review comments

@Hotell Hotell Hotell approved these changes

@layershifter layershifter layershifter approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@Mitch-At-Work @fabricteam @Hotell @layershifter