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

* fix(components): fix RTL issues with components * style(components): more fixes for RTL styles * style(components): more fixes for RTL styles * fix(Popover): fix popover styles in RTL mode * fix(TreeView): fix RTL issues with TreeView * fix(Breadcrumb): fix small issue with overflow menu variant * fix(Popover): fix autoalign story issues
carbon-design-system · Sep 1, 2023 · 6976e14 · 6976e14
1 parent b6fedd7
commit 6976e14
Show file tree

Hide file tree

Showing 20 changed files with 254 additions and 32 deletions.
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
@@ -306,20 +306,23 @@ const parameters = {
 const decorators = [
   (Story, context) => {
     const { layoutDensity, layoutSize, locale, dir, theme } = context.globals;
+    const [randomKey, setRandomKey] = React.useState(1);
 
     React.useEffect(() => {
       document.documentElement.setAttribute('data-carbon-theme', theme);
     }, [theme]);
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
       document.documentElement.lang = locale;
       document.documentElement.dir = dir;
+      // Need to set random key to recalculate Popover coordinates
+      setRandomKey(Math.floor(Math.random() * 10));
     }, [locale, dir]);
 
     return (
       <GlobalTheme theme={theme}>
         <Layout size={layoutSize || null} density={layoutDensity || null}>
-          <Story {...context} />
+          <Story key={randomKey} {...context} />
         </Layout>
       </GlobalTheme>
     );

diff --git a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js b/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>

diff --git a/packages/react/src/components/Popover/Popover.stories.js b/packages/react/src/components/Popover/Popover.stories.js
@@ -229,9 +229,10 @@ export const AutoAlign = () => {
       <div
         style={{
           position: 'absolute',
-          bottom: 0,
-          right: '50%',
-          margin: '3rem',
+          insetBlockEnd: 0,
+          insetInlineEnd: '50%',
+          marginBlock: '3rem',
+          marginInline: '3rem',
         }}>
         <Popover open={open} autoAlign>
           <div className="playground-trigger">
@@ -260,7 +261,14 @@ export const AutoAlign = () => {
           </p>
         </PopoverContent>
       </Popover>
-      <div style={{ position: 'absolute', top: 0, right: 0, margin: '3rem' }}>
+      <div
+        style={{
+          position: 'absolute',
+          insetBlockStart: 0,
+          insetInlineEnd: 0,
+          marginBlock: '3rem',
+          marginInline: '3rem',
+        }}>
         <Popover open autoAlign>
           <div className="playground-trigger">
             <CheckboxIcon />
@@ -274,7 +282,13 @@ export const AutoAlign = () => {
         </Popover>
       </div>
       <div
-        style={{ position: 'absolute', bottom: 0, right: 0, margin: '3rem' }}>
+        style={{
+          position: 'absolute',
+          insetBlockEnd: 0,
+          insetInlineEnd: 0,
+          marginBlock: '3rem',
+          marginInline: '3rem',
+        }}>
         <Popover open autoAlign>
           <div className="playground-trigger">
             <CheckboxIcon />
@@ -287,7 +301,14 @@ export const AutoAlign = () => {
           </PopoverContent>
         </Popover>
       </div>
-      <div style={{ position: 'absolute', bottom: 0, left: 0, margin: '3rem' }}>
+      <div
+        style={{
+          position: 'absolute',
+          insetBlockEnd: 0,
+          insetInlineStart: 0,
+          marginBlock: '3rem',
+          marginInline: '3rem',
+        }}>
         <Popover open autoAlign>
           <div className="playground-trigger">
             <CheckboxIcon />

diff --git a/packages/react/src/components/Text/Text.tsx b/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

diff --git a/packages/react/src/components/TreeView/TreeNode.js b/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

diff --git a/packages/styles/scss/components/accordion/_accordion.scss b/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 {

diff --git a/packages/styles/scss/components/breadcrumb/_breadcrumb.scss b/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;

diff --git a/packages/styles/scss/components/button/_button.scss b/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;
+  }
 }
diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/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);
+  }
 }
diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/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%;
   }
 

diff --git a/packages/styles/scss/components/data-table/action/_data-table-action.scss b/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);
   }

diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/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;

diff --git a/packages/styles/scss/components/notification/_actionable-notification.scss b/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(

diff --git a/packages/styles/scss/components/notification/_inline-notification.scss b/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 {

diff --git a/packages/styles/scss/components/pagination-nav/_pagination-nav.scss b/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);
+  }
 }
diff --git a/packages/styles/scss/components/pagination/_pagination.scss b/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%);
+  }
 }