Carousel: Add wheel gesture support for mac scrolling and responsive cards #32422

Mitch-At-Work · 2024-08-29T22:04:12Z

Previous Behavior

No mac trackpad drag support
No wheel support (when drag enabled)

New Behavior

We now support wheel gestures, this is mostly useful for mac drag scroll (when dragging is enabled)

…mple responsively sized cards

fabricteam · 2024-08-29T22:09:58Z

fabricteam · 2024-08-29T22:21:17Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	662	612	5000
Button	mount	302	303	5000
Field	mount	1136	1156	5000
FluentProvider	mount	715	713	5000
FluentProviderWithTheme	mount	90	91	10
FluentProviderWithTheme	virtual-rerender	32	35	10
FluentProviderWithTheme	virtual-rerender-with-unmount	73	84	10
MakeStyles	mount	875	879	50000
Persona	mount	1793	1747	5000
SpinButton	mount	1447	1377	5000
SwatchPicker	mount	1685	1642	5000

fabricteam · 2024-08-29T22:21:51Z

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

change/@fluentui-react-carousel-preview-5ce398b2-e93c-475a-adb6-4c4e71dd7011.json

fabricteam · 2024-08-29T22:24:28Z

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam · 2024-08-29T22:27:15Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	105	88	1.19:1
LoaderMinimalPerf.default	203	177	1.15:1
SkeletonMinimalPerf.default	217	190	1.14:1
IconMinimalPerf.default	401	355	1.13:1
TextMinimalPerf.default	210	189	1.11:1
FlexMinimalPerf.default	168	154	1.09:1
CarouselMinimalPerf.default	268	249	1.08:1
AccordionMinimalPerf.default	91	85	1.07:1
ListMinimalPerf.default	317	295	1.07:1
ListNestedPerf.default	331	310	1.07:1
GridMinimalPerf.default	197	186	1.06:1
AttachmentSlotsPerf.default	658	628	1.05:1
AvatarMinimalPerf.default	110	105	1.05:1
ChatDuplicateMessagesPerf.default	156	150	1.04:1
DropdownManyItemsPerf.default	400	385	1.04:1
MenuMinimalPerf.default	513	494	1.04:1
DropdownMinimalPerf.default	1422	1386	1.03:1
ReactionMinimalPerf.default	217	211	1.03:1
StatusMinimalPerf.default	395	383	1.03:1
AnimationMinimalPerf.default	304	299	1.02:1
BoxMinimalPerf.default	196	192	1.02:1
ButtonSlotsPerf.default	319	312	1.02:1
CardMinimalPerf.default	315	308	1.02:1
DialogMinimalPerf.default	451	440	1.02:1
HeaderMinimalPerf.default	211	207	1.02:1
InputMinimalPerf.default	540	532	1.02:1
RosterPerf.default	1569	1544	1.02:1
PopupMinimalPerf.default	354	348	1.02:1
ProviderMinimalPerf.default	204	200	1.02:1
ChatWithPopoverPerf.default	199	198	1.01:1
DatepickerMinimalPerf.default	3550	3518	1.01:1
ImageMinimalPerf.default	225	223	1.01:1
LayoutMinimalPerf.default	200	199	1.01:1
ListWith60ListItems.default	368	366	1.01:1
SegmentMinimalPerf.default	202	200	1.01:1
VideoMinimalPerf.default	437	431	1.01:1
ChatMinimalPerf.default	430	432	1:1
ItemLayoutMinimalPerf.default	708	711	1:1
LabelMinimalPerf.default	224	224	1:1
RefMinimalPerf.default	106	106	1:1
TableManyItemsPerf.default	1096	1094	1:1
CustomToolbarPrototype.default	1476	1470	1:1
ListCommonPerf.default	383	387	0.99:1
SplitButtonMinimalPerf.default	2249	2264	0.99:1
TableMinimalPerf.default	230	232	0.99:1
TextAreaMinimalPerf.default	290	292	0.99:1
TooltipMinimalPerf.default	1276	1284	0.99:1
AttachmentMinimalPerf.default	85	87	0.98:1
CheckboxMinimalPerf.default	1128	1150	0.98:1
DividerMinimalPerf.default	208	212	0.98:1
ProviderMergeThemesPerf.default	632	643	0.98:1
SliderMinimalPerf.default	730	743	0.98:1
ToolbarMinimalPerf.default	532	543	0.98:1
TreeMinimalPerf.default	469	478	0.98:1
EmbedMinimalPerf.default	1876	1928	0.97:1
MenuButtonMinimalPerf.default	942	967	0.97:1
TreeWith60ListItems.default	85	88	0.97:1
HeaderSlotsPerf.default	455	474	0.96:1
ButtonOverridesMissPerf.default	632	665	0.95:1
FormMinimalPerf.default	219	232	0.94:1
RadioGroupMinimalPerf.default	250	267	0.94:1
PortalMinimalPerf.default	78	88	0.89:1
AlertMinimalPerf.default	141	160	0.88:1

change/@fluentui-react-carousel-preview-5ce398b2-e93c-475a-adb6-4c4e71dd7011.json

fabricteam · 2024-08-29T22:39:06Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	610	630	5000
Breadcrumb	mount	1672	1691	1000
Checkbox	mount	1718	1748	5000
CheckboxBase	mount	1496	1495	5000
ChoiceGroup	mount	2986	2983	5000
ComboBox	mount	695	690	1000
CommandBar	mount	6600	6608	1000
ContextualMenu	mount	12888	13036	1000
DefaultButton	mount	792	805	5000
DetailsRow	mount	2279	2287	5000
DetailsRowFast	mount	2263	2257	5000
DetailsRowNoStyles	mount	2055	2050	5000
Dialog	mount	2784	2792	1000
DocumentCardTitle	mount	231	230	1000
Dropdown	mount	2024	2032	5000
FocusTrapZone	mount	1163	1137	5000
FocusZone	mount	1065	1090	5000
GroupedList	mount	42885	43009	2
GroupedList	virtual-rerender	20522	20515	2
GroupedList	virtual-rerender-with-unmount	52196	52263	2
GroupedListV2	mount	229	231	2
GroupedListV2	virtual-rerender	220	219	2
GroupedListV2	virtual-rerender-with-unmount	225	230	2
IconButton	mount	1140	1132	5000
Label	mount	353	351	5000
Layer	mount	2779	2766	5000
Link	mount	410	398	5000
MenuButton	mount	992	997	5000
MessageBar	mount	21444	21482	5000
Nav	mount	2077	2042	1000
OverflowSet	mount	797	787	5000
Panel	mount	1841	1866	1000
Persona	mount	778	790	1000
Pivot	mount	934	908	1000
PrimaryButton	mount	937	936	5000
Rating	mount	4746	4721	5000
SearchBox	mount	978	930	5000
Shimmer	mount	1941	1960	5000
Slider	mount	1358	1353	5000
SpinButton	mount	3063	2941	5000
Spinner	mount	408	394	5000
SplitButton	mount	1915	1914	5000
Stack	mount	420	428	5000
StackWithIntrinsicChildren	mount	860	879	5000
StackWithTextChildren	mount	2815	2796	5000
SwatchColorPicker	mount	6433	6562	5000
TagPicker	mount	1472	1494	5000
Text	mount	381	391	5000
TextField	mount	919	954	5000
ThemeProvider	mount	875	880	5000
ThemeProvider	virtual-rerender	602	587	5000
ThemeProvider	virtual-rerender-with-unmount	1291	1300	5000
Toggle	mount	628	603	5000
buttonNative	mount	192	200	5000

Hotell · 2024-08-30T12:09:00Z

packages/react-components/react-carousel-preview/library/package.json

    "@swc/helpers": "^0.5.1",
-    "embla-carousel": "8.1.8",
-    "embla-carousel-autoplay": "8.1.8",
+    "embla-carousel": "8.2.0",


using fixed versions for package dependencies is discouraged as it will create dupes in user-land. let's go with ^ (or ~ if the package doesn't follow proper semver).

you'll get some errors from syncpack (known limitation of the tool), so you'll need to ignore those by adding these packages here

Hotell · 2024-08-30T12:15:01Z

yarn.lock

+  version "2.2.47"
+  resolved "https://registry.yarnpkg.com/wheel-gestures/-/wheel-gestures-2.2.47.tgz#0324e511451b5ce643efff6c4e03f2669a058cdf"
+  integrity sha512-uE73zRoikB0Uwc4mAn6vH/X2w/E7kGe9exnEjaA3poaH+Zw2Tr9V39uMMQX3hd+wlW656dqIWBVWKY/UlP0MgQ==
+  dependencies:


please report issue to this package repo as it ships invalid dependencies. Those 2 deps should be specified as devDependencies, they have no use in production code used from this package - this creeps our node_modules by adding no benefits rather the opposite. ty

Opened PR & issue here: xiel/wheel-gestures#720

Will wait for merge before landing

mltejera

Think addressing Martin's feedback and we're golden :-)

mltejera · 2024-08-30T15:46:10Z

...es/react-components/react-carousel-preview/library/src/components/Carousel/Carousel.types.ts

   * Defaults to: False
   */
-  enableDrag?: boolean;
+  draggable?: boolean;


This should probably get a mention in the changefile

Gonna move this one out to generic pre-stable updates, while we wait for above dependency issues to be merged.

…erge in another PR)

Hotell · 2024-09-03T14:18:39Z

package.json

    "ejs": "3.1.10",
-    "embla-carousel": "8.1.8",
-    "embla-carousel-autoplay": "8.1.8",
+    "embla-carousel": "^8.2.0",


I know this is confusing :D but we use fixed versions for root package.json ( in order to get a match what we actually use ), any package being shipped needs to use ^ or ~ though.

with this in place syncpack will complain -> that's why you need to add those packages to ignore ( which you already did)

also ci is failing on invalid yarn.lock

error Your lockfile needs to be updated, but yarn was run with `--frozen-lockfile`

make sure to run yarn and yarn run dedupe

Mitch-At-Work · 2024-09-17T21:40:34Z

Setting to draft for now, not sure if we will add this feature but will make sure to fix above before undrafting.

Mitch-At-Work · 2025-01-06T17:35:29Z

Closing for now, will reopen if feature is scheduled for implementation.

Add wheel gesture support for mac scrolling, and make free layout exa…

7c5e082

…mple responsively sized cards

Mitch-At-Work requested review from a team as code owners August 29, 2024 22:04

Yarn dedupe and change files

c5dbfc7

Update yarn file

0c1fab3

fabricteam reviewed Aug 29, 2024

View reviewed changes

change/@fluentui-react-carousel-preview-5ce398b2-e93c-475a-adb6-4c4e71dd7011.json Show resolved Hide resolved

fabricteam reviewed Aug 29, 2024

View reviewed changes

change/@fluentui-react-carousel-preview-5ce398b2-e93c-475a-adb6-4c4e71dd7011.json Show resolved Hide resolved

Hotell reviewed Aug 30, 2024

View reviewed changes

mltejera approved these changes Aug 30, 2024

View reviewed changes

Mitch-At-Work added 3 commits August 30, 2024 09:07

Update embla deps to range

13d89b5

Update deps in syncpack and set draggable back to enable drag (will m…

00e559c

…erge in another PR)

Whoops

8e35aed

Hotell reviewed Sep 3, 2024

View reviewed changes

Mitch-At-Work marked this pull request as draft September 17, 2024 21:40

Mitch-At-Work closed this Jan 6, 2025

Carousel: Add wheel gesture support for mac scrolling and responsive cards #32422

Carousel: Add wheel gesture support for mac scrolling and responsive cards #32422

Uh oh!

Conversation

Mitch-At-Work commented Aug 29, 2024

Previous Behavior

New Behavior

Uh oh!

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

Uh oh!

Uh oh!

fabricteam commented Aug 29, 2024

Uh oh!

fabricteam commented Aug 29, 2024

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

Uh oh!

Uh oh!

fabricteam commented Aug 29, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

Uh oh!

fabricteam commented Aug 29, 2024

Perf Analysis (@fluentui/react-northstar)

Uh oh!

Uh oh!

fabricteam commented Aug 29, 2024

Uh oh!

Hotell Aug 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mltejera left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mitch-At-Work commented Sep 17, 2024

Uh oh!

Mitch-At-Work commented Jan 6, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fabricteam commented Aug 29, 2024 •

edited

Loading

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

Hotell Aug 30, 2024 •

edited

Loading