From 77c9adbd7a79a8490614736f8941be2bdde53b7b Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Mon, 15 Sep 2025 15:23:15 +0100 Subject: [PATCH 1/6] feat(baseline): add discouraged banner --- .../icons/browser-check-obsolete.svg | 4 + .../icons/browser-cross-obsolete.svg | 4 + .../icons/status/obsolete-dark.svg | 17 ++++ .../icons/status/obsolete.svg | 17 ++++ components/baseline-indicator/server.css | 16 +++- components/baseline-indicator/server.js | 91 ++++++++++--------- 6 files changed, 106 insertions(+), 43 deletions(-) create mode 100644 components/baseline-indicator/icons/browser-check-obsolete.svg create mode 100644 components/baseline-indicator/icons/browser-cross-obsolete.svg create mode 100644 components/baseline-indicator/icons/status/obsolete-dark.svg create mode 100644 components/baseline-indicator/icons/status/obsolete.svg diff --git a/components/baseline-indicator/icons/browser-check-obsolete.svg b/components/baseline-indicator/icons/browser-check-obsolete.svg new file mode 100644 index 000000000..250030ea2 --- /dev/null +++ b/components/baseline-indicator/icons/browser-check-obsolete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/components/baseline-indicator/icons/browser-cross-obsolete.svg b/components/baseline-indicator/icons/browser-cross-obsolete.svg new file mode 100644 index 000000000..48cb4decc --- /dev/null +++ b/components/baseline-indicator/icons/browser-cross-obsolete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/components/baseline-indicator/icons/status/obsolete-dark.svg b/components/baseline-indicator/icons/status/obsolete-dark.svg new file mode 100644 index 000000000..bd7d0cab7 --- /dev/null +++ b/components/baseline-indicator/icons/status/obsolete-dark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/components/baseline-indicator/icons/status/obsolete.svg b/components/baseline-indicator/icons/status/obsolete.svg new file mode 100644 index 000000000..13734bc4b --- /dev/null +++ b/components/baseline-indicator/icons/status/obsolete.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/components/baseline-indicator/server.css b/components/baseline-indicator/server.css index b92475065..0520868c9 100644 --- a/components/baseline-indicator/server.css +++ b/components/baseline-indicator/server.css @@ -7,7 +7,9 @@ @mixin light-dark --baseline-img, url("./icons/status/limited.svg"), url("./icons/status/limited-dark.svg"); --baseline-check: #1e8e3e; + --baseline-check-img: url("./icons/browser-check.svg"); --baseline-cross: #ea8600; + --baseline-cross-img: url("./icons/browser-cross.svg"); --feedback-link-icon: var(--icon-primary, light-dark(#696969, #ffffff)); padding-left: 3.8125rem; @@ -36,6 +38,16 @@ --baseline-pill-color: #f1f3f4; } + &.discouraged { + --baseline-check: light-dark(#707070, #868686); + --baseline-check-img: url("./icons/browser-check-obsolete.svg"); + --baseline-cross: light-dark(#707070, #868686); + --baseline-cross-img: url("./icons/browser-cross-obsolete.svg"); + + @mixin light-dark --baseline-img, url("./icons/status/obsolete.svg"), + url("./icons/status/obsolete-dark.svg"); + } + &[open] { summary .icon-chevron { transform: rotate(180deg); @@ -177,14 +189,14 @@ background-color: var(--baseline-cross); - mask-image: url("./icons/browser-cross.svg"); + mask-image: var(--baseline-cross-img); mask-repeat: no-repeat; mask-size: contain; } &.supported::after { background-color: var(--baseline-check); - mask-image: url("./icons/browser-check.svg"); + mask-image: var(--baseline-check-img); } } } diff --git a/components/baseline-indicator/server.js b/components/baseline-indicator/server.js index b07d15020..7381e8046 100644 --- a/components/baseline-indicator/server.js +++ b/components/baseline-indicator/server.js @@ -71,7 +71,9 @@ export class BaselineIndicator extends ServerComponent { ? new Date(status.baseline_low_date.slice(low_date_range ? 1 : 0)) : undefined; - const level = status.baseline || "not"; + const level = status.feature.discouraged + ? "discouraged" + : status.baseline || "not"; const feedbackLink = `${SURVEY_URL}?page=${encodeURIComponent(context.url)}&level=${level}`; @@ -126,29 +128,34 @@ export class BaselineIndicator extends ServerComponent { return html`
- ${level === "not" - ? html`${context.l10n`Limited availability`}` - : html` - ${context.l10n`Baseline`} - - ${level === "high" - ? context.l10n`Widely available` - : low_date?.getFullYear()} - - ${status.asterisk && " *"} - `} + ${level === "discouraged" + ? html`${context.l10n`Deprecated`}` + : level === "not" + ? html`${context.l10n`Limited availability`}` + : html` + ${context.l10n`Baseline`} + + ${level === "high" + ? context.l10n`Widely available` + : low_date?.getFullYear()} + + ${status.asterisk && " *"} + `}
${level === "low" ? html`
${context.l10n`Newly available`}
` @@ -178,34 +185,36 @@ export class BaselineIndicator extends ServerComponent {
- ${level === "high" && low_date + ${(level === "high" || level === "low") && low_date ? html`

- ${context.l10n.raw({ - id: "baseline-high-extra", - args: { - date: low_date.toLocaleDateString(context.locale, { - year: "numeric", - month: "long", - }), - }, - })} -

` - : level === "low" && low_date + ${level === "high" + ? context.l10n.raw({ + id: "baseline-high-extra", + args: { + date: low_date.toLocaleDateString(context.locale, { + year: "numeric", + month: "long", + }), + }, + }) + : context.l10n.raw({ + id: "baseline-low-extra", + args: { + date: low_date.toLocaleDateString(DEFAULT_LOCALE, { + year: "numeric", + month: "long", + }), + }, + })} +

+ ${status.asterisk + ? html`

* ${context.l10n("baseline-asterisk")}

` + : nothing}` + : level === "discouraged" ? html`

- ${context.l10n.raw({ - id: "baseline-low-extra", - args: { - date: low_date.toLocaleDateString(DEFAULT_LOCALE, { - year: "numeric", - month: "long", - }), - }, - })} + ${context.l10n`Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.`}

` : html`

${context.l10n("baseline-not-extra")}

`} - ${status.asterisk - ? html`

* ${context.l10n("baseline-asterisk")}

` - : nothing}
  • Date: Wed, 17 Sep 2025 14:56:47 +0100 Subject: [PATCH 2/6] feat(baseline): add alternatives to discouraged banner --- components/baseline-indicator/server.css | 8 +++++++- components/baseline-indicator/server.js | 24 ++++++++++++++++++++++-- 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/components/baseline-indicator/server.css b/components/baseline-indicator/server.css index 0520868c9..a77e28f38 100644 --- a/components/baseline-indicator/server.css +++ b/components/baseline-indicator/server.css @@ -230,7 +230,7 @@ margin-bottom: 1rem; } - ul { + ul:not(.alternatives) { display: flex; flex-wrap: wrap; @@ -264,5 +264,11 @@ } } } + + ul.alternatives { + padding-left: 1.4rem; + margin-top: -1rem; + margin-bottom: 1rem; + } } } diff --git a/components/baseline-indicator/server.js b/components/baseline-indicator/server.js index 7381e8046..702b522e9 100644 --- a/components/baseline-indicator/server.js +++ b/components/baseline-indicator/server.js @@ -212,8 +212,28 @@ export class BaselineIndicator extends ServerComponent { : nothing}` : level === "discouraged" ? html`

    - ${context.l10n`Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.`} -

    ` + ${context.l10n`Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.`} +

    + ${status.alternatives?.length > 0 + ? html`

    + ${context.l10n`Consider using the following features instead:`} +

    +     ` + : nothing}` : html`

    ${context.l10n("baseline-not-extra")}

    `}
    • From d6fd2081aee700109e9740437fd0be5547b71ad9 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Thu, 18 Sep 2025 17:37:32 +0100 Subject: [PATCH 3/6] don't affect sticky behaviour --- components/baseline-indicator/hook.js | 9 ++++++--- components/baseline-indicator/server.js | 5 ++++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/components/baseline-indicator/hook.js b/components/baseline-indicator/hook.js index 80e336cad..42a71e595 100644 --- a/components/baseline-indicator/hook.js +++ b/components/baseline-indicator/hook.js @@ -1,10 +1,13 @@ try { const indicator = document.querySelector(".baseline-indicator"); if (indicator instanceof HTMLDetailsElement) { - indicator.addEventListener("toggle", () => { + const { openByDefault } = indicator.dataset; + if (openByDefault === undefined) { + indicator.addEventListener("toggle", () => { + saveState(indicator.open); + }); saveState(indicator.open); - }); - saveState(indicator.open); + } } /** diff --git a/components/baseline-indicator/server.js b/components/baseline-indicator/server.js index d348df74c..c5c7d23ce 100644 --- a/components/baseline-indicator/server.js +++ b/components/baseline-indicator/server.js @@ -130,10 +130,13 @@ export class BaselineIndicator extends ServerComponent { } }; + const openByDefault = level === "discouraged"; + return html`
      Date: Thu, 18 Sep 2025 17:40:12 +0100 Subject: [PATCH 4/6] fix types --- components/baseline-indicator/server.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/baseline-indicator/server.js b/components/baseline-indicator/server.js index c5c7d23ce..389bc5677 100644 --- a/components/baseline-indicator/server.js +++ b/components/baseline-indicator/server.js @@ -222,7 +222,7 @@ export class BaselineIndicator extends ServerComponent { ? html`

      ${context.l10n`Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.`}

      - ${status.alternatives?.length > 0 + ${status.alternatives && status.alternatives.length > 0 ? html`

      ${context.l10n`Consider using the following features instead:`}

      From 2d84518e63192e64a05d933396d4f00081a0157c Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Thu, 15 Jan 2026 11:57:24 +0000 Subject: [PATCH 5/6] feat(baseline): add reason to discouraged banner and removal variant --- .../icons/status/pending-removal-dark.svg | 11 +++ .../icons/status/pending-removal.svg | 11 +++ components/baseline-indicator/server.css | 11 +++ components/baseline-indicator/server.js | 78 +++++++++++++------ 4 files changed, 86 insertions(+), 25 deletions(-) create mode 100644 components/baseline-indicator/icons/status/pending-removal-dark.svg create mode 100644 components/baseline-indicator/icons/status/pending-removal.svg diff --git a/components/baseline-indicator/icons/status/pending-removal-dark.svg b/components/baseline-indicator/icons/status/pending-removal-dark.svg new file mode 100644 index 000000000..64d6df0dc --- /dev/null +++ b/components/baseline-indicator/icons/status/pending-removal-dark.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/components/baseline-indicator/icons/status/pending-removal.svg b/components/baseline-indicator/icons/status/pending-removal.svg new file mode 100644 index 000000000..69629e5a7 --- /dev/null +++ b/components/baseline-indicator/icons/status/pending-removal.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/components/baseline-indicator/server.css b/components/baseline-indicator/server.css index a77e28f38..d3332d8d8 100644 --- a/components/baseline-indicator/server.css +++ b/components/baseline-indicator/server.css @@ -46,6 +46,17 @@ @mixin light-dark --baseline-img, url("./icons/status/obsolete.svg"), url("./icons/status/obsolete-dark.svg"); + + &.to-be-removed { + --baseline-bg: #fceeee; + --baseline-engine-bg: #f3dddd; + --baseline-pill-bg: #b3261e; + --baseline-pill-color: #f1f3f4; + + @mixin light-dark --baseline-img, + url("./icons/status/pending-removal.svg"), + url("./icons/status/pending-removal-dark.svg"); + } } &[open] { diff --git a/components/baseline-indicator/server.js b/components/baseline-indicator/server.js index 389bc5677..4cfc85754 100644 --- a/components/baseline-indicator/server.js +++ b/components/baseline-indicator/server.js @@ -1,5 +1,6 @@ import { html } from "@lit-labs/ssr"; import { nothing } from "lit"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { ServerComponent } from "../server/index.js"; @@ -79,6 +80,7 @@ export class BaselineIndicator extends ServerComponent { const level = status.feature.discouraged ? "discouraged" : status.baseline || "not"; + const removalDate = status.feature.discouraged?.removal_date; const feedbackLink = `${SURVEY_URL}?page=${encodeURIComponent(context.url)}&level=${level}`; @@ -130,10 +132,35 @@ export class BaselineIndicator extends ServerComponent { } }; + const renderAlternatives = + /** + * @param {string} instruction + * @param {import("@rari").Alternative[]} [alternatives] + */ + (instruction, alternatives) => + alternatives && alternatives.length > 0 + ? html`

      ${instruction}

      +
        + ${alternatives.map( + ({ name, description, mdn_url }) => + html`
      • + ${name} +
        • `, + )} +
      ` + : nothing; + const openByDefault = level === "discouraged"; return html`
      ${level === "low" ? html`
      ${context.l10n`Newly available`}
      ` - : nothing} + : level === "discouraged" && removalDate + ? html`
      ${context.l10n`To be removed`}
      ` + : nothing}
      ${ENGINES.map( ({ name, browsers }) => @@ -219,29 +248,28 @@ export class BaselineIndicator extends ServerComponent { ? html`

      * ${context.l10n("baseline-asterisk")}

      ` : nothing}` : level === "discouraged" - ? html`

      - ${context.l10n`Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.`} -

      - ${status.alternatives && status.alternatives.length > 0 - ? html`

      - ${context.l10n`Consider using the following features instead:`} -

      -
        - ${status.alternatives.map( - ({ name, description, mdn_url }) => - html`
      • - ${name} -
        • `, - )} -
      ` - : nothing}` + ? removalDate + ? html`

      + ${context.l10n`This feature is pending removal from browsers. Using it now may lead to broken functionality in future updates.`} + ${unsafeHTML( + status.feature.discouraged?.reason_html || nothing, + )} + ${renderAlternatives( + context.l10n`Use the following features instead:`, + status.alternatives, + )} +

      ` + : html`

      + ${context.l10n`Avoid using this feature in new projects.`} + ${unsafeHTML( + status.feature.discouraged?.reason_html || nothing, + )} + ${context.l10n`This feature may be a candidate for removal from web standards or browsers.`} +

      + ${renderAlternatives( + context.l10n`Consider using the following features instead:`, + status.alternatives, + )}` : html`

      ${context.l10n("baseline-not-extra")}

      `}
      • From 8d433174192fd2e1026d4277d58495ab1a26b415 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Thu, 15 Jan 2026 12:17:45 +0000 Subject: [PATCH 6/6] fix: add dark colours for to-be-removed banner --- components/baseline-indicator/server.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/baseline-indicator/server.css b/components/baseline-indicator/server.css index d3332d8d8..cac54cd77 100644 --- a/components/baseline-indicator/server.css +++ b/components/baseline-indicator/server.css @@ -48,8 +48,8 @@ url("./icons/status/obsolete-dark.svg"); &.to-be-removed { - --baseline-bg: #fceeee; - --baseline-engine-bg: #f3dddd; + --baseline-bg: light-dark(#fceeee, #410e0b); + --baseline-engine-bg: light-dark(#f3dddd, #1a0706); --baseline-pill-bg: #b3261e; --baseline-pill-color: #f1f3f4;