diff --git a/CHANGELOG.md b/CHANGELOG.md index f08dfd99..547c6e40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -101,12 +101,16 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust * `mzp-c-card-desc` → `mzp-c-card-body` * `mzp-c-menu-item-desc` → `mzp-c-menu-item-body` * `mzp-c-billboard-desc` → `mzp-c-billboard-body` +* (breaking) Renamed directional layout classes to use `start`/`end` instead of `left`/`right`, matching CSS logical properties. Affects Main with Sidebar and Article (#448): + * `mzp-l-sidebar-left` → `mzp-l-sidebar-start` + * `mzp-l-sidebar-right` → `mzp-l-sidebar-end` * Clean break, no aliases -- see the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for find/replace scripts ## Bug Fixes * **css:** at2x mixin doesn't support single keyword values (#751) +* **css:** Removed duplicate `mzp-a-slide-in-left` and `mzp-a-slide-in-right` `@keyframes` definitions (#448) ## Migration Tips diff --git a/assets/sass/protocol/base/includes/_animations.scss b/assets/sass/protocol/base/includes/_animations.scss index 655449e0..c22bf816 100644 --- a/assets/sass/protocol/base/includes/_animations.scss +++ b/assets/sass/protocol/base/includes/_animations.scss @@ -50,6 +50,8 @@ } } +// Keyframes can't read text direction, so these are written for LTR. Swap +// slide-in-right for slide-in-left under [dir='rtl'] (see sticky promo). @keyframes mzp-a-slide-in-right { 0% { opacity: 0; @@ -62,30 +64,6 @@ } } -@keyframes mzp-a-slide-in-right { - 0% { - opacity: 0; - transform: translateX(60px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -@keyframes mzp-a-slide-in-left { - 0% { - opacity: 0; - transform: translateX(-60px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - @keyframes mzp-a-slide-in-left { 0% { opacity: 0; diff --git a/assets/sass/protocol/components/_article.scss b/assets/sass/protocol/components/_article.scss index 7a91b265..852730cf 100644 --- a/assets/sass/protocol/components/_article.scss +++ b/assets/sass/protocol/components/_article.scss @@ -9,13 +9,13 @@ max-width: 100%; @media #{$mq-md} { - // Float left when sidebar is on the left - .mzp-l-sidebar-left .mzp-l-main & { + // Float start when sidebar is on the start side + .mzp-l-sidebar-start .mzp-l-main & { float: inline-start; } - // Float right when sidebar is on the right - .mzp-l-sidebar-right .mzp-l-main & { + // Float end when sidebar is on the end side + .mzp-l-sidebar-end .mzp-l-main & { float: inline-end; } } diff --git a/assets/sass/protocol/templates/_main-with-sidebar.scss b/assets/sass/protocol/templates/_main-with-sidebar.scss index bbaf02d7..7dc8c6d7 100644 --- a/assets/sass/protocol/templates/_main-with-sidebar.scss +++ b/assets/sass/protocol/templates/_main-with-sidebar.scss @@ -15,7 +15,7 @@ @include grid-third; } - &.mzp-l-sidebar-left { + &.mzp-l-sidebar-start { .mzp-l-main { float: inline-end; padding-inline-start: $spacing-md; @@ -27,7 +27,7 @@ } } - &.mzp-l-sidebar-right { + &.mzp-l-sidebar-end { .mzp-l-main { float: inline-start; padding-inline-end: $spacing-md; diff --git a/components/layout/04-main-with-sidebar/01-main-with-sidebar/main-with-sidebar.config.yml b/components/layout/04-main-with-sidebar/01-main-with-sidebar/main-with-sidebar.config.yml index ee20bbfd..65e0a5fb 100644 --- a/components/layout/04-main-with-sidebar/01-main-with-sidebar/main-with-sidebar.config.yml +++ b/components/layout/04-main-with-sidebar/01-main-with-sidebar/main-with-sidebar.config.yml @@ -1,11 +1,11 @@ preview: '@preview-unpadded' context: - layout: left + layout: start variants: - - name: Sidebar Right + - name: Sidebar End context: - layout: right + layout: end notes: | - This example uses `mzp-l-sidebar-right` layout class. The sidebar will appear on the left for right-to-left (RTL) languages. + This example uses `mzp-l-sidebar-end` layout class. The sidebar will appear on the right in left-to-right (LTR) languages and on the left in right-to-left (RTL) languages. Colored borders are for demonstration only. They are not part of the component styles. diff --git a/components/layout/04-main-with-sidebar/01-main-with-sidebar/main-with-sidebar.html b/components/layout/04-main-with-sidebar/01-main-with-sidebar/main-with-sidebar.html index 9fb2253e..7088c953 100644 --- a/components/layout/04-main-with-sidebar/01-main-with-sidebar/main-with-sidebar.html +++ b/components/layout/04-main-with-sidebar/01-main-with-sidebar/main-with-sidebar.html @@ -1,4 +1,4 @@ -
+
{% block content %}

Main content.

diff --git a/components/layout/04-main-with-sidebar/01-main-with-sidebar/readme.md b/components/layout/04-main-with-sidebar/01-main-with-sidebar/readme.md index aa163d18..1d7215cd 100644 --- a/components/layout/04-main-with-sidebar/01-main-with-sidebar/readme.md +++ b/components/layout/04-main-with-sidebar/01-main-with-sidebar/readme.md @@ -1,5 +1,5 @@ -A block with a main column and one sidebar on either the left or right (this -example uses `mzp-l-sidebar-left`). A single page should only have one main +A block with a main column and one sidebar on either the start or end side (this +example uses `mzp-l-sidebar-start`). A single page should only have one main section and one sidebar. The columns will stack in small viewports, form a 1/3-2/3 split in medium sized @@ -15,9 +15,9 @@ styles. ### Tips -- Layout class `mzp-l-sidebar-left` or `mzp-l-sidebar-right` is required. -- The layout is reversed in right to left (RTL) languages; e.g., a left sidebar - will appear on the right. +- Layout class `mzp-l-sidebar-start` or `mzp-l-sidebar-end` is required. +- Start and end follow the text direction: a start sidebar appears on the left + in left to right (LTR) languages and on the right in right to left (RTL) languages. - The main content can be wrapped in any valid HTML element. We’re using `main` in this example but it could also be an `article`, `section`, `div`, etc. - The sidebar should usually be an `aside` element but you could use other elements. diff --git a/docs/02-usage/migration.md b/docs/02-usage/migration.md index ef470e27..08c18962 100644 --- a/docs/02-usage/migration.md +++ b/docs/02-usage/migration.md @@ -67,6 +67,18 @@ Find: mzp-c-(callout|card|menu-item|billboard)-desc Replace: mzp-c-$1-body ``` +Rename directional layout names from `left`/`right` to `start`/`end`. Affects Main with Sidebar and Article. + +```text +Find: mzp-l-sidebar-left +Replace: mzp-l-sidebar-start +``` + +```text +Find: mzp-l-sidebar-right +Replace: mzp-l-sidebar-end +``` + ### CSS Variable Renames (SCSS files) Font family and line-height variables: @@ -272,6 +284,11 @@ find . -name "*.scss" -exec sed -i '' -E 's/mzp-c-(menu|menu-item|menu-list|card find . -name "*.html" -exec sed -i '' -E 's/mzp-c-(callout|card|menu-item|billboard)-desc/mzp-c-\1-body/g' {} + find . -name "*.njk" -exec sed -i '' -E 's/mzp-c-(callout|card|menu-item|billboard)-desc/mzp-c-\1-body/g' {} + find . -name "*.scss" -exec sed -i '' -E 's/mzp-c-(callout|card|menu-item|billboard)-desc/mzp-c-\1-body/g' {} + + +# Rename directional layout names to start/end +find . -name "*.html" -exec sed -i '' -e 's/mzp-l-sidebar-left/mzp-l-sidebar-start/g' -e 's/mzp-l-sidebar-right/mzp-l-sidebar-end/g' {} + +find . -name "*.njk" -exec sed -i '' -e 's/mzp-l-sidebar-left/mzp-l-sidebar-start/g' -e 's/mzp-l-sidebar-right/mzp-l-sidebar-end/g' {} + +find . -name "*.scss" -exec sed -i '' -e 's/mzp-l-sidebar-left/mzp-l-sidebar-start/g' -e 's/mzp-l-sidebar-right/mzp-l-sidebar-end/g' {} + ``` ### CSS Variable Renames diff --git a/docs/03-contributing/02-naming.md b/docs/03-contributing/02-naming.md index 38a19f31..dce30d8c 100644 --- a/docs/03-contributing/02-naming.md +++ b/docs/03-contributing/02-naming.md @@ -72,6 +72,30 @@ by `l-` and `u-`) which you should only use when necessary and practical. In most cases there will be an equivalent SCSS mixin that may be preferable to adding presentational classes in your markup. +### Direction and Alignment + +Use `start` and `end` (and `reverse`) rather than `left` and `right` when naming +direction or alignment, matching CSS logical properties. Start and end follow +the text direction, so a `start` sidebar is on the left in left-to-right +languages and on the right in right-to-left languages. + +Billboard is an exception: its `mzp-l-billboard-left` and `mzp-l-billboard-right` +layouts intentionally don't reverse in right-to-left languages, so they keep +physical names. + +Animation names are also an exception: `@keyframes` can't read text direction, +so slide-in animations like `mzp-a-slide-in-left` keep physical names and are +swapped under `[dir='rtl']` instead. + +```scss +// NO - Physical +.mzp-l-sidebar-left { ... } + +// YES - Logical +.mzp-l-sidebar-start { ... } +.mzp-l-split-reversed { ... } +``` + ### Sizes We use a “T-shirt” convention when we need to describe sizes, e.g. “lg” for large