Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: Migrate "A/B/C/D/E/F" components to logical properties #1851

Merged
merged 18 commits into from
Feb 12, 2024
Merged

chore: Migrate "A/B/C/D/E/F" components to logical properties #1851

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
979ca7f
Initial commit of migrated changes from revert.
DaemonCahill Jan 2, 2024
07e1666
Update stylelint.
DaemonCahill Jan 2, 2024
a54ef33
Revert unintended cards change.
DaemonCahill Jan 2, 2024
6e93a04
Revert card styles.
DaemonCahill Jan 2, 2024
9c18f05
Miscellaneous fixes.
DaemonCahill Jan 2, 2024
e5bd638
Resolve build errors.
DaemonCahill Jan 2, 2024
10f10da
Resolve build issues.
DaemonCahill Jan 2, 2024
2aa88e7
Fix screenshot bugs.
DaemonCahill Jan 2, 2024
854bd5e
Fix border issue.
DaemonCahill Jan 2, 2024
115e21b
Fixed app layout border issue.
DaemonCahill Jan 3, 2024
37356de
Fixed container bug.
DaemonCahill Jan 3, 2024
9b0a11b
Resolved build errors.
DaemonCahill Jan 26, 2024
5551f69
Fix build issues.
DaemonCahill Feb 6, 2024
e5747c7
Incorporate PR feedback.
DaemonCahill Feb 6, 2024
dcc8383
Update stylelint.
DaemonCahill Feb 11, 2024
0bbbde9
Resolve screenshot errors.
DaemonCahill Feb 11, 2024
c3285cd
Fix screenshot errors.
DaemonCahill Feb 11, 2024
6fcdc00
Remove outdated comment.
DaemonCahill Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 1 addition & 21 deletions .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,27 +52,7 @@
"overrides": [
{
"files": [
"./src/button/*.scss",
"./src/g*/**/*.scss",
"./src/h*/**/*.scss",
"./src/i*/**/*.scss",
"./src/j*/**/*.scss",
"./src/k*/**/*.scss",
"./src/l*/**/*.scss",
"./src/m*/**/*.scss",
"./src/n*/**/*.scss",
"./src/o*/**/*.scss",
"./src/p*/**/*.scss",
"./src/q*/**/*.scss",
"./src/r*/**/*.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"
"./src/**/*.scss"
],
"rules": {
"property-disallowed-list": ["border", "border-radius", "border-style", "margin", "padding"],
Expand Down
38 changes: 23 additions & 15 deletions src/alert/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,14 @@
position: relative;
display: grid;
grid-template-columns: 1fr;
border-radius: awsui.$border-radius-alert;
border: awsui.$border-field-width solid;
padding: awsui.$space-alert-vertical awsui.$space-alert-horizontal;
border-block: awsui.$border-field-width solid;
border-inline: awsui.$border-field-width solid;
border-start-start-radius: awsui.$border-radius-alert;
border-start-end-radius: awsui.$border-radius-alert;
border-end-start-radius: awsui.$border-radius-alert;
border-end-end-radius: awsui.$border-radius-alert;
padding-block: awsui.$space-alert-vertical;
padding-inline: awsui.$space-alert-horizontal;
background-color: awsui.$color-background-container-content;

&.with-dismiss,
Expand All @@ -52,7 +57,7 @@

.action {
white-space: nowrap;
margin-left: awsui.$space-alert-action-left;
margin-inline-start: awsui.$space-alert-action-left;
}

.action-slot,
Expand All @@ -73,33 +78,36 @@
}

.text {
min-width: 0;
padding: awsui.$border-field-width 0; // To account for vertical misalignment due to button borders
margin: awsui.$space-scaled-xxs awsui.$space-xxs;
min-inline-size: 0;
// To account for vertical misalignment due to button borders
padding-block: awsui.$border-field-width;
padding-inline: 0;
margin-block: awsui.$space-scaled-xxs;
margin-inline: awsui.$space-xxs;
&.icon {
margin-left: 0;
margin-inline-start: 0;
}
&.message {
margin-right: awsui.$space-alert-message-right;
margin-inline-end: awsui.$space-alert-message-right;
}
}

.breakpoint-default {
// Below the breakpoint, arrange actions below the content
> .action {
grid-row: 2;
margin-bottom: awsui.$space-xxs;
margin-block-end: awsui.$space-xxs;
}

// Indent actions according to the size of the alert icon
&.icon-size-medium > .action {
margin-left: calc(#{awsui.$size-icon-medium} + #{awsui.$space-xs});
margin-inline-start: calc(#{awsui.$size-icon-medium} + #{awsui.$space-xs});
}
&.icon-size-big > .action {
margin-left: calc(#{awsui.$size-icon-big} + #{awsui.$space-xs});
margin-inline-start: calc(#{awsui.$size-icon-big} + #{awsui.$space-xs});
}
&.icon-size-normal > .action {
margin-left: calc(#{awsui.$size-icon-normal} + #{awsui.$space-xs});
margin-inline-start: calc(#{awsui.$size-icon-normal} + #{awsui.$space-xs});
}
}

Expand All @@ -108,8 +116,8 @@
}

.dismiss {
margin-right: calc(-1 * #{awsui.$space-xxs});
margin-left: awsui.$space-s;
margin-inline-end: calc(-1 * #{awsui.$space-xxs});
margin-inline-start: awsui.$space-s;
}

.dismiss-button {
Expand Down
33 changes: 21 additions & 12 deletions src/anchor-navigation/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,25 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element

.anchor-list {
list-style: none;
margin: 0;
padding: 0;
margin-block: 0;
margin-inline: 0;
padding-block: 0;
padding-inline: 0;
position: relative;
text-indent: 0;

&::before {
content: '';
background-color: awsui.$color-border-divider-default;
border-radius: awsui.$border-radius-tabs-focus-ring;
bottom: $guide-line-offset;
border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
inset-block-end: $guide-line-offset;
pointer-events: none;
position: absolute;
top: $guide-line-offset;
width: $guide-line-width;
inset-block-start: $guide-line-offset;
inline-size: $guide-line-width;
}
}

Expand All @@ -42,20 +47,24 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element

color: awsui.$color-text-body-secondary;
font-weight: styles.$font-weight-normal;
margin: awsui.$space-scaled-xxs 0;
margin-block: awsui.$space-scaled-xxs;
margin-inline: 0;

&--active {
position: relative;

&::before {
content: '';
background-color: awsui.$color-text-accent;
border-radius: awsui.$border-radius-tabs-focus-ring;
bottom: $guide-line-offset;
border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
inset-block-end: $guide-line-offset;
pointer-events: none;
position: absolute;
top: $guide-line-offset;
width: $guide-line-width;
inset-block-start: $guide-line-offset;
inline-size: $guide-line-width;
}
}
}
Expand Down Expand Up @@ -104,7 +113,7 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
}

.anchor-link-info {
margin-left: awsui.$space-xs;
margin-inline-start: awsui.$space-xs;
@include styles.font-body-s;
@include styles.font-smoothing;
font-weight: awsui.$font-button-weight;
Expand Down
35 changes: 20 additions & 15 deletions src/annotation-context/annotation/arrow.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,31 +26,33 @@
$arrow-width: 2 * styles.$base-size;
$arrow-height: $arrow-width * 0.5;

width: $arrow-width;
height: $arrow-height;
inline-size: $arrow-width;
block-size: $arrow-height;

&-outer,
&-inner {
position: absolute;
overflow: hidden;
width: $arrow-width;
height: $arrow-height;
inline-size: $arrow-width;
block-size: $arrow-height;

top: 0;
left: 0;
inset-block-start: 0;
inset-inline-start: 0;

&::after {
content: '';
box-sizing: border-box;
display: inline-block;
position: absolute;
border-radius: 2px 0 0 0;

bottom: 0;
left: 0;

width: $arrow-edge-length;
height: $arrow-edge-length;
border-start-start-radius: 2px;
border-start-end-radius: 0;
border-end-start-radius: 0;
border-end-end-radius: 0;
inset-block-end: 0;
inset-inline-start: 0;

inline-size: $arrow-edge-length;
block-size: $arrow-edge-length;
transform: rotate(45deg);
transform-origin: 0 100%;
}
Expand All @@ -63,10 +65,13 @@
}

&-inner {
top: 2px;
inset-block-start: 2px;

&::after {
border-radius: 1px 0 0 0;
border-start-start-radius: 1px;
border-start-end-radius: 0;
border-end-start-radius: 0;
border-end-end-radius: 0;
background-color: awsui.$color-background-status-info;
}
}
Expand Down
16 changes: 9 additions & 7 deletions src/annotation-context/annotation/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

.description {
overflow: hidden;
margin-top: awsui.$space-xxs;
margin-block-start: awsui.$space-xxs;
}

.actionBar {
Expand All @@ -33,24 +33,26 @@
}

.stepCounter {
margin-right: 2 * styles.$base-size;
margin-inline-end: 2 * styles.$base-size;
}

.divider {
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;
}

.hotspot {
@include styles.styles-reset;
background: transparent;
border: none;
padding: 0;
border-block: none;
border-inline: none;
padding-block: 0;
padding-inline: 0;
cursor: pointer;
scroll-margin: var(#{custom-props.$contentScrollMargin}, 40px 0 0 0);

// These dimensions match the dimensions of the contained SVG icon.
width: 16px;
height: 16px;
inline-size: 16px;
block-size: 16px;

&:focus {
outline: none;
Expand Down
5 changes: 2 additions & 3 deletions src/app-layout/constants.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,8 @@

// Toggle should have 40px width, whereas button is 26px wide.
// 40 - 26 = 14px in total or 7px on each side
$_toggle-padding-horizontal: 0.7 * styles.$base-size;
$_toggle-padding-vertical: awsui.$space-xxs;
$toggle-padding: $_toggle-padding-vertical $_toggle-padding-horizontal;
$toggle-padding-horizontal: 0.7 * styles.$base-size;
$toggle-padding-vertical: awsui.$space-xxs;

$sidebar-size-closed: 4 * styles.$base-size;

Expand Down
14 changes: 7 additions & 7 deletions src/app-layout/content-wrapper/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,20 @@
@use '../constants' as constants;

.content-wrapper {
padding-left: awsui.$space-layout-content-horizontal;
padding-right: awsui.$space-layout-content-horizontal;
padding-inline-start: awsui.$space-layout-content-horizontal;
padding-inline-end: awsui.$space-layout-content-horizontal;
&-mobile {
padding-left: awsui.$space-l;
padding-right: awsui.$space-l;
padding-inline-start: awsui.$space-l;
padding-inline-end: awsui.$space-l;
}
}

.content-type-dashboard {
margin-left: auto;
margin-right: auto;
margin-inline-start: auto;
margin-inline-end: auto;
@each $breakpoint, $width in constants.$dashboard-content-widths {
@include styles.media-breakpoint-up($breakpoint) {
max-width: $width;
max-inline-size: $width;
}
}
}
19 changes: 9 additions & 10 deletions src/app-layout/drawer/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ $drawer-z-index-mobile: 1001;

.toggle {
box-sizing: border-box;
padding: constants.$toggle-padding;
padding-block: constants.$toggle-padding-vertical;
padding-inline: constants.$toggle-padding-horizontal;
}

.drawer-triggers {
Expand All @@ -30,7 +31,7 @@ $drawer-z-index-mobile: 1001;
z-index: $drawer-z-index;
}
&-closed {
min-width: constants.$sidebar-size-closed;
min-inline-size: constants.$sidebar-size-closed;
&.drawer-mobile {
display: none;
}
Expand All @@ -42,13 +43,10 @@ $drawer-z-index-mobile: 1001;
background-color: awsui.$color-background-layout-panel-content;
.drawer-mobile > & {
z-index: $drawer-z-index-mobile;
top: 0;
bottom: 0;
left: 0;
right: 0;
inset: 0;
}
.drawer-closed > & {
width: constants.$sidebar-size-closed;
inline-size: constants.$sidebar-size-closed;
&.drawer-content-clickable {
cursor: pointer;
color: awsui.$color-text-interactive-default;
Expand All @@ -62,7 +60,7 @@ $drawer-z-index-mobile: 1001;
}
> .drawer-resize-content {
overflow: auto;
height: 100%;
block-size: 100%;
position: relative;
}
}
Expand All @@ -75,11 +73,12 @@ $drawer-z-index-mobile: 1001;
}

.drawer-trigger {
padding: constants.$toggle-padding;
padding-block: constants.$toggle-padding-vertical;
padding-inline: constants.$toggle-padding-horizontal;
cursor: pointer;
color: awsui.$color-text-interactive-default;
&:not(:first-child) {
border-top: 1px solid awsui.$color-border-layout;
border-block-start: 1px solid awsui.$color-border-layout;
}
&:hover {
color: awsui.$color-text-layout-toggle-hover;
Expand Down
Loading
Loading