chore: add RTL support and factor css

opendatasoft · Nov 27, 2024 · ffb8a3a · ffb8a3a
1 parent 38d8861
commit ffb8a3a
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 54 deletions.
diff --git a/packages/visualizations-react/stories/Table/StickyColumns.stories.tsx b/packages/visualizations-react/stories/Table/StickyColumns.stories.tsx
@@ -54,4 +54,13 @@ export const StickyColumns = Template.bind({});
 StickyColumns.args = {
     data,
     options,
+};
+
+export const RtlStickyColumns = Template.bind({});
+RtlStickyColumns.parameters = {
+    direction: 'rtl',
+};
+RtlStickyColumns.args = {
+    data,
+    options,
 };
diff --git a/packages/visualizations/src/components/Table/Cell/Cell.svelte b/packages/visualizations/src/components/Table/Cell/Cell.svelte
@@ -24,57 +24,43 @@
     </div>
 </td>
 
-<style>
+<style lang="scss">
+    @import '../sticky';
     :global(.ods-dataviz--default td) {
         background-color: white;
         overflow: visible;
+        padding: 0;
     }
 
-    :global(.ods-dataviz--default td.table-header--number) {
+    :global(.ods-dataviz--default div.table-header--number) {
         text-align: right;
     }
     /* to be improved in the formatting story */
-    :global(.ods-dataviz--default td.table-data--long-text > span),
-    :global(.ods-dataviz--default td.table-data--short-text),
-    :global(.ods-dataviz--default td.table-data--url) {
+    :global(.ods-dataviz--default div.table-data--long-text > span),
+    :global(.ods-dataviz--default div.table-data--short-text),
+    :global(.ods-dataviz--default div.table-data--url) {
         text-overflow: ellipsis;
         overflow: hidden;
         width: max-content;
         min-width: 40px;
         max-width: 240px;
     }
-    :global(.ods-dataviz--default td.table-data--long-text > span) {
+    :global(.ods-dataviz--default div.table-data--long-text > span) {
         display: -webkit-box;
         -webkit-line-clamp: 3;
         line-clamp: 3;
         -webkit-box-orient: vertical;
         white-space: pre-wrap;
     }
-    :global(.ods-dataviz--default td.table-data--number) {
+    :global(.ods-dataviz--default div.table-data--number) {
         text-align: right;
     }
 
+    /* Wrapper div to allow position: relative while the <td> has sticky,
+        so that the ::after can have position: absolute */
     div {
-        padding: var(--spacing-75);
         position: relative;
+        padding: var(--spacing-75);
         overflow: visible;
     }
-
-    .sticky {
-        position: sticky;
-        left: var(--sticky-offset);
-        border-right: 1px solid var(--border-color);
-        z-index: 10;
-    }
-
-    /* applies shadow only on the left to avoid eating borders */
-    .isHorizontallyScrolled.isLastSticky::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: -6px;
-        height: 100%;
-        width: 6px;
-        background: linear-gradient(90deg, rgba(0, 0, 0, 0.13), transparent);
-    }
 </style>
diff --git a/packages/visualizations/src/components/Table/Headers/Th.svelte b/packages/visualizations/src/components/Table/Headers/Th.svelte
@@ -24,7 +24,8 @@
     <slot />
 </th>
 
-<style>
+<style lang="scss">
+    @import '../sticky';
     :global(.ods-dataviz--default th) {
         text-align: left;
         padding: var(--spacing-75);
@@ -35,23 +36,4 @@
     :global(.ods-dataviz--default th.table-header--number) {
         text-align: right;
     }
-
-    .sticky {
-        position: sticky;
-        left: var(--sticky-offset);
-        top: 0;
-        border-right: 1px solid var(--border-color);
-        z-index: 10;
-    }
-
-    /* applies shadow only on the left to avoid eating borders */
-    .isHorizontallyScrolled.isLastSticky::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: -6px;
-        height: 100%;
-        width: 6px;
-        background: linear-gradient(90deg, rgba(0, 0, 0, 0.13), transparent);
-    }
 </style>
diff --git a/packages/visualizations/src/components/Table/Table.svelte b/packages/visualizations/src/components/Table/Table.svelte
@@ -19,11 +19,8 @@
     let sortedStickyColumns: Column[] = [];
 
     function handleScroll() {
-        if (scrollBox?.scrollLeft > 0) {
-            isHorizontallyScrolled = true;
-        } else {
-            isHorizontallyScrolled = false;
-        }
+        isHorizontallyScrolled =
+            document.dir === 'rtl' ? scrollBox?.scrollLeft < 0 : scrollBox?.scrollLeft > 0;
     }
 
     // resets scroll when changing columns parameters

diff --git a/packages/visualizations/src/components/Table/_sticky.scss b/packages/visualizations/src/components/Table/_sticky.scss
@@ -0,0 +1,31 @@
+.sticky {
+    position: sticky;
+    z-index: 10;
+}
+
+.sticky:dir(ltr) {
+    left: var(--sticky-offset);
+    border-right: 1px solid var(--border-color);
+}
+
+.sticky:dir(rtl) {
+    right: var(--sticky-offset);
+    border-left: 1px solid var(--border-color);
+}
+
+/* applies shadow only on the left to avoid eating borders */
+.isHorizontallyScrolled.isLastSticky::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 6px;
+}
+.isHorizontallyScrolled.isLastSticky:dir(ltr)::after {
+    right: -6px;
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.13), transparent);
+}
+.isHorizontallyScrolled.isLastSticky:dir(rtl)::after {
+    left: -6px;
+    background: linear-gradient(-90deg, rgba(0, 0, 0, 0.13), transparent);
+}
diff --git a/packages/visualizations/src/components/Table/store.ts b/packages/visualizations/src/components/Table/store.ts
@@ -23,10 +23,9 @@ export const stickyColumnsOffset = derived(stickyColumnsWidth, ($widths) => {
     const cumulativeWidths = new Map();
     let cumulativeOffset = 0;
 
-    Array.from($widths).forEach(([key, clientWidth], index) => {
+    Array.from($widths).forEach(([key, clientWidth]) => {
         cumulativeWidths.set(key, cumulativeOffset);
-        const borderCompensation = index === 0 ? 1.5 : 1;
-        cumulativeOffset += clientWidth + borderCompensation;
+        cumulativeOffset += clientWidth + 1;
     });
 
     return cumulativeWidths;