Remove --rdg-sign variable and use dir pseudo-class (#3561)

* Remove `--rdg-sign` variable and use `dir` pseudo-class Co-authored-by: Nicolas Stepien <[email protected]>
adazzle · Jul 30, 2024 · 9675973 · 9675973
1 parent 48c1fbc
commit 9675973
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
@@ -1078,7 +1078,6 @@ function DataGrid<R, SR, K extends Key>(
           gridTemplateRows: templateRows,
           '--rdg-header-row-height': `${headerRowHeight}px`,
           '--rdg-scroll-height': `${scrollHeight}px`,
-          '--rdg-sign': isRtl ? -1 : 1,
           ...layoutCssVars
         } as unknown as React.CSSProperties
       }

diff --git a/src/style/core.ts b/src/style/core.ts
@@ -50,7 +50,11 @@ const root = css`
     ${lightTheme}
     --rdg-selection-color: #66afe9;
     --rdg-font-size: 14px;
-    --rdg-cell-frozen-box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
+    --rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
+
+    &:dir(rtl) {
+      --rdg-cell-frozen-box-shadow: -2px 0 5px -2px rgba(136, 136, 136, 0.3);
+    }
 
     display: grid;