commit f38dee218c342995e77f85a29cfd18a4949632ce parent 8350077f3d20bf4647728af5935f5b9303c0b948 Author: Maxx Crawford <mcrawford@mozilla.com> Date: Tue, 9 Dec 2025 18:50:34 +0000 Bug 2001446 - Add stylelint rule to enforce logical properties r=frontend-codestyle-reviewers,nbarrett,home-newtab-reviewers Differential Revision: https://phabricator.services.mozilla.com/D273499 Diffstat:
7 files changed, 37 insertions(+), 29 deletions(-)
diff --git a/.stylelintrc.js b/.stylelintrc.js @@ -391,6 +391,14 @@ module.exports = { "Avoid literal values. Use variables (e.g. var(--font-size-small)) or inherit/unset/etc.", }, ], + "csstools/use-logical": [ + "always", + { + // Bug 2003301: Do not enforce logical properties for any height/width properties + except: [/^(min-|max-)?width/i, /^(min-|max-)?height/i], + severity: "error", + }, + ], }, }, { diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss @@ -109,7 +109,7 @@ .ds-image.img { width: 100%; height: 100%; - padding-top: 0; + padding-block-start: 0; min-width: 100%; } @@ -321,7 +321,7 @@ } .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } } } @@ -422,7 +422,7 @@ } .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss @@ -584,8 +584,8 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%); @include newtab-card-style; .img-wrapper .ds-image img { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-end-start-radius: 0; + border-end-end-radius: 0; } &:hover .img-wrapper .ds-image img { @@ -612,7 +612,7 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%); .card-stp-button-position-wrapper { z-index: 10; - bottom: 0; + inset-block-end: 0; position: absolute; } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PromoCard/_PromoCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PromoCard/_PromoCard.scss @@ -35,7 +35,7 @@ .promo-card-dismiss-button { position: absolute; - top: var(--space-small); + inset-block-start: var(--space-small); inset-inline-end: var(--space-small); margin: 0; } diff --git a/browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss b/browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss @@ -541,7 +541,7 @@ $calculated-max-width-twice-widest: $break-point-widest + 2 * $card-width; &:not(:placeholder-shown) { direction: ltr; - text-align: right; + text-align: end; } } } diff --git a/browser/extensions/newtab/content-src/components/Widgets/Lists/_Lists.scss b/browser/extensions/newtab/content-src/components/Widgets/Lists/_Lists.scss @@ -23,8 +23,8 @@ .confetti-canvas { position: absolute; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; width: 100%; height: 100%; pointer-events: none; diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -1163,7 +1163,7 @@ main section { } .topsite-form .form-wrapper .url input:dir(rtl):not(:placeholder-shown) { direction: ltr; - text-align: right; + text-align: end; } .topsite-form .form-wrapper .enable-custom-image-input { display: inline-block; @@ -4482,8 +4482,8 @@ dialog:dir(rtl)::after { } .lists .confetti-canvas { position: absolute; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; width: 100%; height: 100%; pointer-events: none; @@ -5421,7 +5421,7 @@ dialog:dir(rtl)::after { .ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img { width: 100%; height: 100%; - padding-top: 0; + padding-block-start: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img img { @@ -5572,7 +5572,7 @@ dialog:dir(rtl)::after { -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-1-medium .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-1-large { grid-row: span 2; @@ -5651,7 +5651,7 @@ dialog:dir(rtl)::after { font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; @@ -5802,7 +5802,7 @@ dialog:dir(rtl)::after { .ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img { width: 100%; height: 100%; - padding-top: 0; + padding-block-start: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img img { @@ -5953,7 +5953,7 @@ dialog:dir(rtl)::after { -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-2-medium .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-2-large { grid-row: span 2; @@ -6032,7 +6032,7 @@ dialog:dir(rtl)::after { font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; @@ -6192,7 +6192,7 @@ dialog:dir(rtl)::after { .ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img { width: 100%; height: 100%; - padding-top: 0; + padding-block-start: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img img { @@ -6343,7 +6343,7 @@ dialog:dir(rtl)::after { -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-3-medium .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-3-large { grid-row: span 2; @@ -6422,7 +6422,7 @@ dialog:dir(rtl)::after { font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; @@ -6581,7 +6581,7 @@ dialog:dir(rtl)::after { .ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img { width: 100%; height: 100%; - padding-top: 0; + padding-block-start: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img img { @@ -6732,7 +6732,7 @@ dialog:dir(rtl)::after { -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-4-medium .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-4-large { grid-row: span 2; @@ -6811,7 +6811,7 @@ dialog:dir(rtl)::after { font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; @@ -7681,8 +7681,8 @@ dialog:dir(rtl)::after { } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-end-start-radius: 0; + border-end-end-radius: 0; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover .img-wrapper .ds-image img, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover .img-wrapper .ds-image img { @@ -7708,7 +7708,7 @@ dialog:dir(rtl)::after { .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper { z-index: 10; - bottom: 0; + inset-block-end: 0; position: absolute; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper .context-menu-position-container, @@ -8957,7 +8957,7 @@ dialog:dir(rtl)::after { } .promo-card-wrapper .promo-card-dismiss-button { position: absolute; - top: var(--space-small); + inset-block-start: var(--space-small); inset-inline-end: var(--space-small); margin: 0; }