chore: Migrate "A" components to logical properties (#1735)

.stylelintrc

@@ -51,9 +51,12 @@
   },
   "overrides": [
     {
-      "files": ["./src/button/*.scss"],
+      "files": [
+        "./src/a*/*.scss",
+        "./src/button/*.scss"
+      ],
       "rules": {
-        "property-disallowed-list": ["border", "border-radius", "border-style", "margin", "padding"],
+        "property-disallowed-list": ["border-radius", "border-style", "border-width", "margin", "padding"],
         "csstools/use-logical": "always"
       }
     }

src/alert/styles.scss

@@ -25,9 +25,13 @@
   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-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,
@@ -52,7 +56,7 @@
 
 .action {
   white-space: nowrap;
-  margin-left: awsui.$space-alert-action-left;
+  margin-inline-start: awsui.$space-alert-action-left;
 }
 
 .action-slot,
@@ -73,33 +77,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});
   }
 }
 
@@ -108,8 +115,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 {

src/anchor-navigation/styles.scss

@@ -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;
   }
 }
 
@@ -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;
     }
   }
 }
@@ -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;

src/annotation-context/annotation/arrow.scss

@@ -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%;
     }
@@ -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;
     }
   }

src/annotation-context/annotation/styles.scss

@@ -22,7 +22,7 @@
 
 .description {
   overflow: hidden;
-  margin-top: awsui.$space-xxs;
+  margin-block-start: awsui.$space-xxs;
 }
 
 .actionBar {
@@ -33,24 +33,25 @@
 }
 
 .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;
+  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;

src/app-layout/constants.scss

@@ -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;
 

src/app-layout/content-wrapper/styles.scss

@@ -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;
     }
   }
 }

src/app-layout/drawer/styles.scss

@@ -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 {
@@ -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;
     }
@@ -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;
@@ -62,7 +60,7 @@ $drawer-z-index-mobile: 1001;
   }
   > .drawer-resize-content {
     overflow: auto;
-    height: 100%;
+    block-size: 100%;
     position: relative;
   }
 }
@@ -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;