fix(carousel): carousel rtl fixes (#11030)

### Related Ticket(s) Closes #10950 [Jira Ticket](https://jsw.ibm.com/browse/ADCMS-4075) ### Description RTL fixes for the carousel. ### Changelog **Changed** - Changes carousel CSS to use CSS logical properties to better support RTL. ### Testing - [ ] Open the [Web Components (RTL)](https://ibmdotcom-web-components-rtl.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11030/index.html) build of Storybook - [ ] Navigate to Carousel stories - [ ] Verify the slide navigation arrows are correct - [ ] Verify the slider works as expected in RTL - [ ] Open the [Web Components](https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11030/index.html) build of Storybook - [ ] Regression test the carousel in LTR writing mode
carbon-design-system · Nov 17, 2023 · 5ea87bd · 5ea87bd
1 parent b01cc19
commit 5ea87bd
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 29 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,36 +93,48 @@
     justify-content: flex-end;
     align-items: center;
     gap: $spacing-05;
-    margin-top: $spacing-05;
+    margin-block-start: $spacing-05;
   }
 
   .#{$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;
     }
   }
+
+  .#{$prefix}--carousel__navigation__status {
+    direction: ltr;
+  }
 }
 
 :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%;
+  }
+}
+
+:host(#{$dds-prefix}-carousel[dir='rtl']) {
+  .#{$prefix}--btn.#{$prefix}--carousel__navigation__btn {
+    svg {
+      transform: rotate(180deg);
+    }
   }
 }
 
@@ -133,8 +146,8 @@
     flex-flow: row wrap;
     margin: 0;
     padding: 0;
-    max-width: 100%;
-    width: 100%;
+    max-inline-size: 100%;
+    inline-size: 100%;
 
     .#{$prefix}--carousel__scroll-container {
       margin: 0;

diff --git a/packages/web-components/src/components/carousel/__tests__/carousel.test.ts b/packages/web-components/src/components/carousel/__tests__/carousel.test.ts
@@ -72,7 +72,7 @@ describe('dds-carousel', function () {
           carousel!.shadowRoot!.querySelector(
             '.bx--carousel__scroll-contents'
           ) as HTMLElement
-        ).style.left
+        ).style.insetInlineStart
       ).toBe('-400px');
     });
 

diff --git a/packages/web-components/src/components/carousel/carousel.ts b/packages/web-components/src/components/carousel/carousel.ts
@@ -571,6 +571,30 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
           (elems.length - 1);
   }
 
+  private _updateContentsPosition(changedProperties) {
+    // The calculation of the contents position is base on start,
+    // _contentsBaseWidth, _gap and pageSize. If none of them changed, we've
+    // got nothing to do.
+    if (
+      !changedProperties.has('start') &&
+      !changedProperties.has('_contentsBaseWidth') &&
+      !changedProperties.has('_gap') &&
+      !changedProperties.has('pageSize')
+    ) {
+      return;
+    }
+
+    // Hard to update the contents node if it hasn't yet been populated. Return
+    // early if it's falsy.
+    if (!this._contentsNode) {
+      return;
+    }
+
+    const contentsPosition =
+      (-this.start * (this._contentsBaseWidth + this._gap)) / this.pageSize;
+    this._contentsNode.style.insetInlineStart = `${contentsPosition}px`;
+  }
+
   get focusableElements() {
     const { selectorTabbable: selectorTabbableForCarousel } = this
       .constructor as typeof DDSExpressiveModal;
@@ -670,6 +694,16 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   firstUpdated() {
     this._cleanAndCreateObserverResize({ create: true });
     this._cleanAndCreateObserverIntersection({ create: true });
+    // Reflect the current writing mode in the dir attribute so that we can
+    // make styling adjustments.
+    this.setAttribute(
+      'dir',
+      window.getComputedStyle(this).getPropertyValue('direction')
+    );
+  }
+
+  updated(changedProperties) {
+    this._updateContentsPosition(changedProperties);
   }
 
   render() {
@@ -681,8 +715,6 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
       prevButtonText,
       _defaultPrevButtonText: defaultPrevButtonText,
       start,
-      _contentsBaseWidth: contentsBaseWidth,
-      _gap: gap,
       _pageSize: pageSizeExplicit,
       _total: total,
       _getStatus: status,
@@ -720,9 +752,7 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
               ? null
               : `${customPropertyPageSize}: ${pageSizeExplicit}`
           )}">
-          <div
-            class="${scrollContentsClasses}"
-            style="left:${(-start * (contentsBaseWidth + gap)) / pageSize}px">
+          <div class="${scrollContentsClasses}">
             <slot @slotchange="${handleSlotChange}"></slot>
           </div>
         </div>
@@ -738,7 +768,11 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
             title="${prevButtonText || defaultPrevButtonText}">
             ${CaretLeft20()}
           </button>
-          <span aria-hidden="true">${formatStatus(status)}</span>
+          <span
+            class="${prefix}--carousel__navigation__status"
+            aria-hidden="true"
+            >${formatStatus(status)}</span
+          >
           <span class="${prefix}--visually-hidden" aria-live="polite"></span>
           <button
             part="next-button"

diff --git a/packages/web-components/tests/snapshots/dds-carousel.md b/packages/web-components/tests/snapshots/dds-carousel.md
@@ -19,7 +19,7 @@
   <div class="bx--carousel__scroll-container">
     <div
       class="bx--carousel__scroll-contents"
-      style="left:0px"
+      style="inset-inline-start: 0px;"
     >
       <slot>
       </slot>
@@ -37,7 +37,10 @@
       title="previous"
     >
     </button>
-    <span aria-hidden="true">
+    <span
+      aria-hidden="true"
+      class="bx--carousel__navigation__status"
+    >
       1 / 0
     </span>
     <span