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 Jan 21, 2024
1 parent 43d1987 commit 0835f9b
Show file tree
Hide file tree
Showing 21 changed files with 506 additions and 384 deletions.
11 changes: 10 additions & 1 deletion .stylelintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,16 @@
},
"overrides": [
{
"files": ["./src/button/*.scss"],
"files": [
"./src/button/*.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"],
"csstools/use-logical": "always"
Expand Down
139 changes: 75 additions & 64 deletions src/table/body-cell/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,28 +27,30 @@ $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;
&:not(.body-cell-wrap) {
white-space: nowrap;
overflow: hidden;
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 @@ -58,9 +60,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 @@ -70,51 +72,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 @@ -123,7 +131,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 @@ -162,51 +170,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 @@ -217,7 +228,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 @@ -229,13 +241,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 @@ -270,7 +284,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 All @@ -286,10 +300,10 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
// It's therefore important to display the focus outline, even when a keyboard user wasn't detected.
// For example, when an edit button is selected from the VoiceOver rotor menu.
&:focus-within {
padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
&.body-cell-has-success {
// After a successful edit, we display the success icon next to the edit button and need additional padding to not let the text overflow the success icon.
padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l} + #{$icon-width-with-spacing});
padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l} + #{$icon-width-with-spacing});
}
@include focused-editor-styles;
@include styles.focus-highlight(
Expand All @@ -305,32 +319,29 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
&:hover {
position: relative;
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});
@include focused-editor-styles;
&: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 @@ -340,16 +351,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 0835f9b

Please sign in to comment.