fix: Fixes editable table cell paddings for certain corner cases (#3145)

cloudscape-design · Dec 23, 2024 · b3e4bf7 · b3e4bf7
1 parent d0ecb9a
commit b3e4bf7
Showing 1 changed file with 23 additions and 23 deletions.
diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
@@ -116,6 +116,11 @@ $cell-negative-space-vertical: 2px;
     margin-block-end: calc(-1 * #{$cell-negative-space-vertical});
   }
 }
+@mixin body-cell-active-hover-padding($padding-start) {
+  &:not(.body-cell-edit-active).body-cell-editable:hover {
+    @include cell-padding-inline-start(calc(#{$padding-start} + #{awsui.$border-divider-list-width}));
+  }
+}
 
 .body-cell {
   box-sizing: border-box;
@@ -126,9 +131,10 @@ $cell-negative-space-vertical: 2px;
   text-align: start;
 
   @include cell-padding-inline-start($cell-horizontal-padding);
+  @include cell-padding-inline-end($cell-horizontal-padding);
+
   @include cell-padding-block-start($cell-vertical-padding);
   @include cell-padding-block-end($cell-vertical-padding-w-border);
-  @include cell-padding-inline-end($cell-horizontal-padding);
 
   &-content {
     box-sizing: border-box;
@@ -147,36 +153,35 @@ $cell-negative-space-vertical: 2px;
   }
   &:first-child {
     border-inline-start: $border-placeholder;
+    @include cell-padding-inline-start($cell-edge-horizontal-padding);
   }
   &:last-child {
     border-inline-end: $border-placeholder;
     @include cell-padding-inline-end($cell-edge-horizontal-padding);
   }
+  // Using very small padding for 1st column cells in VR.
   &.is-visual-refresh:first-child {
-    &:not(.has-striped-rows) {
-      @include cell-padding-inline-start(awsui.$space-xxxs);
-      &:not(.body-cell-edit-active).body-cell-editable:hover {
-        @include cell-padding-inline-start(calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width}));
-      }
-    }
+    @include cell-padding-inline-start(awsui.$space-xxxs);
+    @include body-cell-active-hover-padding(awsui.$space-xxxs);
 
-    &.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.
-    */
+    // Using slightly larger padding for tables with striped rows 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);
+      @include body-cell-active-hover-padding(awsui.$space-xxs);
 
       &.sticky-cell-pad-inline-start {
         @include cell-padding-inline-start($cell-horizontal-padding);
+        @include body-cell-active-hover-padding($cell-horizontal-padding);
       }
     }
 
+    // Using normal padding when 1st column is sticky.
+    &.sticky-cell-pad-inline-start:not(.has-selection) {
+      @include cell-padding-inline-start($cell-horizontal-padding);
+      @include body-cell-active-hover-padding($cell-horizontal-padding);
+    }
+
     /*
       Remove the placeholder border if the row is not selectable.
       Rows that are not selectable will reserve the horizontal space
@@ -186,9 +191,6 @@ $cell-negative-space-vertical: 2px;
       border-inline-start: none;
     }
   }
-  &:first-child:not(.is-visual-refresh) {
-    @include cell-padding-inline-start($cell-edge-horizontal-padding);
-  }
   &-first-row {
     border-block-start: $border-placeholder;
   }
@@ -246,9 +248,6 @@ $cell-negative-space-vertical: 2px;
       transition-duration: awsui.$motion-duration-transition-show-quick;
       transition-timing-function: awsui.$motion-easing-sticky;
     }
-    &-pad-left:not(.has-selection):not(.is-visual-refresh.body-cell:first-child.has-striped-rows) {
-      @include cell-padding-inline-start(awsui.$space-table-horizontal);
-    }
     &.body-cell-shaded {
       background: awsui.$color-background-cell-shaded;
     }
@@ -418,7 +417,8 @@ $cell-negative-space-vertical: 2px;
       }
       @include cell-padding-inline-start($editing-cell-padding-inline);
       @include cell-padding-inline-end($editing-cell-padding-inline);
-      @include cell-padding-block($editing-cell-padding-block);
+      @include cell-padding-block-start($editing-cell-padding-block);
+      @include cell-padding-block-end(calc($editing-cell-padding-block + 1px));
     }
 
     &:not(.body-cell-edit-active) {