Skip to content

feat(baseline): add discouraged banner #763

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
LeoMcA wants to merge 13 commits into
base: main
Choose a base branch
from
Draft

feat(baseline): add discouraged banner #763

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
77c9adb
feat(baseline): add discouraged banner
LeoMcA Sep 15, 2025
e490518
feat(baseline): add alternatives to discouraged banner
LeoMcA Sep 17, 2025
d62af64
Merge remote-tracking branch 'origin/main' into baseline-discouraged
LeoMcA Sep 17, 2025
a92aa1b
Merge remote-tracking branch 'origin/main' into baseline-discouraged
LeoMcA Sep 18, 2025
d6fd208
don't affect sticky behaviour
LeoMcA Sep 18, 2025
b9929af
fix types
LeoMcA Sep 18, 2025
88c0f8a
Merge branch 'main' into baseline-discouraged
caugner Oct 1, 2025
cf600f4
Merge remote-tracking branch 'origin/main' into baseline-discouraged
LeoMcA Oct 23, 2025
e043104
Merge remote-tracking branch 'origin/main' into baseline-discouraged
LeoMcA Nov 27, 2025
2e8a693
Merge remote-tracking branch 'origin/main' into baseline-discouraged
LeoMcA Jan 15, 2026
2d84518
feat(baseline): add reason to discouraged banner and removal variant
LeoMcA Jan 15, 2026
8d43317
fix: add dark colours for to-be-removed banner
LeoMcA Jan 15, 2026
042f4aa
Merge branch 'main' into baseline-discouraged
caugner Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions components/baseline-indicator/hook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
}

/**
Expand Down
4 changes: 4 additions & 0 deletions components/baseline-indicator/icons/browser-check-obsolete.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions components/baseline-indicator/icons/browser-cross-obsolete.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions components/baseline-indicator/icons/status/obsolete-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions components/baseline-indicator/icons/status/obsolete.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions components/baseline-indicator/icons/status/pending-removal-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions components/baseline-indicator/icons/status/pending-removal.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 32 additions & 3 deletions components/baseline-indicator/server.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -36,6 +38,27 @@
--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");

&.to-be-removed {
--baseline-bg: light-dark(#fceeee, #410e0b);
--baseline-engine-bg: light-dark(#f3dddd, #1a0706);
--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] {
summary .icon-chevron {
transform: rotate(180deg);
Expand Down Expand Up @@ -177,14 +200,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);
}
}
}
Expand Down Expand Up @@ -218,7 +241,7 @@
margin-bottom: 1rem;
}

ul {
ul:not(.alternatives) {
display: flex;

flex-wrap: wrap;
Expand Down Expand Up @@ -252,5 +275,11 @@
}
}
}

ul.alternatives {
padding-left: 1.4rem;
margin-top: -1rem;
margin-bottom: 1rem;
}
}
}
150 changes: 105 additions & 45 deletions components/baseline-indicator/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -76,7 +77,10 @@
? 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 removalDate = status.feature.discouraged?.removal_date;

Check failure on line 83 in components/baseline-indicator/server.js

View workflow job for this annotation

GitHub Actions / lint 

Property 'removal_date' does not exist on type 'Discouraged'.

const feedbackLink = `${SURVEY_URL}?page=${encodeURIComponent(context.url)}&level=${level}`;

Expand Down Expand Up @@ -128,36 +132,71 @@
}
};

const renderAlternatives =
/**
* @param {string} instruction
* @param {import("@rari").Alternative[]} [alternatives]

Check failure on line 138 in components/baseline-indicator/server.js

View workflow job for this annotation

GitHub Actions / lint 

Namespace '"/home/runner/work/fred/fred/types/rari"' has no exported member 'Alternative'.
*/
(instruction, alternatives) =>
alternatives && alternatives.length > 0
? html`<p>${instruction}</p>
<ul class="alternatives">
${alternatives.map(
({ name, description, mdn_url }) =>
html`<li>
<a
href=${mdn_url.replace(
"/docs",
`/${context.locale}/docs`,
)}
title=${description}
>${name}</a
>
</li>`,
)}
</ul>`
: nothing;

const openByDefault = level === "discouraged";

return html`<details
class="baseline-indicator ${level}"
class="baseline-indicator ${level} ${removalDate ? "to-be-removed" : ""}"
data-glean-toggle-open="baseline_toggle_open"
?open=${openByDefault}
?data-open-by-default=${openByDefault}
>
<summary>
<span
class="indicator"
role="img"
aria-label=${level === "not"
? context.l10n`Baseline Cross`
: context.l10n`Baseline Check`}
aria-label=${level === "discouraged"
? context.l10n`Baseline Discouraged Mark`
: level === "not"
? context.l10n`Baseline Cross`
: context.l10n`Baseline Check`}
></span>
<div class="status-title">
${level === "not"
? html`<span class="not-bold"
>${context.l10n`Limited availability`}</span
>`
: html`
${context.l10n`Baseline`}
<span class="not-bold">
${level === "high"
? context.l10n`Widely available`
: low_date?.getFullYear()}
</span>
${status.asterisk && " *"}
`}
${level === "discouraged"
? html`<span class="not-bold">${context.l10n`Deprecated`}</span>`
: level === "not"
? html`<span class="not-bold"
>${context.l10n`Limited availability`}</span
>`
: html`
${context.l10n`Baseline`}
<span class="not-bold">
${level === "high"
? context.l10n`Widely available`
: low_date?.getFullYear()}
</span>
${status.asterisk && " *"}
`}
</div>
${level === "low"
? html`<div class="pill">${context.l10n`Newly available`}</div>`
: nothing}
: level === "discouraged" && removalDate
? html`<div class="pill">${context.l10n`To be removed`}</div>`
: nothing}
<div class="browsers">
${ENGINES.map(
({ name, browsers }) =>
Expand All @@ -183,34 +222,55 @@
<span class="icon icon-chevron"></span>
</summary>
<div class="extra">
${level === "high" && low_date
${(level === "high" || level === "low") && low_date
? html`<p>
${context.l10n.raw({
id: "baseline-high-extra",
args: {
date: low_date.toLocaleDateString(context.locale, {
year: "numeric",
month: "long",
}),
},
})}
</p>`
: level === "low" && low_date
? html`<p>
${context.l10n.raw({
id: "baseline-low-extra",
args: {
date: low_date.toLocaleDateString(DEFAULT_LOCALE, {
year: "numeric",
month: "long",
}),
},
})}
</p>`
${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",
}),
},
})}
</p>
${status.asterisk
? html`<p>* ${context.l10n("baseline-asterisk")}</p>`
: nothing}`
: level === "discouraged"
? removalDate
? html`<p>
${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,

Check failure on line 255 in components/baseline-indicator/server.js

View workflow job for this annotation

GitHub Actions / lint 

Property 'reason_html' does not exist on type 'Discouraged'.
)}
${renderAlternatives(
context.l10n`Use the following features instead:`,
status.alternatives,

Check failure on line 259 in components/baseline-indicator/server.js

View workflow job for this annotation

GitHub Actions / lint 

Property 'alternatives' does not exist on type 'Baseline'.
)}
</p>`
: html`<p>
${context.l10n`Avoid using this feature in new projects.`}
${unsafeHTML(
status.feature.discouraged?.reason_html || nothing,

Check failure on line 265 in components/baseline-indicator/server.js

View workflow job for this annotation

GitHub Actions / lint 

Property 'reason_html' does not exist on type 'Discouraged'.
)}
${context.l10n`This feature may be a candidate for removal from web standards or browsers.`}
</p>
${renderAlternatives(
context.l10n`Consider using the following features instead:`,
status.alternatives,

Check failure on line 271 in components/baseline-indicator/server.js

View workflow job for this annotation

GitHub Actions / lint 

Property 'alternatives' does not exist on type 'Baseline'.
)}`
: html`<p>${context.l10n("baseline-not-extra")}</p>`}
${status.asterisk
? html`<p>* ${context.l10n("baseline-asterisk")}</p>`
: nothing}
<ul>
<li>
<a
Expand Down
Loading