Convert remaining components to CSS logical properties (#1084)

CHANGELOG.md

@@ -10,8 +10,9 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
 
 ### CSS Logical Properties
 
-* Continued migrating physical directional properties to their logical equivalents (see #1084) -- `templates/_card-layout.scss`, `templates/_main-with-sidebar.scss`, `_footer.scss`, `_navigation.scss`, `_menu.scss`, `_menu-item.scss`, `_menu-list.scss`, and `_sidebar-menu.scss`. 59 `bidi()` calls removed.
-* Where a property has no logical equivalent safe across the supported matrix (`background-position`, and a CSS `transform` that visually flips a directional glyph), kept the physical value with an explicit `[dir='rtl']` override instead.
+* RTL support now relies on CSS logical properties.
+* Where a property has no supported logical equivalent (e.g. `background-position`), RTL support is with an explicit `[dir='rtl']` override instead.
+* **Deprecated** `@mixin bidi()` The mixin is still exported and available for your use, but you are encouraged to phase it out.
 
 ### Browser Support
 
@@ -61,10 +62,6 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
 * (breaking) Standardized interactive component states on `:focus-visible` instead of `:focus`.
 * (breaking) Click/pick form elements now use :focus-visible but input/typing fields keep :focus.
 
-### CSS Logical Properties
-
-* Started migrating physical directional properties to their logical equivalents 
-
 ## Component changes
 
 ### Feature Card

assets/sass/protocol/components/_breadcrumb.scss

@@ -28,9 +28,13 @@
 
         + .mzp-c-breadcrumb-item {
             &::before {
+                content: '\2192';
                 font-weight: normal;
                 margin: 0 0.25em;
-                @include bidi(((content, '\2192', '\2190'),));
+
+                [dir='rtl'] & {
+                    content: '\2190';
+                }
             }
         }
 

assets/sass/protocol/components/_button.scss

@@ -240,9 +240,9 @@
 }
 
 .mzp-c-button-icon-start {
-    @include bidi(((margin-right, 0.5ch, 0), (margin-left, 0, 0.5ch),));
+    margin-inline: 0 0.5ch;
 }
 
 .mzp-c-button-icon-end {
-    @include bidi(((margin-left, 0.5ch, 0), (margin-right, 0, 0.5ch),));
+    margin-inline: 0.5ch 0;
 }

assets/sass/protocol/components/_card.scss

@@ -54,13 +54,15 @@
 
     &.mzp-has-video .mzp-c-card-tag,
     &.mzp-has-audio .mzp-c-card-tag {
+        background-position: center left;
         background-repeat: no-repeat;
         line-height: 1.8;
         min-height: 25px;
-        @include bidi((
-            (background-position, center left, center right),
-            (padding-left, $spacing-xl, padding-right, 0),
-        ));
+        padding-inline-start: $spacing-xl;
+
+        [dir='rtl'] & {
+            background-position: center right;
+        }
     }
 
     &.mzp-has-video .mzp-c-card-tag {

assets/sass/protocol/components/_inline-list.scss

@@ -5,12 +5,14 @@
 @use '../includes/lib' as *;
 
 .mzp-c-inline-list {
-    margin: $layout-md 0 0 ($layout-md * -1);
+    margin-top: $layout-md;
+    margin-bottom: 0;
+    margin-inline: ($layout-md * -1) 0;
 
     li {
         display: inline-block;
         margin-bottom: $layout-xs;
-        margin-left: $layout-md; // this technique works for RTL without needing bidi styles
+        margin-inline-start: $layout-md;
         white-space: nowrap;
 
         &:last-child {

assets/sass/protocol/components/_language-switcher.scss

@@ -12,7 +12,8 @@
     .mzp-c-language-switcher-link {
         display: inline-block;
         font-size: var(--theme-body-font-size-sm); // just want smaller text size, so don't use full mixin
-        @include bidi(((margin, 0 $spacing-lg $spacing-sm 0, 0 0 $spacing-sm $spacing-lg),));
+        margin-block: 0 $spacing-sm;
+        margin-inline-end: $spacing-lg;
     }
 
     // hide the <label> visually should a language link be shown instead.

assets/sass/protocol/components/_modal.scss

@@ -57,7 +57,7 @@ html.mzp-is-noscroll {
     position: relative;
 
     & > header {
-        @include bidi(((padding-right, $spacing-xl * 2, padding-left, 0),));
+        padding-inline-end: $spacing-xl * 2;
 
         h2 {
             @include text-heading-xs;
@@ -75,7 +75,7 @@ html.mzp-is-noscroll {
     position: absolute;
     top: 9px;
     z-index: 99;
-    @include bidi(((right, $spacing-sm, left, auto),));
+    inset-inline-end: $spacing-sm;
 
     .mzp-c-modal-button-close {
         @include image-replaced;

assets/sass/protocol/components/_notification-bar.scss

@@ -87,11 +87,11 @@
 
         @media #{$mq-sm} {
             background-color: $color-marketing-gray-40;
+            border-radius: 0 $border-radius-sm $border-radius-sm 0;
             padding: 0;
             margin: 0;
             height: 100%;
             width: 40px;
-            border-radius: 0 $border-radius-sm $border-radius-sm 0;
 
             &:hover,
             &:focus-visible {

assets/sass/protocol/components/_picto.scss

@@ -37,10 +37,7 @@
     .mzp-t-picto-side {
         .mzp-c-picto {
             position: relative;
-            @include bidi((
-                (padding-left, $layout-xl, 0),
-                (padding-right, 0, $layout-xl),
-            ));
+            padding-inline-start: $layout-xl;
         }
 
         .mzp-c-picto-image {
@@ -49,10 +46,7 @@
             position: absolute;
             text-align: center;
             width: $layout-lg;
-            @include bidi((
-                (left, 0, auto),
-                (right, auto, 0),
-            ));
+            inset-inline-start: 0;
         }
     }
 }

assets/sass/protocol/components/_section-heading.scss

@@ -16,16 +16,14 @@
 
     // rely on l-content for padding if nested
     .mzp-l-content & {
-        padding-left: 0;
-        padding-right: 0;
+        padding-inline: 0;
 
         &:first-child {
             padding-top: 0;
         }
     }
 
     &.mzp-t-section-heading-nospace {
-        padding-top: 0;
-        padding-bottom: 0;
+        padding-block: 0;
     }
 }

assets/sass/protocol/components/_split.scss

@@ -78,8 +78,7 @@
         .mzp-c-split-media,
         .mzp-c-split-media-asset {
             text-align: center;
-            margin-left: auto;
-            margin-right: auto;
+            margin-inline: auto;
         }
     }
 

assets/sass/protocol/components/_sticky-promo.scss

@@ -39,17 +39,18 @@ $logos: (
     z-index: 10;
     animation: 600ms ease 300ms both;
     opacity: 0;
-    @include bidi((
-        (right, $spacing-md, auto),
-        (left, auto, $spacing-md),
-    ));
+    inset-inline-end: $spacing-md;
 
     &.mzp-js-show-on-load {
         animation-delay: 1000ms;
     }
 
     &.mzp-a-slide-in {
-        @include bidi(((animation-name, mzp-a-slide-in-right, mzp-a-slide-in-left),));
+        animation-name: mzp-a-slide-in-right; /* stylelint-disable-line no-unknown-animations */
+
+        [dir='rtl'] & {
+            animation-name: mzp-a-slide-in-left; /* stylelint-disable-line no-unknown-animations */
+        }
     }
 
     &.mzp-a-fade-out {
@@ -81,7 +82,10 @@ $logos: (
             background-position: top left;
             background-repeat: no-repeat;
             padding: (40px + $spacing-lg) 0 0;
-            @include bidi(((background-position, top left, top right),));
+
+            [dir='rtl'] & {
+                background-position: top right;
+            }
         }
     }
 }
@@ -97,15 +101,16 @@ $logos: (
     background-size: 20px 20px;
     border: none;
     height: 20px;
+    inset-inline-end: 0;
     margin: $spacing-sm;
     position: absolute;
-    right: 0;
     top: 0;
     width: 20px;
-    @include bidi((
-        (right, 0, auto),
-        (left, auto, 0),
-    ));
+
+    // need to do this manually because @include image-replaced; declares a direction
+    [dir='rtl'] & {
+        inset-inline: 0 auto;
+    }
 
     &:hover,
     &:focus-visible {

assets/sass/protocol/components/forms/_button-container.scss

@@ -47,8 +47,8 @@
         }
 
         .mzp-c-button + .mzp-c-button {
+            margin-inline-start: forms.$field-h-spacing;
             margin-top: 0;
-            @include bidi(((margin-left, forms.$field-h-spacing, margin-right, 0),));
         }
 
         // align end

assets/sass/protocol/components/forms/_choice.scss

@@ -34,7 +34,7 @@
     }
 
     .mzp-c-choices.mzp-l-choices-inline & {
-        @include bidi(((padding-right, forms.$field-h-spacing, padding-left, 0),));
+        padding-inline-end: forms.$field-h-spacing;
         display: inline-block;
         vertical-align: top;
     }
@@ -46,7 +46,7 @@
     padding-top: 3px;
     padding-bottom: 0;
     vertical-align: top;
-    @include bidi(((padding-left, forms.$choice-spacing, padding-right, 0),));
+    padding-inline-start: forms.$choice-spacing;
 
     .mzp-c-choices & {
         font-weight: normal;
@@ -66,7 +66,7 @@
         position: absolute;
         top: 0;
         z-index: 1;
-        @include bidi(((left, 0, right, auto),));
+        inset-inline-start: 0;
     }
 
     // IE8 and lower don't support some of this, but they also don't support media queries
@@ -97,7 +97,7 @@
             text-align: center;
             top: 0;
             width: forms.$choice-height;
-            @include bidi(((left, 0, right, auto),));
+            inset-inline-start: 0;
         }
 
         &[type='radio'] + label::before {
@@ -123,10 +123,12 @@
             transform: rotate(45deg);
             transform-origin: bottom right;
             width: 0.35rem;
-            @include bidi((
-                (left, 0.03rem, auto),
-                (right, auto, 0.83rem),
-            ));
+            inset-inline-start: 0.03rem;
+
+            // checkmark does not get mirrored for RTL languages, so unexpected value here
+            [dir='rtl'] & {
+                inset-inline-start: 0.83rem;
+            }
         }
 
         &[type='radio']:checked + label::before {
@@ -262,12 +264,12 @@
 
     .mzp-c-choice-label + & {
         padding-top: forms.$info-v-spacing;
-        @include bidi(((padding-left, forms.$choice-spacing, padding-right, 0),));
+        padding-inline-start: forms.$choice-spacing;
     }
 
     .mzp-c-choice + & {
         margin-top: forms.$label-v-spacing * -1;
-        @include bidi(((padding-left, forms.$choice-spacing, padding-right, 0),));
+        padding-inline-start: forms.$choice-spacing;
     }
 
     .mzp-c-choice-msg + & {

assets/sass/protocol/components/logos/_logo.scss

@@ -18,12 +18,16 @@ $logo-sizes: (
 
 .mzp-c-logo {
     @include image-replaced;
+    background-position: top left;
     background-repeat: no-repeat;
     background-size: contain;
     display: block;
     margin-bottom: $layout-sm;
     margin-top: 0;
-    @include bidi(((background-position, top left, top right),));
+
+    [dir='rtl'] & {
+        background-position: top right;
+    }
 
     &.mzp-t-logo-xs {
         height: $layout-xs;
@@ -55,19 +59,20 @@ $logo-sizes: (
 
     &.mzp-l-logo-center {
         background-position: center top;
-        margin-left: auto;
-        margin-right: auto;
+        margin-inline: auto;
     }
 
     &.mzp-l-logo-center-on-sm-md {
         background-position: center top;
-        margin-left: auto;
-        margin-right: auto;
+        margin-inline: auto;
 
         @media #{$mq-md} {
-            margin-left: 0;
-            margin-right: 0;
-            @include bidi(((background-position, top left, top right),));
+            background-position: top left;
+            margin-inline: 0;
+
+            [dir='rtl'] & {
+                background-position: top right;
+            }
         }
     }
 }