[@mantine/carousel] Fix specificity issues of some selectors (#5973)

mantinedev · Mar 26, 2024 · bfba531 · bfba531
1 parent b67ff0c
commit bfba531
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/packages/@mantine/carousel/src/Carousel.module.css b/packages/@mantine/carousel/src/Carousel.module.css
@@ -36,15 +36,15 @@
   z-index: 1;
   pointer-events: none;
 
-  .root:where([data-orientation='vertical']) & {
+  &:where([data-orientation='vertical']) {
     inset-inline-start: calc(50% - var(--carousel-control-size) / 2);
     top: 0;
     bottom: 0;
     flex-direction: column;
     padding: var(--carousel-controls-offset) 0;
   }
 
-  .root:where([data-orientation='horizontal']) & {
+  &:where([data-orientation='horizontal']) {
     inset-inline-start: 0;
     inset-inline-end: 0;
     top: calc(50% - var(--carousel-control-size) / 2);
@@ -87,14 +87,14 @@
   gap: rem(8px);
   pointer-events: none;
 
-  .root:where([data-orientation='vertical']) & {
+  &:where([data-orientation='vertical']) {
     bottom: 0;
     top: 0;
     inset-inline-end: var(--mantine-spacing-md);
     flex-direction: column;
   }
 
-  .root:where([data-orientation='horizontal']) & {
+  &:where([data-orientation='horizontal']) {
     bottom: var(--mantine-spacing-md);
     inset-inline-start: 0;
     inset-inline-end: 0;
@@ -117,12 +117,12 @@
     opacity: 1;
   }
 
-  .root:where([data-orientation='vertical']) & {
+  &:where([data-orientation='vertical']) {
     width: rem(5px);
     height: rem(25px);
   }
 
-  .root:where([data-orientation='horizontal']) & {
+  &:where([data-orientation='horizontal']) {
     width: rem(25px);
     height: rem(5px);
   }

diff --git a/packages/@mantine/carousel/src/Carousel.story.tsx b/packages/@mantine/carousel/src/Carousel.story.tsx
@@ -19,7 +19,7 @@ const slides = (
 export function Usage() {
   return (
     <div style={{ padding: 40, maxWidth: 500 }}>
-      <Carousel slideSize={70} slideGap="md" height={200}>
+      <Carousel slideSize={70} slideGap="md" height={200} withIndicators>
         {slides}
       </Carousel>
     </div>

diff --git a/packages/@mantine/carousel/src/Carousel.tsx b/packages/@mantine/carousel/src/Carousel.tsx
@@ -331,6 +331,7 @@ export const Carousel = factory<CarouselFactory>((_props, ref) => {
         aria-hidden
         tabIndex={-1}
         onClick={() => handleScroll(index)}
+        data-orientation={orientation}
       />
     ));
 
@@ -350,10 +351,14 @@ export const Carousel = factory<CarouselFactory>((_props, ref) => {
           </div>
         </div>
 
-        {withIndicators && <div {...getStyles('indicators')}>{indicators}</div>}
+        {withIndicators && (
+          <div {...getStyles('indicators')} data-orientation={orientation}>
+            {indicators}
+          </div>
+        )}
 
         {withControls && (
-          <div {...getStyles('controls')}>
+          <div {...getStyles('controls')} data-orientation={orientation}>
             <UnstyledButton
               {...previousControlProps}
               {...getStyles('control', {