Skip to content

Commit

Permalink
Migrate components and update stylelint.
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaemonCahill
DaemonCahill committed Feb 5, 2024
1 parent 2607709 commit b3e2ab7
Show file tree
Hide file tree
Showing 21 changed files with 502 additions and 383 deletions.
9 changes: 8 additions & 1 deletion .stylelintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,14 @@
"./src/p*/*.scss",
"./src/q*/*.scss",
"./src/r*/*.scss",
"./src/s*/*.scss"
"./src/s*/*.scss",
"./src/t*/*.scss",
"./src/u*/*.scss",
"./src/v*/*.scss",
"./src/w*/*.scss",
"./src/x*/*.scss",
"./src/y*/*.scss",
"./src/z*/*.scss"
],
"rules": {
"property-disallowed-list": ["border", "border-radius", "border-style", "margin", "padding"],
Expand Down
136 changes: 73 additions & 63 deletions src/table/body-cell/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,12 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-

.body-cell {
box-sizing: border-box;
padding: $cell-vertical-padding $cell-horizontal-padding $cell-vertical-padding-w-border;
border-top: awsui.$border-divider-list-width solid transparent;
padding-block-start: $cell-vertical-padding;
padding-block-end: $cell-vertical-padding-w-border;
padding-inline: $cell-horizontal-padding;
border-block-start: awsui.$border-divider-list-width solid transparent;
word-wrap: break-word;
border-bottom: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
font-weight: inherit;
text-align: start;
&:not(.body-cell-wrap) {
Expand All @@ -39,17 +41,17 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
text-overflow: ellipsis;
}
&:first-child {
border-left: $border-placeholder;
border-inline-start: $border-placeholder;
}
&:last-child {
border-right: $border-placeholder;
padding-right: $cell-edge-horizontal-padding;
border-inline-end: $border-placeholder;
padding-inline-end: $cell-edge-horizontal-padding;
}
&.is-visual-refresh:first-child {
&:not(.has-striped-rows) {
padding-left: awsui.$space-xxxs;
padding-inline-start: awsui.$space-xxxs;
&:not(.body-cell-edit-active).body-cell-editable:hover {
padding-left: calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width});
padding-inline-start: calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width});
}
}

Expand All @@ -59,9 +61,9 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
to the table edge.
*/
&:first-child.has-striped-rows {
padding-left: awsui.$space-xxs;
padding-inline-start: awsui.$space-xxs;
&-sticky-cell-pad-left {
padding-left: awsui.$space-table-horizontal;
padding-inline-start: awsui.$space-table-horizontal;
}
}

Expand All @@ -71,51 +73,57 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
that the placeholder border would consume.
*/
&:not(.has-selection):not(.body-cell-editable) {
border-left: none;
border-inline-start: none;
}
}
&:first-child:not(.is-visual-refresh) {
padding-left: $cell-edge-horizontal-padding;
padding-inline-start: $cell-edge-horizontal-padding;
}
&-first-row {
border-top: $border-placeholder;
border-block-start: $border-placeholder;
}
&-last-row:not(.body-cell-selected) {
&:not(.has-footer) {
// skip the border for the last row because the container already has a border
border-bottom: $border-placeholder;
border-block-end: $border-placeholder;
}

&.has-footer {
/*
Add a bottom border to the body cells of the last row as a separator between the
table and the footer
*/
border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
}
}
&-shaded {
background: awsui.$color-background-cell-shaded;
}
&-selected {
background-color: awsui.$color-background-item-selected;
border-top: $selected-border;
border-bottom: $selected-border;
padding-bottom: $cell-vertical-padding;
border-block-start: $selected-border;
border-block-end: $selected-border;
padding-block-end: $cell-vertical-padding;

// Last selected row has a fixed border-bottom width which do not change on selection in visual refresh.
// Adjust padding-bottom prevents a slight jump in the table height.
&.body-cell-last-row.is-visual-refresh {
padding-bottom: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
padding-block-end: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
}

&:first-child {
border-left: $selected-border;
border-radius: awsui.$border-radius-item 0 0 awsui.$border-radius-item;
border-inline-start: $selected-border;
border-start-start-radius: awsui.$border-radius-item;
border-start-end-radius: 0;
border-end-start-radius: awsui.$border-radius-item;
border-end-end-radius: 0;
}
&:last-child {
border-right: $selected-border;
border-radius: 0 awsui.$border-radius-item awsui.$border-radius-item 0;
border-inline-end: $selected-border;
border-start-start-radius: 0;
border-start-end-radius: awsui.$border-radius-item;
border-end-start-radius: 0;
border-end-end-radius: awsui.$border-radius-item;
}
}

Expand All @@ -124,7 +132,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
background: awsui.$color-background-container-content;
z-index: 798; // Our sticky elements should have z-index in the range of 800-850, this value needs to be lower
&-pad-left:not(.has-selection):not(.is-visual-refresh.body-cell:first-child.has-striped-rows) {
padding-left: awsui.$space-table-horizontal;
padding-inline-start: awsui.$space-table-horizontal;
}
&.body-cell-shaded {
background: awsui.$color-background-cell-shaded;
Expand Down Expand Up @@ -163,51 +171,54 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-

// Use padding as a selected border placeholder to make sure rows don't change height on selection (visual refresh)
&-selected:not(:first-child) {
padding-top: $cell-vertical-padding-w-border;
padding-block-start: $cell-vertical-padding-w-border;
}
&:not(.body-cell-selected).body-cell-next-selected {
border-bottom: 0;
padding-bottom: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
border-block-end: 0;
padding-block-end: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
}
&-selected.body-cell-prev-selected {
padding-top: $cell-vertical-padding-w-border;
border-top: $selected-border-placeholder;
padding-block-start: $cell-vertical-padding-w-border;
border-block-start: $selected-border-placeholder;
}
&-selected.body-cell-next-selected {
border-bottom-width: awsui.$border-divider-list-width;
border-block-end-width: awsui.$border-divider-list-width;
}
// Remove border radii for consecutive selected rows (visual refresh)
&-selected.body-cell-next-selected:first-child {
border-bottom-left-radius: 0;
border-end-start-radius: 0;
}
&-selected.body-cell-next-selected:last-child {
border-bottom-right-radius: 0;
border-end-end-radius: 0;
}
&-selected.body-cell-prev-selected:first-child {
border-top-left-radius: 0;
border-start-start-radius: 0;
}
&-selected.body-cell-prev-selected:last-child {
border-top-right-radius: 0;
border-start-end-radius: 0;
}
// Reset padding for selected rows with no adjacent selected row above it,
// because rows reuse adjacent selected borders (visual refresh)
&-selected:not(.body-cell-prev-selected) {
padding-top: $cell-vertical-padding;
padding-block-start: $cell-vertical-padding;
}

&-editor {
padding: 0 $edit-button-padding-right 0 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: $edit-button-padding-right;
}

&-success {
padding: 0 $success-icon-padding-right 0 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: $success-icon-padding-right;
}

&-success,
&-editor {
top: 0;
right: 0;
bottom: 0;
inset-block: 0;
inset-inline-end: 0;
position: absolute;

display: flex;
Expand All @@ -218,7 +229,8 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
cursor: pointer;
outline: 0;
background: 0;
border: 0;
border-block: 0;
border-inline: 0;

color: awsui.$color-text-button-normal-default;

Expand All @@ -230,13 +242,15 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
}

&-form {
margin: calc(-1 * #{awsui.$space-xs}) calc(-1.5 * #{awsui.$space-xs});
margin-block: calc(-1 * #{awsui.$space-xs});
margin-inline: calc(-1.5 * #{awsui.$space-xs});

.is-visual-refresh.body-cell:first-child.has-striped-rows > & {
margin-left: calc(-1 * #{awsui.$space-xxs});
margin-inline-start: calc(-1 * #{awsui.$space-xxs});
}

.is-visual-refresh.body-cell:first-child:not(.has-striped-rows) > & {
margin-left: calc(-1 * #{awsui.$space-xxxs});
margin-inline-start: calc(-1 * #{awsui.$space-xxxs});
}
}

Expand Down Expand Up @@ -276,7 +290,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-

&:not(.body-cell-edit-active) {
@mixin focused-editor-styles {
padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
& > .body-cell-editor {
opacity: 1;
}
Expand Down Expand Up @@ -315,35 +329,31 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-

&:hover {
background-color: awsui.$color-background-dropdown-item-hover;
border: awsui.$border-divider-list-width solid awsui.$color-border-editable-cell-hover;
left: calc(-1 * #{awsui.$border-divider-list-width});
right: calc(-1 * #{awsui.$border-divider-list-width});

border-block: awsui.$border-divider-list-width solid awsui.$color-border-editable-cell-hover;
border-inline: awsui.$border-divider-list-width solid awsui.$color-border-editable-cell-hover;
inset-inline: calc(-1 * #{awsui.$border-divider-list-width});
position: relative;

&:first-child {
left: 0;
right: 0;
inset-inline: 0;
}

& > .body-cell-editor {
padding-right: calc(#{$edit-button-padding-right} - (2 * #{awsui.$border-divider-list-width}));
padding-inline-end: calc(#{$edit-button-padding-right} - (2 * #{awsui.$border-divider-list-width}));
}
& > .body-cell-success {
// Update padding to avoid a jumping icon because of the additional borders added when hovering an editable cell.
padding-right: calc(#{$success-icon-padding-right} - (2 * #{awsui.$border-divider-list-width}));
padding-inline-end: calc(#{$success-icon-padding-right} - (2 * #{awsui.$border-divider-list-width}));
}
&.body-cell-last-row.body-cell-selected,
&.body-cell-next-selected {
padding-top: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width} / 2));
padding-bottom: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width} / 2));
padding-block: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width} / 2));
}
&.body-cell-last-row:not(.body-cell-selected) {
padding-top: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
padding-block-start: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
}
&.body-cell-first-row:not(.body-cell-selected) {
padding-top: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
padding-bottom: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
padding-block: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
}
&.sticky-cell {
position: sticky;
Expand All @@ -354,16 +364,16 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
}
&-editable.is-visual-refresh:not(.body-cell-edit-active):hover {
&:first-child {
border-top-left-radius: awsui.$border-radius-item;
border-bottom-left-radius: awsui.$border-radius-item;
border-start-start-radius: awsui.$border-radius-item;
border-end-start-radius: awsui.$border-radius-item;
}
&:last-child {
border-top-right-radius: awsui.$border-radius-item;
border-bottom-right-radius: awsui.$border-radius-item;
border-start-end-radius: awsui.$border-radius-item;
border-end-end-radius: awsui.$border-radius-item;
}
&.body-cell-first-row > .body-cell-success,
&.body-cell-first-row > .body-cell-editor {
padding-top: awsui.$border-divider-list-width;
padding-block-start: awsui.$border-divider-list-width;
}
}
}
Loading

0 comments on commit b3e2ab7

Please sign in to comment.