From 8cff76ea501114ba5da6aa3084065734b085d1f5 Mon Sep 17 00:00:00 2001 From: Andrei Zhaleznichenka Date: Tue, 17 Dec 2024 09:40:37 +0100 Subject: [PATCH 1/3] fix editable cell bottom padding --- src/table/body-cell/styles.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss index a09ce882f5..c1a7bcae52 100644 --- a/src/table/body-cell/styles.scss +++ b/src/table/body-cell/styles.scss @@ -418,7 +418,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) { From b4a3b82bc8207acb9304178455ba6584cec86939 Mon Sep 17 00:00:00 2001 From: Andrei Zhaleznichenka Date: Tue, 17 Dec 2024 10:29:35 +0100 Subject: [PATCH 2/3] fix editable + sticky padding --- src/table/body-cell/styles.scss | 35 +++++++++++++-------------------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss index c1a7bcae52..313ab48181 100644 --- a/src/table/body-cell/styles.scss +++ b/src/table/body-cell/styles.scss @@ -126,9 +126,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,28 +148,21 @@ $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})); - } - } - - &.sticky-cell-pad-inline-start:not(.has-selection) { - @include cell-padding-inline-start($cell-horizontal-padding); + @include cell-padding-inline-start(awsui.$space-xxxs); + &.body-cell-editable:hover { + @include cell-padding-inline-start(calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width})); } - /* - 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); @@ -177,6 +171,11 @@ $cell-negative-space-vertical: 2px; } } + // Using normal padding when 1st column is sticky. + &.sticky-cell-pad-inline-start:not(.has-selection) { + @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 @@ -186,9 +185,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 +242,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; } From 261c55f7d24cb445557b61a6af1717f7ec8ff92b Mon Sep 17 00:00:00 2001 From: Andrei Zhaleznichenka Date: Fri, 20 Dec 2024 06:54:25 +0100 Subject: [PATCH 3/3] fix first editable col shaking --- src/table/body-cell/styles.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss index 313ab48181..f5c121f77a 100644 --- 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; @@ -157,23 +162,24 @@ $cell-negative-space-vertical: 2px; // Using very small padding for 1st column cells in VR. &.is-visual-refresh:first-child { @include cell-padding-inline-start(awsui.$space-xxxs); - &.body-cell-editable:hover { - @include cell-padding-inline-start(calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width})); - } + @include body-cell-active-hover-padding(awsui.$space-xxxs); // 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); } /*