fix: Fixes table sticky col padding in vr (#2637)

cloudscape-design · Sep 2, 2024 · ca81699 · ca81699
1 parent b1f2977
commit ca81699
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/pages/table/sticky-columns.page.tsx b/pages/table/sticky-columns.page.tsx
@@ -22,6 +22,7 @@ type DemoContext = React.Context<
     resizableColumns: boolean;
     stickyHeader: boolean;
     sortingDisabled: boolean;
+    stripedRows: boolean;
     selectionType: undefined | 'single' | 'multi';
     stickyColumnsFirst: string;
     stickyColumnsLast: string;
@@ -195,6 +196,13 @@ export default () => {
               Sorting disabled
             </Checkbox>
 
+            <Checkbox
+              checked={urlParams.stripedRows}
+              onChange={event => setUrlParams({ stripedRows: event.detail.checked })}
+            >
+              Striped rows
+            </Checkbox>
+
             <Checkbox
               checked={urlParams.enableKeyboardNavigation}
               onChange={event => {

diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
@@ -152,23 +152,28 @@ $cell-negative-space-vertical: 2px;
       }
     }
 
+    &.sticky-cell-pad-inline-start:not(.has-selection) {
+      @include cell-padding-inline-start($cell-horizontal-padding);
+    }
+
     /*
       Striped rows requires additional left padding because the
       shaded background makes the child content appear too close
       to the table edge.
-      */
+    */
     &:first-child.has-striped-rows {
       @include cell-padding-inline-start(awsui.$space-xxs);
-      &-sticky-cell-pad-inline-start {
-        @include cell-padding-inline-start(awsui.$space-table-horizontal);
+
+      &.sticky-cell-pad-inline-start {
+        @include cell-padding-inline-start($cell-horizontal-padding);
       }
     }
 
     /*
       Remove the placeholder border if the row is not selectable.
       Rows that are not selectable will reserve the horizontal space
       that the placeholder border would consume.
-      */
+    */
     &:not(.has-selection):not(.body-cell-editable) {
       border-inline-start: none;
     }

diff --git a/src/table/header-cell/styles.scss b/src/table/header-cell/styles.scss
@@ -7,6 +7,8 @@
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
 
+$cell-horizontal-padding: awsui.$space-scaled-l;
+
 @mixin when-focus-visible-or-fake {
   @include focus-visible.when-visible {
     @content;
@@ -203,23 +205,24 @@ settings icon in the pagination slot.
     @include header-cell-focus-outline-first(awsui.$space-table-header-focus-outline-gutter);
   }
 
-  &:first-child:not(.has-striped-rows) {
+  &:first-child:not(.has-striped-rows):not(.sticky-cell-pad-inline-start) {
     @include cell-offset(awsui.$space-xxxs);
-    &.sticky-cell-pad-inline-start {
-      @include cell-offset(awsui.$space-table-horizontal);
-    }
   }
 
   /*
-  Striped rows requires additional left padding because the
-  shaded background makes the child content appear too close
-  to the table edge.
+    Striped rows requires additional left padding because the
+    shaded background makes the child content appear too close
+    to the table edge.
   */
-  &:first-child.has-striped-rows {
+  &:first-child.has-striped-rows:not(.sticky-cell-pad-inline-start) {
     @include cell-offset(awsui.$space-xxs);
   }
 
   &:last-child.header-cell-sortable {
     padding-inline-end: awsui.$space-xxxs;
   }
+
+  &.sticky-cell-pad-inline-start {
+    @include cell-offset($cell-horizontal-padding);
+  }
 }