Skip to content

Commit

Permalink
chore: Migrate "B/C/D/E/F" components to logical properties (#1788)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaemonCahill
DaemonCahill authored Dec 11, 2023
1 parent 5ed251f commit 8400936
Show file tree
Hide file tree
Showing 39 changed files with 586 additions and 442 deletions.
7 changes: 6 additions & 1 deletion .stylelintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,12 @@
{
"files": [
"./src/a*/*.scss",
"./src/button/*.scss"
"./src/b*/*.scss",
"./src/c*/*.scss",
"./src/d*/*.scss",
"./src/e*/*.scss",
"./src/f*/*.scss"

],
"rules": {
"property-disallowed-list": ["border-radius", "border-style", "border-width", "margin", "padding"],
Expand Down
8 changes: 6 additions & 2 deletions src/badge/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,12 @@
@include styles.font-body-s;
line-height: awsui.$line-height-body-m;
display: inline-block;
border-radius: awsui.$border-radius-badge;
padding: 0 awsui.$space-xs;
border-start-start-radius: awsui.$border-radius-badge;
border-start-end-radius: awsui.$border-radius-badge;
border-end-start-radius: awsui.$border-radius-badge;
border-end-end-radius: awsui.$border-radius-badge;
padding-block: 0;
padding-inline: awsui.$space-xs;
color: awsui.$color-text-notification-default;

&.badge-color-grey {
Expand Down
6 changes: 4 additions & 2 deletions src/box/base-styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,9 +129,11 @@ $font-styles: (
}

@mixin headings-paragraphs-extra-defaults {
margin: 0;
margin-block: 0;
margin-inline: 0;
text-decoration: none;
padding: awsui.$space-xxs 0;
padding-block: awsui.$space-xxs;
padding-inline: 0;
}

@mixin code-extra-defaults {
Expand Down
2 changes: 2 additions & 0 deletions src/box/layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,11 @@
}
}

/* stylelint-disable csstools/use-logical */
.f-left {
float: left;
}
.f-right {
float: right;
}
/* stylelint-enable csstools/use-logical */
6 changes: 3 additions & 3 deletions src/box/text.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
&.key-label-variant {
@include styles.font-label;
color: awsui.$color-text-label;
margin-bottom: awsui.$space-key-value-gap;
margin-block-end: awsui.$space-key-value-gap;
}
&.value-large-variant {
@include styles.font-display-l;
Expand Down Expand Up @@ -90,10 +90,10 @@
}

.t-left {
text-align: left;
text-align: start;
}
.t-right {
text-align: right;
text-align: end;
}
.t-center {
text-align: center;
Expand Down
5 changes: 3 additions & 2 deletions src/breadcrumb-group/item/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
display: flex;

> .icon {
margin: 0 awsui.$space-xs;
margin-block: 0;
margin-inline: awsui.$space-xs;
color: awsui.$color-text-breadcrumb-icon;
}

Expand All @@ -40,7 +41,7 @@
}
}
.compressed {
min-width: 0;
min-inline-size: 0;
overflow: hidden;
> .text {
overflow: hidden;
Expand Down
25 changes: 16 additions & 9 deletions src/breadcrumb-group/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@

.breadcrumb-group {
@include styles.styles-reset;
margin: 0;
padding: awsui.$space-xxs 0;
margin-block: 0;
margin-inline: 0;
padding-block: awsui.$space-xxs;
padding-inline: 0;

> .item {
@include styles.styles-reset;
Expand All @@ -19,24 +21,29 @@
> .breadcrumb-group-list {
display: flex;
align-items: center;
padding: 0;
margin: 0;
padding-block: 0;
padding-inline: 0;
margin-block: 0;
margin-inline: 0;
list-style: none;
width: 100%;
inline-size: 100%;
flex-wrap: wrap;

> .item,
> .ellipsis {
display: inline-block;
padding: 0;
margin: 0;
padding-block: 0;
padding-inline: 0;
margin-block: 0;
margin-inline: 0;
}

> .ellipsis {
display: none;

> .icon {
margin: 0 styles.$base-size;
margin-block: 0;
margin-inline: styles.$base-size;
color: awsui.$color-text-breadcrumb-icon;
}
}
Expand All @@ -54,7 +61,7 @@
flex-shrink: 0;
}
> .item {
min-width: 0;
min-inline-size: 0;
&:not(:first-child):not(:last-child) {
display: none;
}
Expand Down
65 changes: 37 additions & 28 deletions src/button-dropdown/category-elements/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,20 @@

.header {
position: relative;
margin: 0;
margin-block: 0;
margin-inline: 0;
color: awsui.$color-text-dropdown-group-label;
border: awsui.$border-divider-list-width solid transparent;
border-block: awsui.$border-divider-list-width solid transparent;
border-inline: awsui.$border-divider-list-width solid transparent;
// remove the borders completely to avoid the slating effect at the border ends (AWSUI-10545)
border-left: 0;
border-right: 0;
border-inline-width: 0;
font-weight: bold;
display: flex;
justify-content: space-between;
// to compensate for the loss of padding due to the removal of the left and right borders
// and differences in default divider + selected border widths (visual refresh)
padding: styles.$option-padding-with-border-placeholder-vertical
calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
padding-block: styles.$option-padding-with-border-placeholder-vertical;
padding-inline: calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
z-index: 1;

&.disabled {
Expand All @@ -29,8 +30,8 @@
}

&.expandable-header {
border-top-color: awsui.$color-border-dropdown-group;
border-bottom-color: awsui.$color-border-dropdown-group;
border-block-start-color: awsui.$color-border-dropdown-group;
border-block-end-color: awsui.$color-border-dropdown-group;
cursor: pointer;
&.disabled {
cursor: default;
Expand All @@ -39,16 +40,22 @@
outline: none;
}
&.rolled-down {
border-bottom-color: transparent;
border-block-end-color: transparent;
}
&.highlighted {
background-color: awsui.$color-background-dropdown-item-hover;
color: awsui.$color-text-dropdown-item-highlighted;
// reset padding when adding border back in
padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
border: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
border-radius: awsui.$border-radius-item;
padding-block: styles.$option-padding-vertical;
padding-inline: awsui.$space-button-horizontal;
border-block: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
border-inline: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
border-start-start-radius: awsui.$border-radius-item;
border-start-end-radius: awsui.$border-radius-item;
border-end-start-radius: awsui.$border-radius-item;
border-end-end-radius: awsui.$border-radius-item;
z-index: 2;

&.disabled {
background-color: awsui.$color-background-dropdown-item-dimmed;
border-color: awsui.$color-border-dropdown-item-dimmed-hover;
Expand All @@ -61,14 +68,12 @@
}

&.variant-navigation {
padding-top: awsui.$space-xs;
padding-bottom: awsui.$space-xs;
padding-block: awsui.$space-xs;

&.highlighted {
border-color: transparent;
border-top-color: awsui.$color-border-dropdown-group;
border-bottom-color: awsui.$color-border-dropdown-group;

border-block-start-color: awsui.$color-border-dropdown-group;
border-block-end-color: awsui.$color-border-dropdown-group;
background-color: transparent;
color: awsui.$color-text-accent;
}
Expand All @@ -78,33 +83,34 @@

.category {
list-style: none;
margin-top: calc(-1 * #{awsui.$border-divider-list-width});
padding: 0;
margin-block-start: calc(-1 * #{awsui.$border-divider-list-width});
padding-block: 0;
padding-inline: 0;
&:first-child {
margin-top: 0;
margin-block-start: 0;
}

&.expandable {
border-top: 0;
border-block-start: 0;
}

&:last-child {
border-bottom: none;
border-block-end: none;
}

&.variant-navigation {
padding-top: awsui.$space-xxs;
padding-block-start: awsui.$space-xxs;

&.expandable {
padding-top: 0;
padding-block-start: 0;
}
}
}

.expand-icon {
position: relative;
left: awsui.$space-s;
width: awsui.$space-m;
inset-inline-start: awsui.$space-s;
inline-size: awsui.$space-m;
display: inline-block;

&-up {
Expand All @@ -120,7 +126,10 @@
}

.items-list-container {
padding: 0;
margin: -1px 0 0 0;
padding-block: 0;
padding-inline: 0;
margin-block-start: -1px;
margin-block-end: 0;
margin-inline: 0;
overflow-y: auto;
}
35 changes: 20 additions & 15 deletions src/button-dropdown/item-element/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,24 @@
.item-element {
position: relative;
z-index: 1;
border: awsui.$border-item-width solid transparent;
border-block: awsui.$border-item-width solid transparent;
border-inline: awsui.$border-item-width solid transparent;
list-style: none;
padding: 0;
padding-block: 0;
padding-inline: 0;
color: awsui.$color-text-dropdown-item-default;
margin-top: calc(-1 * #{styles.$control-border-width});
margin-block-start: calc(-1 * #{styles.$control-border-width});
cursor: pointer;

&.disabled {
cursor: default;
color: awsui.$color-text-dropdown-item-disabled;
}
&:first-child {
margin-top: 0;
margin-block-start: 0;
}
&.last {
border-bottom: awsui.$border-item-width solid awsui.$color-border-dropdown-group;
border-block-end: awsui.$border-item-width solid awsui.$color-border-dropdown-group;
}
&.highlighted {
color: awsui.$color-text-dropdown-item-highlighted;
Expand All @@ -36,7 +38,10 @@
&.variant-primary {
background-color: awsui.$color-background-dropdown-item-hover;
border-color: awsui.$color-border-dropdown-item-hover;
border-radius: awsui.$border-radius-item;
border-start-start-radius: awsui.$border-radius-item;
border-start-end-radius: awsui.$border-radius-item;
border-end-start-radius: awsui.$border-radius-item;
border-end-end-radius: awsui.$border-radius-item;

&.disabled {
color: awsui.$color-text-dropdown-item-dimmed;
Expand All @@ -58,18 +63,17 @@

// Additional spacing for groups of items
&.first:not(.has-category-header) {
padding-top: styles.$option-padding-vertical;
padding-block-start: styles.$option-padding-vertical;
}
&.last {
padding-bottom: styles.$option-padding-vertical;
padding-block-end: styles.$option-padding-vertical;
}
&.first.last {
padding-bottom: styles.$option-padding-vertical;
padding-top: styles.$option-padding-vertical;
padding-block: styles.$option-padding-vertical;
}
// Additional spacing for the very last item in the list
&.last:last-child {
padding-bottom: styles.$option-padding-vertical;
padding-block-end: styles.$option-padding-vertical;
}
}
}
Expand All @@ -78,7 +82,8 @@
@include styles.text-wrapping;
display: flex;
align-items: flex-start;
padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
padding-block: styles.$option-padding-vertical;
padding-inline: awsui.$space-button-horizontal;
color: inherit;
text-decoration: none;

Expand All @@ -89,15 +94,15 @@
/* stylelint-disable-next-line selector-max-type */
.has-category-header > &,
.has-category-header > span > & {
padding-left: calc(#{awsui.$space-s} + #{awsui.$space-button-horizontal});
padding-inline-start: calc(#{awsui.$space-s} + #{awsui.$space-button-horizontal});
}
}

.icon {
padding-right: awsui.$space-xs;
padding-inline-end: awsui.$space-xs;
flex-shrink: 0;
}

.external-icon {
margin-left: awsui.$space-xxs;
margin-inline-start: awsui.$space-xxs;
}
Loading

0 comments on commit 8400936

Please sign in to comment.