From e6c7a4576e3dcb72ce500dcd2b659b66653d97b8 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 16 Sep 2025 17:28:16 +0100 Subject: [PATCH 1/2] 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 | 19 ++++++++++++++----- 4 files changed, 47 insertions(+), 5 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 0520868c9..d994875f9 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 7381e8046..e8b3ad29f 100644 --- a/components/baseline-indicator/server.js +++ b/components/baseline-indicator/server.js @@ -74,6 +74,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}`; @@ -126,7 +127,7 @@ export class BaselineIndicator extends ServerComponent { }; return html`
@@ -159,7 +160,9 @@ export class BaselineIndicator extends ServerComponent { ${level === "low" ? html`
${context.l10n`Newly available`}
` - : nothing} + : level === "discouraged" && removalDate + ? html`
${context.l10n`To be removed`}
` + : nothing}
${ENGINES.map( ({ name, browsers }) => @@ -211,9 +214,15 @@ 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.`} -

` + ? removalDate + ? html`

+ ${context.l10n`This feature is pending removal from browsers. Using it now may lead to broken functionality in future updates.`} +

` + : html`

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

` : html`

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

`}
  • From df61b91425281172737809482253f3c193d47cf4 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Thu, 23 Oct 2025 15:52:33 +0100 Subject: [PATCH 2/2] reason -> reason_html, add reason and alternatives for to be removed --- components/baseline-indicator/server.js | 61 ++++++++++++++++--------- 1 file changed, 40 insertions(+), 21 deletions(-) diff --git a/components/baseline-indicator/server.js b/components/baseline-indicator/server.js index cd1912a47..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"; @@ -131,6 +132,31 @@ 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`
    ${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.`} - ${status.feature.discouraged?.reason || nothing} + ${unsafeHTML( + status.feature.discouraged?.reason_html || nothing, + )} ${context.l10n`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}` + ${renderAlternatives( + context.l10n`Consider using the following features instead:`, + status.alternatives, + )}` : html`

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

    `}