more

pinterest · Jun 6, 2024 · 9696eb7 · 9696eb7
1 parent b65bee5
commit 9696eb7
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 11 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}`],