TableOfContents: Fix padding-inline-start padding-inline-end issues w…

…ith PostCSS (#3615)
pinterest · Jun 7, 2024 · b04d221 · b04d221
1 parent b65bee5
commit b04d221
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 18 deletions.
diff --git a/packages/gestalt/src/TableOfContents/TableOfContentsAnchor.css b/packages/gestalt/src/TableOfContents/TableOfContentsAnchor.css
@@ -2,31 +2,58 @@
   composes: paddingY3 from "../boxWhitespace.css";
   composes: flexGrow from "../Layout.css";
   background-color: var(--color-background-tableofcontents-item-default);
-  padding-inline-end: var(--space-400);
+}
+
+html:not([dir="rtl"]) .itemEndPadding {
+  padding-right: var(--space-400);
+}
+
+html[dir="rtl"] .itemEndPadding {
+  padding-left: var(--space-400);
 }
 
 .itemHover {
   background-color: var(--color-background-tableofcontents-item-hover);
 }
 
-.nestingIndentation1 {
-  padding-inline-start: var(--space-300);
+html:not([dir="rtl"]) .nestingIndentation1 {
+  padding-left: var(--space-300);
+}
+
+html:not([dir="rtl"]) .nestingIndentation2 {
+  padding-left: var(--space-800);
+}
+
+html:not([dir="rtl"]) .nestingIndentation3 {
+  padding-left: var(--space-1300);
+}
+
+html:not([dir="rtl"]) .nestingIndentation4 {
+  padding-left: 72px;
+}
+
+html:not([dir="rtl"]) .nestingIndentation5 {
+  padding-left: 92px;
+}
+
+html[dir="rtl"] .nestingIndentation1 {
+  padding-right: var(--space-300);
 }
 
-.nestingIndentation2 {
-  padding-inline-start: var(--space-800);
+html[dir="rtl"] .nestingIndentation2 {
+  padding-right: var(--space-800);
 }
 
-.nestingIndentation3 {
-  padding-inline-start: var(--space-1300);
+html[dir="rtl"] .nestingIndentation3 {
+  padding-right: var(--space-1300);
 }
 
-.nestingIndentation4 {
-  padding-inline-start: 72px;
+html[dir="rtl"] .nestingIndentation4 {
+  padding-right: 72px;
 }
 
-.nestingIndentation5 {
-  padding-inline-start: 92px;
+html[dir="rtl"] .nestingIndentation5 {
+  padding-right: 92px;
 }
 
 html:not([dir="rtl"]) .item {

diff --git a/packages/gestalt/src/TableOfContents/TableOfContentsAnchor.tsx b/packages/gestalt/src/TableOfContents/TableOfContentsAnchor.tsx
@@ -39,6 +39,7 @@ export default function TableOfContentsAnchor({ label, active, href, onClick }:
         <div
           className={classNames(
             styles.item,
+            styles.itemPadding,
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore cannot infer type with dynamic property name
             styles[`nestingIndentation${nestedLevel}`],

diff --git a/packages/gestalt/src/__snapshots__/TableOfContents.test.tsx.snap b/packages/gestalt/src/__snapshots__/TableOfContents.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`TableOfContents renders 1`] = `
             }
           />
           <div
-            className="item nestingIndentation1"
+            className="item itemPadding nestingIndentation1"
           >
             <div
               className="Text fontSize300 default alignStart breakWord fontWeightSemiBold"
@@ -121,7 +121,7 @@ exports[`TableOfContents renders an accessibility label 1`] = `
             }
           />
           <div
-            className="item nestingIndentation1"
+            className="item itemPadding nestingIndentation1"
           >
             <div
               className="Text fontSize300 default alignStart breakWord fontWeightSemiBold"
@@ -180,7 +180,7 @@ exports[`TableOfContents renders nested items 1`] = `
             }
           />
           <div
-            className="item nestingIndentation1"
+            className="item itemPadding nestingIndentation1"
           >
             <div
               className="Text fontSize300 default alignStart breakWord fontWeightNormal"
@@ -228,7 +228,7 @@ exports[`TableOfContents renders nested items 1`] = `
                 }
               />
               <div
-                className="item nestingIndentation2"
+                className="item itemPadding nestingIndentation2"
               >
                 <div
                   className="Text fontSize200 default alignStart breakWord fontWeightSemiBold"
@@ -274,7 +274,7 @@ exports[`TableOfContents renders nested items 1`] = `
                 }
               />
               <div
-                className="item nestingIndentation2"
+                className="item itemPadding nestingIndentation2"
               >
                 <div
                   className="Text fontSize200 default alignStart breakWord fontWeightNormal"
@@ -335,7 +335,7 @@ exports[`TableOfContents renders without title 1`] = `
             }
           />
           <div
-            className="item nestingIndentation1"
+            className="item itemPadding nestingIndentation1"
           >
             <div
               className="Text fontSize300 default alignStart breakWord fontWeightSemiBold"
@@ -381,7 +381,7 @@ exports[`TableOfContents renders without title 1`] = `
             }
           />
           <div
-            className="item nestingIndentation1"
+            className="item itemPadding nestingIndentation1"
           >
             <div
               className="Text fontSize300 default alignStart breakWord fontWeightNormal"