[@mantine/carousel] Fix responsive slideSize values working differe…

…ntly from other style props
mantinedev · Jul 13, 2024 · 1a3af9f · 1a3af9f
1 parent b9a10f9
commit 1a3af9f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/@mantine/carousel/src/Carousel.module.css b/packages/@mantine/carousel/src/Carousel.module.css
@@ -130,7 +130,7 @@
 
 .slide {
   position: relative;
-  flex: 0 0 var(--carousel-slide-size);
+  flex: 0 0 var(--carousel-slide-size, 100%);
 
   .root:where([data-include-gap-in-size]) & {
     &:where([data-orientation='vertical']) {

diff --git a/packages/@mantine/carousel/src/Carousel.story.tsx b/packages/@mantine/carousel/src/Carousel.story.tsx
@@ -20,12 +20,19 @@ const slides = (
 export function Usage() {
   const [value, setValue] = useState(0);
   const log = useCallback((index: any) => console.log({ value, index }), [value]);
+
   return (
     <div style={{ padding: 40, maxWidth: 500 }}>
       <button type="button" onClick={() => setValue(Math.random())}>
         random
       </button>
-      <Carousel slideGap="md" height={200} withIndicators onSlideChange={log}>
+      <Carousel
+        slideGap="md"
+        slideSize={{ md: '50%' }}
+        height={200}
+        withIndicators
+        onSlideChange={log}
+      >
         {slides}
       </Carousel>
     </div>