Skip to content

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

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

Closed
Mitch-At-Work wants to merge 6 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7c5e082
Add wheel gesture support for mac scrolling, and make free layout exa…
Mitch-At-Work Aug 29, 2024
c5dbfc7
Yarn dedupe and change files
Mitch-At-Work Aug 29, 2024
0c1fab3
Update yarn file
Mitch-At-Work Aug 29, 2024
13d89b5
Update embla deps to range
Mitch-At-Work Aug 30, 2024
00e559c
Update deps in syncpack and set draggable back to enable drag (will m…
Mitch-At-Work Aug 30, 2024
8e35aed
Whoops
Mitch-At-Work Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-carousel-preview-5ce398b2-e93c-475a-adb6-4c4e71dd7011.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "feat: Add wheel support to react-carousel",
"packageName": "@fluentui/react-carousel-preview",
"email": "[email protected]",
"dependentChangeType": "patch"
}
5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,8 +197,9 @@
"doctrine": "3.0.0",
"dotparser": "1.1.1",
"ejs": "3.1.10",
"embla-carousel": "8.1.8",
"embla-carousel-autoplay": "8.1.8",
"embla-carousel": "^8.2.0",
Copy link
Contributor

@Hotell Hotell Sep 3, 2024

Choose a reason for hiding this comment

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

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)

Copy link
Contributor

@Hotell Hotell Sep 3, 2024

Choose a reason for hiding this comment

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

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

"embla-carousel-autoplay": "^8.2.0",
"embla-carousel-wheel-gestures": "^8.0.1",
"enquirer": "2.3.6",
"enzyme": "3.10.0",
"enzyme-to-json": "3.6.2",
Expand Down
5 changes: 3 additions & 2 deletions packages/react-components/react-carousel-preview/library/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,9 @@
"@fluentui/react-utilities": "^9.18.13",
"@griffel/react": "^1.5.22",
"@swc/helpers": "^0.5.1",
"embla-carousel": "8.1.8",
"embla-carousel-autoplay": "8.1.8",
"embla-carousel": "^8.2.0",
"embla-carousel-autoplay": "^8.2.0",
"embla-carousel-wheel-gestures": "^8.0.1",
"use-sync-external-store": "^1.2.0"
},
"peerDependencies": {
Expand Down
5 changes: 4 additions & 1 deletion packages/react-components/react-carousel-preview/library/src/components/useEmblaCarousel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useControllableState } from '@fluentui/react-utilities';
import EmblaCarousel, { type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel';
import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
import * as React from 'react';

import { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';
Expand All @@ -8,7 +9,7 @@ import { CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';
import Autoplay from 'embla-carousel-autoplay';

const DEFAULT_EMBLA_OPTIONS: EmblaOptionsType = {
containScroll: false,
containScroll: 'trimSnaps',
inViewThreshold: 0.99,
watchDrag: false,
skipSnaps: true,
Expand Down Expand Up @@ -124,6 +125,7 @@ export function useEmblaCarousel(
stopOnMouseEnter: true,
stopOnFocusIn: true,
}),
WheelGesturesPlugin(),
],
);

Expand Down Expand Up @@ -187,6 +189,7 @@ export function useEmblaCarousel(
stopOnMouseEnter: true,
stopOnFocusIn: true,
}),
WheelGesturesPlugin(),
],
);
}, [align, direction, loop, slidesToScroll, watchDrag]);
Expand Down
38 changes: 23 additions & 15 deletions ...act-components/react-carousel-preview/stories/src/Carousel/CarouselFreeLayout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,19 @@ const SWAP_IMAGE = 'https://fabricweb.azureedge.net/fabric-website/assets/images
const useClasses = makeStyles({
card: {
margin: '0px 10px',
flex: '0 0 auto',
minWidth: '250px',
maxWidth: '100%',
},
test: {
...typographyStyles.largeTitle,
...typographyStyles.title2,
alignContent: 'center',
borderRadius: tokens.borderRadiusLarge,
height: '200px',
textAlign: 'center',
flex: '0 0 auto',
padding: '50px',
minWidth: 0,
maxWidth: '100%',
},
});

Expand All @@ -38,27 +44,29 @@ export const FreeLayout = () => {
const classes = useClasses();

return (
<Carousel>
<Carousel align="start">
<CarouselSlider>
<CarouselCard className={classes.card} style={{ maxWidth: '30%' }}>
<TestComponent accentColor="#B99095">Card 1</TestComponent>
<CarouselCard className={classes.card}>
<TestComponent accentColor="#B99095">Card 1 Card 1 Card 1 Card 1 Card 1 Card 1 Card 1 Card 1 </TestComponent>
</CarouselCard>
<CarouselCard className={classes.card} style={{ maxWidth: '45%' }}>
<TestComponent accentColor="#FCB5AC">Card 2</TestComponent>
<CarouselCard className={classes.card}>
<TestComponent accentColor="#FCB5AC">Card 2 Card 2 Card 2 Card 2 Card 2 Card 2 Card 2 </TestComponent>
</CarouselCard>
<CarouselCard className={classes.card} style={{ maxWidth: '20%' }}>
<TestComponent accentColor="#B5E5CF">Card 3</TestComponent>
<CarouselCard className={classes.card}>
<TestComponent accentColor="#B5E5CF">Card 3 Card 3 Card 3 Card 3 </TestComponent>
</CarouselCard>
<CarouselCard className={classes.card} style={{ maxWidth: '80%' }}>
<TestComponent accentColor="#3D5B59">Card 4</TestComponent>
<CarouselCard className={classes.card}>
<TestComponent accentColor="#3D5B59">
Card 4 Card 4 Card 4 Card 4 Card 4 Card 4 Card 4 Card 4 Card 4
</TestComponent>
</CarouselCard>
<CarouselCard className={classes.card} style={{ maxWidth: '75%' }}>
<TestComponent accentColor="#F9EAC2">Card 5</TestComponent>
<CarouselCard className={classes.card}>
<TestComponent accentColor="#F9EAC2">Card 5 Card 5</TestComponent>
</CarouselCard>
<CarouselCard className={classes.card} style={{ maxWidth: '30%' }}>
<CarouselCard className={classes.card}>
<TestComponent accentColor="#FEE7E6">Card 6</TestComponent>
</CarouselCard>
<CarouselCard className={classes.card} style={{ maxWidth: '30%' }}>
<CarouselCard className={classes.card}>
<TestComponent accentColor="#FFD898">Card 7</TestComponent>
</CarouselCard>
</CarouselSlider>
Expand Down
3 changes: 3 additions & 0 deletions syncpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@ const config = {
'eslint-plugin-react',
'eslint-plugin-react-hooks',
'eslint-plugin-jsdoc',
'embla-carousel',
'embla-carousel-autoplay',
'embla-carousel-wheel',
'fs-extra',
'glob',
'jju',
Expand Down
Loading