From 7ae858906928aadd18026933355e89c8ae75af19 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 12 Dec 2023 18:48:34 +0000 Subject: [PATCH] fix(baseline): update icons, add text to feedback link also address review from prior PR: https://github.com/mdn/yari/pull/10128#pullrequestreview-1764911062 - configure svgo to automatically remove height/width and add viewbox, and do so on baseline icons - use classes instead of first/last-child for links - don't show copy if low_date is undefined (it should always be defined if baseline is low/high, but just in case) --- client/config/webpack.config.js | 3 --- .../src/assets/icons/baseline/browser-check.svg | 2 +- .../src/assets/icons/baseline/browser-cross.svg | 2 +- client/src/assets/icons/baseline/chrome.svg | 2 +- client/src/assets/icons/baseline/edge.svg | 2 +- client/src/assets/icons/baseline/firefox.svg | 2 +- client/src/assets/icons/baseline/high-dark.svg | 2 +- client/src/assets/icons/baseline/high.svg | 2 +- client/src/assets/icons/baseline/limited-dark.svg | 2 +- client/src/assets/icons/baseline/limited.svg | 2 +- client/src/assets/icons/baseline/low-dark.svg | 2 +- client/src/assets/icons/baseline/low.svg | 2 +- client/src/assets/icons/baseline/safari.svg | 2 +- client/src/assets/icons/feedback.svg | 2 +- client/src/document/baseline-indicator.scss | 9 +++++---- client/src/document/baseline-indicator.tsx | 15 +++++++++------ svgo.config.js | 13 +++++++++++++ 17 files changed, 40 insertions(+), 26 deletions(-) create mode 100644 svgo.config.js diff --git a/client/config/webpack.config.js b/client/config/webpack.config.js index b36f95683e46..32c51cf4f29f 100644 --- a/client/config/webpack.config.js +++ b/client/config/webpack.config.js @@ -385,9 +385,6 @@ function config(webpackEnv) { options: { prettier: false, svgo: false, - svgoConfig: { - plugins: [{ removeViewBox: false }], - }, titleProp: true, ref: true, }, diff --git a/client/src/assets/icons/baseline/browser-check.svg b/client/src/assets/icons/baseline/browser-check.svg index 063263f244d6..8a4c592e25b0 100644 --- a/client/src/assets/icons/baseline/browser-check.svg +++ b/client/src/assets/icons/baseline/browser-check.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/icons/baseline/browser-cross.svg b/client/src/assets/icons/baseline/browser-cross.svg index 54e998254c1a..1b0aeb267445 100644 --- a/client/src/assets/icons/baseline/browser-cross.svg +++ b/client/src/assets/icons/baseline/browser-cross.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/icons/baseline/chrome.svg b/client/src/assets/icons/baseline/chrome.svg index 98bc15cdc4d7..66362669dc4a 100644 --- a/client/src/assets/icons/baseline/chrome.svg +++ b/client/src/assets/icons/baseline/chrome.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/icons/baseline/edge.svg b/client/src/assets/icons/baseline/edge.svg index 8d6dbf5c5d24..21bea60b7ad5 100644 --- a/client/src/assets/icons/baseline/edge.svg +++ b/client/src/assets/icons/baseline/edge.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/icons/baseline/firefox.svg b/client/src/assets/icons/baseline/firefox.svg index 3b9ea4b8959a..e228a55bf806 100644 --- a/client/src/assets/icons/baseline/firefox.svg +++ b/client/src/assets/icons/baseline/firefox.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/icons/baseline/high-dark.svg b/client/src/assets/icons/baseline/high-dark.svg index cf06ac9a8905..06b214cf1d20 100644 --- a/client/src/assets/icons/baseline/high-dark.svg +++ b/client/src/assets/icons/baseline/high-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/icons/baseline/high.svg b/client/src/assets/icons/baseline/high.svg index b72cacc383b3..83b6ef2e14a7 100644 --- a/client/src/assets/icons/baseline/high.svg +++ b/client/src/assets/icons/baseline/high.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/icons/baseline/limited-dark.svg b/client/src/assets/icons/baseline/limited-dark.svg index e5b19dda4cd6..07b848a82b20 100644 --- a/client/src/assets/icons/baseline/limited-dark.svg +++ b/client/src/assets/icons/baseline/limited-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/icons/baseline/limited.svg b/client/src/assets/icons/baseline/limited.svg index 52081bb0b327..9b126ff1dc7c 100644 --- a/client/src/assets/icons/baseline/limited.svg +++ b/client/src/assets/icons/baseline/limited.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/icons/baseline/low-dark.svg b/client/src/assets/icons/baseline/low-dark.svg index 261502c44554..4256a616b7ac 100644 --- a/client/src/assets/icons/baseline/low-dark.svg +++ b/client/src/assets/icons/baseline/low-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/icons/baseline/low.svg b/client/src/assets/icons/baseline/low.svg index 36912d2fb8b0..aa0cf0f2d503 100644 --- a/client/src/assets/icons/baseline/low.svg +++ b/client/src/assets/icons/baseline/low.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/icons/baseline/safari.svg b/client/src/assets/icons/baseline/safari.svg index 34fff5fabe7e..b77e117496ee 100644 --- a/client/src/assets/icons/baseline/safari.svg +++ b/client/src/assets/icons/baseline/safari.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/icons/feedback.svg b/client/src/assets/icons/feedback.svg index cc09b3d58272..63fd30ec1791 100644 --- a/client/src/assets/icons/feedback.svg +++ b/client/src/assets/icons/feedback.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/document/baseline-indicator.scss b/client/src/document/baseline-indicator.scss index ace3f9042fd9..ab5437609709 100644 --- a/client/src/document/baseline-indicator.scss +++ b/client/src/document/baseline-indicator.scss @@ -8,7 +8,7 @@ $browsers: "chrome", "edge", "firefox", "safari"; --baseline-img: var(--baseline-limited-img); --baseline-check: var(--baseline-limited-check); --baseline-cross: var(--baseline-limited-cross); - --feedback-link-icon: #666; + --feedback-link-icon: var(--icon-primary); background: var(--baseline-bg); border-radius: 0.25rem; @@ -179,7 +179,7 @@ $browsers: "chrome", "edge", "firefox", "safari"; list-style: none; margin: 0; - &:first-child a { + a.learn-more { &, &:active, &:visited { @@ -188,9 +188,10 @@ $browsers: "chrome", "edge", "firefox", "safari"; } } - &:not(:first-child) a { + a:not(.learn-more) { &, - &:active { + &:active, + &:visited { background: none; color: var(--text-primary); } diff --git a/client/src/document/baseline-indicator.tsx b/client/src/document/baseline-indicator.tsx index db9ae287955a..76a6aa9e48c8 100644 --- a/client/src/document/baseline-indicator.tsx +++ b/client/src/document/baseline-indicator.tsx @@ -48,7 +48,9 @@ export function BaselineIndicator({ status }: { status: SupportStatus }) { ? "not" : undefined; - const feedbackLink = `${SURVEY_URL}?page=${pathname}&level=${level}`; + const feedbackLink = `${SURVEY_URL}?page=${encodeURIComponent( + pathname + )}&level=${level}`; const supported = (browser: string) => { const version: string | undefined = status.support?.[browser.toLowerCase()]; @@ -119,20 +121,20 @@ export function BaselineIndicator({ status }: { status: SupportStatus }) {
- {level === "high" ? ( + {level === "high" && low_date ? (

This feature is well established and works across many devices and browser versions. It’s been available across browsers since{" "} - {low_date?.toLocaleDateString("en-US", { + {low_date.toLocaleDateString("en-US", { year: "numeric", month: "long", })} .

- ) : level === "low" ? ( + ) : level === "low" && low_date ? (

Since{" "} - {low_date?.toLocaleDateString("en-US", { + {low_date.toLocaleDateString("en-US", { year: "numeric", month: "long", })} @@ -151,6 +153,7 @@ export function BaselineIndicator({ status }: { status: SupportStatus }) { href="/en-US/blog/baseline-evolution-on-mdn/" data-glean={BASELINE.LINK_LEARN_MORE} target="_blank" + className="learn-more" > Learn more @@ -168,7 +171,7 @@ export function BaselineIndicator({ status }: { status: SupportStatus }) { target="_blank" rel="noreferrer" > - Feedback + Give feedback diff --git a/svgo.config.js b/svgo.config.js new file mode 100644 index 000000000000..f3e9f6311060 --- /dev/null +++ b/svgo.config.js @@ -0,0 +1,13 @@ +export default { + plugins: [ + { + name: "preset-default", + params: { + overrides: { + removeViewBox: false, + }, + }, + }, + "removeDimensions", + ], +};