fix(carousel): carousel rtl fixes

carbon-design-system · Oct 11, 2023 · 1314957 · 1314957
1 parent 1ec4866
commit 1314957
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 21 deletions.
diff --git a/packages/styles/scss/components/carousel/_carousel.scss b/packages/styles/scss/components/carousel/_carousel.scss
@@ -32,19 +32,19 @@
   flex-direction: column;
 
   overflow: hidden;
-  width: calc(
+  inline-size: calc(
     100% + var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05})
   );
-  margin-right: calc(
+  margin-inline-end: calc(
     -1 * var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05})
   );
-  padding-left: $spacing-05;
-  padding-right: calc(
+  padding-inline-start: $spacing-05;
+  padding-inline-end: calc(
     #{$spacing-05} + var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05})
   );
 
   @include carbon--breakpoint(md) {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   ::slotted(:not([name])) {
@@ -54,23 +54,23 @@
             100% - (var(--#{$dds-prefix}--carousel--page-size, 1) - 1) * #{$spacing-05}
           ) / var(--#{$dds-prefix}--carousel--page-size, 1)
       );
-    height: auto;
-    margin-right: $spacing-05;
+    block-size: auto;
+    margin-inline-end: $spacing-05;
     vertical-align: middle;
   }
 
   .#{$prefix}--carousel__scroll-container {
     grid-area: body;
     position: relative;
     overflow: hidden;
-    margin-right: calc(
+    margin-inline-end: calc(
       -1 * (#{$spacing-05} + var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05}))
     );
   }
 
   .#{$prefix}--carousel__scroll-contents {
     position: relative;
-    margin-right: calc(
+    margin-inline-end: calc(
       #{$spacing-05} + var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05})
     );
     display: flex;
@@ -80,7 +80,8 @@
   }
 
   .#{$prefix}--carousel__scroll-contents--scrolling {
-    transition: left $duration--slow-01 motion(standard, productive);
+    transition: inset-inline-start $duration--slow-01
+      motion(standard, productive);
   }
 
   .#{$prefix}--carousel__navigation {
@@ -92,14 +93,15 @@
     justify-content: flex-end;
     align-items: center;
     gap: $spacing-05;
-    margin-top: $spacing-05;
+    margin-block-start: $spacing-05;
+    direction: ltr;
   }
 
   .#{$prefix}--btn.#{$prefix}--carousel__navigation__btn {
     padding: 0;
-    min-height: $container-03;
-    width: $container-03;
-    height: $container-03;
+    min-block-size: $container-03;
+    block-size: $container-03;
+    inline-size: $container-03;
 
     svg {
       margin: auto;
@@ -109,19 +111,19 @@
 
 :host(#{$dds-prefix}-carousel[in-modal]) {
   padding: 0 0 $spacing-05;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
 
   @include carbon--breakpoint(md) {
-    padding-bottom: 0;
+    padding-block-end: 0;
   }
 
   .#{$prefix}--carousel__scroll-container {
     flex-grow: 1;
   }
 
   .#{$prefix}--carousel__scroll-contents {
-    height: 100%;
+    block-size: 100%;
   }
 }
 
@@ -133,8 +135,8 @@
     flex-flow: row wrap;
     margin: 0;
     padding: 0;
-    max-width: 100%;
-    width: 100%;
+    max-inline-size: 100%;
+    block-size: 100%;
 
     .#{$prefix}--carousel__scroll-container {
       margin: 0;

diff --git a/packages/web-components/src/components/carousel/carousel.ts b/packages/web-components/src/components/carousel/carousel.ts
@@ -722,7 +722,8 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
           )}">
           <div
             class="${scrollContentsClasses}"
-            style="left:${(-start * (contentsBaseWidth + gap)) / pageSize}px">
+            style="inset-inline-start:${(-start * (contentsBaseWidth + gap)) /
+            pageSize}px">
             <slot @slotchange="${handleSlotChange}"></slot>
           </div>
         </div>