[WIP] fix(components): fix RTL issues with components

packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js

@@ -146,7 +146,6 @@ export const Default = () => (
               <Button
                 tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}
                 onClick={action('Add new row')}
-                size="sm"
                 kind="primary">
                 Add new
               </Button>
@@ -247,7 +246,6 @@ export const Playground = (args) => (
               <Button
                 tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}
                 onClick={action('Add new row')}
-                size="sm"
                 kind="primary">
                 Add new
               </Button>

packages/react/src/components/Text/Text.tsx

@@ -22,7 +22,7 @@ export type TextProps<T extends React.ElementType> = PolymorphicProps<
 function Text<T extends React.ElementType>({
   as,
   children,
-  dir = 'auto',
+  dir,
   ...rest
 }: TextProps<T>) {
   // TODO: Update with context typing once its been converted to TS

packages/react/src/components/TreeView/TreeNode.js

@@ -161,8 +161,8 @@ export default function TreeNode({
     };
 
     if (currentNodeLabel.current) {
-      currentNodeLabel.current.style.marginLeft = `-${calcOffset()}rem`;
-      currentNodeLabel.current.style.paddingLeft = `${calcOffset()}rem`;
+      currentNodeLabel.current.style.marginInlineStart = `-${calcOffset()}rem`;
+      currentNodeLabel.current.style.paddingInlineStart = `${calcOffset()}rem`;
     }
 
     // sync props and state

packages/styles/scss/components/accordion/_accordion.scss

@@ -149,9 +149,8 @@ $content-padding: 0 0 0 $spacing-05 !default;
     @include type-style('body-01');
 
     z-index: 1;
-    margin: $title-margin;
     inline-size: 100%;
-    padding-inline-end: $spacing-05;
+    padding-inline-start: $spacing-05;
     text-align: start;
   }
 
@@ -293,6 +292,17 @@ $content-padding: 0 0 0 $spacing-05 !default;
   .#{$prefix}--accordion__item--active .#{$prefix}--accordion__arrow {
     @include high-contrast-mode('icon-fill');
   }
+
+  // RTL overrides
+  [dir='rtl'] .#{$prefix}--accordion--start .#{$prefix}--accordion__heading {
+    padding-inline-end: 0;
+    padding-inline-start: layout.density('padding-inline');
+  }
+
+  [dir='rtl'] .#{$prefix}--accordion--start .#{$prefix}--accordion__title {
+    margin-inline-end: 0;
+    padding-inline-start: 0;
+  }
 }
 
 @mixin -content-visible {

packages/styles/scss/components/breadcrumb/_breadcrumb.scss

@@ -146,6 +146,12 @@
     inset-inline-start: $caret-size * 2;
   }
 
+  [dir='rtl']
+    .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options::after {
+    inset-inline-end: $caret-size * 2;
+    inset-inline-start: initial;
+  }
+
   // Skeleton State
   .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
     @include skeleton;

packages/styles/scss/components/button/_button.scss

@@ -403,4 +403,9 @@
   .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
     @include high-contrast-mode('icon-fill');
   }
+
+  // RTL overrides
+  [dir='rtl'] .#{$prefix}--btn-set .#{$prefix}--btn:not(:focus) {
+    box-shadow: convert.to-rem(1px) 0 0 0 $button-separator;
+  }
 }

packages/styles/scss/components/checkbox/_checkbox.scss

@@ -115,9 +115,9 @@
     inline-size: convert.to-rem(9px);
     inset-block-start: convert.to-rem(7.5px);
     inset-inline-start: convert.to-rem(7px);
-    margin-block-start: convert.to-rem(-3px) #{'/*rtl:0rem*/'};
+    margin-block-start: convert.to-rem(-3px);
     transform: scale(0) rotate(-45deg);
-    transform-origin: bottom right #{'/*rtl:center*/'};
+    transform-origin: bottom right;
   }
 
   //----------------------------------------------
@@ -136,7 +136,7 @@
   // Display the check
   .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::after,
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after {
-    transform: scale(1) rotate(-45deg) #{'/*!rtl:scale(1.2) rotate3d(.5, 1, 0, 158deg)*/'};
+    transform: scale(1) rotate(-45deg);
   }
 
   // Indeterminate symbol
@@ -345,4 +345,19 @@
   .#{$prefix}--checkbox--inline {
     position: relative;
   }
+
+  // RTL overrides
+  [dir='rtl'] .#{$prefix}--checkbox-label::after {
+    margin-block-start: 0;
+    margin-inline-start: convert.to-rem(-1px);
+    transform-origin: center;
+  }
+
+  [dir='rtl']
+    .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label::after,
+  [dir='rtl']
+    .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after {
+    transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg);
+  }
 }

packages/styles/scss/components/data-table/_data-table.scss

@@ -43,8 +43,10 @@
   // Table title text
   //----------------------------------------------------------------------------
   .#{$prefix}--data-table-header {
-    padding: $spacing-05 0 $spacing-06 $spacing-05;
     background: $layer;
+    padding-block-end: $spacing-06;
+    padding-block-start: $spacing-05;
+    padding-inline: $spacing-05;
   }
 
   .#{$prefix}--data-table-header__title {
@@ -86,7 +88,6 @@
     @include type-style('body-compact-01');
 
     background-color: $layer;
-
     inline-size: 100%;
   }
 

packages/styles/scss/components/data-table/action/_data-table-action.scss

@@ -416,7 +416,8 @@
     align-items: center;
   }
 
-  .#{$prefix}--action-list .#{$prefix}--btn {
+  .#{$prefix}--action-list .#{$prefix}--btn,
+  .#{$prefix}--batch-summary .#{$prefix}--btn {
     color: $text-on-color;
     padding-inline-end: $spacing-05;
     padding-inline-start: $spacing-05;
@@ -453,7 +454,8 @@
     display: none;
   }
 
-  .#{$prefix}--action-list .#{$prefix}--btn--primary:focus {
+  .#{$prefix}--action-list .#{$prefix}--btn--primary:focus,
+  .#{$prefix}--batch-summary .#{$prefix}--btn--primary:focus {
     outline: 2px solid $layer;
     outline-offset: convert.to-rem(-2px);
   }

packages/styles/scss/components/list-box/_list-box.scss

@@ -307,11 +307,13 @@ $list-box-menu-width: convert.to-rem(300px);
     display: inline-flex;
     overflow: hidden;
     align-items: center;
-    padding: 0 $spacing-09 0 $spacing-05;
     // Account for the border in `.bx--list-box`
     block-size: calc(100% + 1px);
     cursor: pointer;
     outline: none;
+    padding-block: 0;
+    padding-inline-end: $spacing-09;
+    padding-inline-start: $spacing-05;
     text-overflow: ellipsis;
     vertical-align: top;
     white-space: nowrap;

packages/styles/scss/components/notification/_actionable-notification.scss

@@ -193,7 +193,7 @@
   .#{$prefix}--actionable-notification__details {
     display: flex;
     flex-grow: 1;
-    margin: 0 $spacing-09 0 convert.to-rem(13px);
+    margin-inline: convert.to-rem(13px) $spacing-09;
   }
 
   .#{$prefix}--actionable-notification:not(

packages/styles/scss/components/notification/_inline-notification.scss

@@ -182,7 +182,7 @@
   .#{$prefix}--inline-notification__details {
     display: flex;
     flex-grow: 1;
-    margin: 0 $spacing-09 0 convert.to-rem(13px);
+    margin-inline: convert.to-rem(13px) $spacing-09;
 
     @include breakpoint(md) {
       margin: 0 convert.to-rem(13px);
@@ -204,7 +204,7 @@
   .#{$prefix}--inline-notification__title {
     @include type-style('heading-compact-01');
 
-    margin: 0 $spacing-02 0 0;
+    margin-inline-end: $spacing-02;
   }
 
   .#{$prefix}--inline-notification__subtitle {

packages/styles/scss/components/pagination-nav/_pagination-nav.scss

@@ -168,4 +168,9 @@
   .#{$prefix}--pagination-nav__accessibility-label {
     @include visually-hidden;
   }
+
+  // RTL overrides
+  [dir='rtl'] .#{$prefix}--pagination-nav__list-item svg {
+    transform: rotate(0.5turn);
+  }
 }

packages/styles/scss/components/pagination/_pagination.scss

@@ -98,7 +98,7 @@
   .#{$prefix}--pagination
     .#{$prefix}--select--inline
     .#{$prefix}--select-input {
-    padding: 0 2.25rem 0 $spacing-05;
+    padding-inline: $spacing-05 2.25rem;
   }
 
   .#{$prefix}--pagination--sm .#{$prefix}--select-input {
@@ -280,4 +280,9 @@
   .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
     @include high-contrast-mode('outline');
   }
+
+  // RTL overrides
+  [dir='rtl'] .#{$prefix}--pagination .#{$prefix}--select__arrow {
+    transform: translate(0.5rem, -50%);
+  }
 }