From 7ae858906928aadd18026933355e89c8ae75af19 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 12 Dec 2023 18:48:34 +0000 Subject: [PATCH 1/4] 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", + ], +}; From 4a3a2414c1a316ae13925910cc20d1507cf17c75 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Wed, 13 Dec 2023 10:05:07 +0000 Subject: [PATCH 2/4] revert svgo changes --- client/config/webpack.config.js | 3 +++ svgo.config.js | 13 ------------- 2 files changed, 3 insertions(+), 13 deletions(-) delete mode 100644 svgo.config.js diff --git a/client/config/webpack.config.js b/client/config/webpack.config.js index 32c51cf4f29f..b36f95683e46 100644 --- a/client/config/webpack.config.js +++ b/client/config/webpack.config.js @@ -385,6 +385,9 @@ function config(webpackEnv) { options: { prettier: false, svgo: false, + svgoConfig: { + plugins: [{ removeViewBox: false }], + }, titleProp: true, ref: true, }, diff --git a/svgo.config.js b/svgo.config.js deleted file mode 100644 index f3e9f6311060..000000000000 --- a/svgo.config.js +++ /dev/null @@ -1,13 +0,0 @@ -export default { - plugins: [ - { - name: "preset-default", - params: { - overrides: { - removeViewBox: false, - }, - }, - }, - "removeDimensions", - ], -}; From 579ae9b593a6865f18d7e263b9b4f48f539bfbee Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Wed, 13 Dec 2023 10:14:55 +0000 Subject: [PATCH 3/4] bump web-features package --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index d3b9bc260057..c30e1389d1cf 100644 --- a/package.json +++ b/package.json @@ -137,7 +137,7 @@ "unified": "^11.0.4", "unist-builder": "^4.0.0", "unist-util-visit": "^5.0.0", - "web-features": "0.5.0-alpha.1", + "web-features": "^0.5.0-alpha.2", "web-specs": "^2.75.1" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index e33c36f9cec2..462f9da4d9ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15303,10 +15303,10 @@ wcwidth@^1.0.1: dependencies: defaults "^1.0.3" -web-features@0.5.0-alpha.1: - version "0.5.0-alpha.1" - resolved "https://registry.yarnpkg.com/web-features/-/web-features-0.5.0-alpha.1.tgz#672577016c8741f325b40849170c594b48378408" - integrity sha512-8ZcitZ3YCrZMwCajqRCOE81cUNutGuRKwRh6pVSxDC4YFG/2Yl0lToqyBjs0p7y4EpU6BOXjMmofcTI2tUve7Q== +web-features@^0.5.0-alpha.2: + version "0.5.0-alpha.2" + resolved "https://registry.yarnpkg.com/web-features/-/web-features-0.5.0-alpha.2.tgz#b95e614ce80fe0a0b728eeb4532bec14e6c3d422" + integrity sha512-yYIOX1EAp7SOhVKefA3kMkQLH78hfoMeJ8UjatXRzxB2O9vt134Xto1m8OrJdHCAq1h+yZJQIxZiX/PXv7XlPQ== web-namespaces@^2.0.0: version "2.0.1" From 75059f6f8d1dfb06b1eeff19da23afa24d54e3c4 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Thu, 14 Dec 2023 10:34:57 +0000 Subject: [PATCH 4/4] Update client/src/document/baseline-indicator.tsx --- client/src/document/baseline-indicator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/document/baseline-indicator.tsx b/client/src/document/baseline-indicator.tsx index 76a6aa9e48c8..2737d5eb17d4 100644 --- a/client/src/document/baseline-indicator.tsx +++ b/client/src/document/baseline-indicator.tsx @@ -171,7 +171,7 @@ export function BaselineIndicator({ status }: { status: SupportStatus }) { target="_blank" rel="noreferrer" > - Give feedback + Report feedback