[@mantine/carousel] Fix slideSize prop not handling number values (#…

…5050)
mantinedev · Oct 22, 2023 · aab71ff · aab71ff
1 parent 5889d8d
commit aab71ff
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/mantine-carousel/src/Carousel.story.tsx b/src/mantine-carousel/src/Carousel.story.tsx
@@ -9,17 +9,17 @@ export default { title: 'Carousel' };
 
 const slides = (
   <>
-    <Carousel.Slide>Slide 1</Carousel.Slide>
-    <Carousel.Slide>Slide 2</Carousel.Slide>
-    <Carousel.Slide>Slide 3</Carousel.Slide>
-    <Carousel.Slide>Slide 4</Carousel.Slide>
+    <Carousel.Slide bg="red">Slide 1</Carousel.Slide>
+    <Carousel.Slide bg="red">Slide 2</Carousel.Slide>
+    <Carousel.Slide bg="red">Slide 3</Carousel.Slide>
+    <Carousel.Slide bg="red">Slide 4</Carousel.Slide>
   </>
 );
 
 export function Usage() {
   return (
     <div style={{ padding: 40, maxWidth: 500 }}>
-      <Carousel slideSize="70%" slideGap="md" height={200}>
+      <Carousel slideSize={70} slideGap="md" height={200}>
         {slides}
       </Carousel>
     </div>

diff --git a/src/mantine-carousel/src/CarouselVariables/CarouselVariables.tsx b/src/mantine-carousel/src/CarouselVariables/CarouselVariables.tsx
@@ -8,6 +8,7 @@ import {
   filterProps,
   InlineStyles,
   getBaseValue,
+  rem,
 } from '@mantine/core';
 import type { CarouselProps } from '../Carousel';
 
@@ -20,7 +21,7 @@ export function CarouselVariables({ slideGap, slideSize, selector }: CarouselVar
 
   const baseStyles: Record<string, string | undefined> = filterProps({
     '--carousel-slide-gap': getSpacing(getBaseValue(slideGap)),
-    '--carousel-slide-size': getBaseValue(slideSize)?.toString(),
+    '--carousel-slide-size': rem(getBaseValue(slideSize)),
   });
 
   const queries = keys(theme.breakpoints).reduce<Record<string, Record<string, any>>>(