Convert remaining components to CSS logical properties and remove bidi() (#1084)

CHANGELOG.md

@@ -11,7 +11,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.
+* Finished converting the remaining components -- `_button.scss`, `_language-switcher.scss`, `_breadcrumb.scss`, `_card.scss`, `_notification-bar.scss`, `_modal.scss`, `_sticky-promo.scss`, `_picto.scss`, `forms/_button-container.scss`, `forms/_choice.scss`, `logos/_wordmark.scss`, `logos/_logo.scss`, and `_inline-list.scss`.
+* (breaking) Removed the `@mixin bidi()` Sass mixin (`includes/mixins/_bidi.scss`) now that every internal use has been converted to logical properties or an explicit `[dir='rtl']` override. If your own Sass calls `@include bidi(...)`, see the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for how to convert it.
+* Where a property has no logical equivalent safe across the supported matrix (`background-position`, `content`, `animation-name`, and a CSS `transform` that visually flips a directional glyph), kept the physical value with an explicit `[dir='rtl']` override instead.
 
 ### Browser Support
 
@@ -63,7 +65,7 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
 
 ### CSS Logical Properties
 
-* Started migrating physical directional properties to their logical equivalents 
+* Migrate physical directional properties to their logical equivalents 
 
 ## Component changes
 

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

@@ -65,13 +65,18 @@
         background: url('#{$image-path}/icons/close.svg') center center/18px 18px no-repeat;
         border: 0;
         height: 20px;
-        inset-inline-end: 0;
         margin: $spacing-sm;
         padding: 0;
         position: absolute;
+        right: 0;
         top: 0;
         width: 20px;
 
+        [dir='rtl'] & {
+            right: auto;
+            left: 0;
+        }
+
         &:hover {
             cursor: pointer;
         }
@@ -87,11 +92,15 @@
 
         @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;
+
+            [dir='rtl'] & {
+                border-radius: $border-radius-sm 0 0 $border-radius-sm;
+            }
 
             &: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/_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;
+            }
         }
     }
 }
@@ -102,10 +106,11 @@ $logos: (
     right: 0;
     top: 0;
     width: 20px;
-    @include bidi((
-        (right, 0, auto),
-        (left, auto, 0),
-    ));
+
+    [dir='rtl'] & {
+        right: auto;
+        left: 0;
+    }
 
     &: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

@@ -22,7 +22,7 @@
 // wrapper around the label and control
 .mzp-c-choice {
     box-sizing: border-box;
-    clear: left;
+    clear: inline-start;
     margin-bottom: 0;
     margin-top: forms.$line-height-shim; // other labels have a bit of line height, mock that here for better vertical spacing
     min-height: forms.$choice-height;
@@ -34,8 +34,8 @@
     }
 
     .mzp-c-choices.mzp-l-choices-inline & {
-        @include bidi(((padding-right, forms.$field-h-spacing, padding-left, 0),));
         display: inline-block;
+        padding-inline-end: forms.$field-h-spacing;
         vertical-align: top;
     }
 }
@@ -45,8 +45,8 @@
     margin-bottom: 0;
     padding-top: 3px;
     padding-bottom: 0;
+    padding-inline-start: forms.$choice-spacing;
     vertical-align: top;
-    @include bidi(((padding-left, forms.$choice-spacing, padding-right, 0),));
 
     .mzp-c-choices & {
         font-weight: normal;
@@ -63,10 +63,10 @@
     &[type='checkbox'],
     &[type='radio'] {
         box-sizing: border-box;
+        inset-inline-start: 0;
         position: absolute;
         top: 0;
         z-index: 1;
-        @include bidi(((left, 0, right, auto),));
     }
 
     // IE8 and lower don't support some of this, but they also don't support media queries
@@ -93,11 +93,11 @@
             cursor: pointer;
             display: block;
             height: forms.$choice-height;
+            inset-inline-start: 0;
             position: absolute;
             text-align: center;
             top: 0;
             width: forms.$choice-height;
-            @include bidi(((left, 0, right, auto),));
         }
 
         &[type='radio'] + label::before {
@@ -118,15 +118,17 @@
             content: '';
             display: block;
             height: 0.75rem;
+            left: 0.03rem;
             position: absolute;
             top: 0.19rem;
             transform: rotate(45deg);
             transform-origin: bottom right;
             width: 0.35rem;
-            @include bidi((
-                (left, 0.03rem, auto),
-                (right, auto, 0.83rem),
-            ));
+
+            [dir='rtl'] & {
+                left: auto;
+                right: 0.83rem;
+            }
         }
 
         &[type='radio']:checked + label::before {
@@ -261,13 +263,13 @@
     }
 
     .mzp-c-choice-label + & {
+        padding-inline-start: forms.$choice-spacing;
         padding-top: forms.$info-v-spacing;
-        @include bidi(((padding-left, forms.$choice-spacing, padding-right, 0),));
     }
 
     .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;
@@ -65,9 +69,13 @@ $logo-sizes: (
         margin-right: auto;
 
         @media #{$mq-md} {
+            background-position: top left;
             margin-left: 0;
             margin-right: 0;
-            @include bidi(((background-position, top left, top right),));
+
+            [dir='rtl'] & {
+                background-position: top right;
+            }
         }
     }
 }

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

@@ -15,13 +15,17 @@ $logo-sizes: (
 
 .mzp-c-wordmark {
     @include image-replaced;
+    background-position: top left;
     background-size: contain;
     background-repeat: no-repeat;
     display: block;
     margin-bottom: $layout-sm;
     margin-top: 0;
     max-width: 100%;
-    @include bidi(((background-position, top left, top right),));
+
+    [dir='rtl'] & {
+        background-position: top right;
+    }
 
     &.mzp-t-wordmark-xs {
         height: $layout-xs;
@@ -63,9 +67,13 @@ $logo-sizes: (
         margin-right: auto;
 
         @media #{$mq-md} {
+            background-position: top left;
             margin-left: 0;
             margin-right: 0;
-            @include bidi(((background-position, top left, top right),));
+
+            [dir='rtl'] & {
+                background-position: top right;
+            }
         }
     }
 }