Skip to content
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.

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

feat(baseline): update widget to reflect new definition #10128

Merged
merged 17 commits into from
Dec 5, 2023
Merged

Conversation

LeoMcA
Copy link
Member

@LeoMcA LeoMcA commented Dec 4, 2023

Summary

https://mozilla-hub.atlassian.net/browse/MP-555

Problem

See mdn/content#30769 and web-platform-dx/web-features#423

Solution

Update baseline widget to reflect changes.

I'll be squash-merging this PR, but given the frequent merges into our next branch it was easier to leave the commit history messy here - I wouldn't advise reviewing commit-by-commit.

TODO:

  • update to non-prereleased web-features package
  • update "Lean more" link

Screenshots

Before

baseline widely supported

baseline not widely supported

After

baseline high

baseline low

limited availability


How did you test this change?

Going through pages listed on https://developer.allizom.org/en-US/build.json and their localized counterparts

@LeoMcA LeoMcA requested a review from caugner December 4, 2023 20:55
@github-actions github-actions bot added dependencies Pull requests that update a dependency file metrics labels Dec 4, 2023
@LeoMcA LeoMcA marked this pull request as ready for review December 5, 2023 11:44
@LeoMcA LeoMcA requested review from mdn-bot and a team as code owners December 5, 2023 11:44
Copy link
Contributor

@caugner caugner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM overall, some nits, but no release blocker.

Probably adding a visual indicator on the feedback link would be good to land before though.

@@ -0,0 +1 @@
<svg width="540" height="300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m270 120 30 30-30 30-30-30 30-30Z" fill="#1EA446"/><path d="m420 30-30 30 90 90-90 90-60-60-30 30 90 90 150-150L420 30ZM150 0 30 120l30 30 90-90 60 60 30-30-90-90Z" fill="#0E411D"/><path d="m390 0 30 30-270 270L0 150l30-30 120 120L390 0Z" fill="#1EA446"/></svg>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid SVG width/height:

Suggested change
<svg width="540" height="300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m270 120 30 30-30 30-30-30 30-30Z" fill="#1EA446"/><path d="m420 30-30 30 90 90-90 90-60-60-30 30 90 90 150-150L420 30ZM150 0 30 120l30 30 90-90 60 60 30-30-90-90Z" fill="#0E411D"/><path d="m390 0 30 30-270 270L0 150l30-30 120 120L390 0Z" fill="#1EA446"/></svg>
<svg viewBox="0 0 540 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m270 120 30 30-30 30-30-30 30-30Z" fill="#1EA446"/><path d="m420 30-30 30 90 90-90 90-60-60-30 30 90 90 150-150L420 30ZM150 0 30 120l30 30 90-90 60 60 30-30-90-90Z" fill="#0E411D"/><path d="m390 0 30 30-270 270L0 150l30-30 120 120L390 0Z" fill="#1EA446"/></svg>

@@ -0,0 +1 @@
<svg width="36" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m18 8 2 2-2 2-2-2 2-2Z" fill="#1E8E3E"/><path d="m28 2-2 2 6 6-6 6-4-4-2 2 6 6 10-10-8-8ZM10 0 2 8l2 2 6-6 4 4 2-2-6-6Z" fill="#A8DAB5"/><path d="m26 0 2 2-18 18L0 10l2-2 8 8L26 0Z" fill="#1E8E3E"/></svg>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dito

Suggested change
<svg width="36" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m18 8 2 2-2 2-2-2 2-2Z" fill="#1E8E3E"/><path d="m28 2-2 2 6 6-6 6-4-4-2 2 6 6 10-10-8-8ZM10 0 2 8l2 2 6-6 4 4 2-2-6-6Z" fill="#A8DAB5"/><path d="m26 0 2 2-18 18L0 10l2-2 8 8L26 0Z" fill="#1E8E3E"/></svg>
<svg viewBox="0 0 36 20 " fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m18 8 2 2-2 2-2-2 2-2Z" fill="#1E8E3E"/><path d="m28 2-2 2 6 6-6 6-4-4-2 2 6 6 10-10-8-8ZM10 0 2 8l2 2 6-6 4 4 2-2-6-6Z" fill="#A8DAB5"/><path d="m26 0 2 2-18 18L0 10l2-2 8 8L26 0Z" fill="#1E8E3E"/></svg>

@@ -0,0 +1 @@
<svg width="540" height="300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m150 0 90 90-30 30-90-90 30-30Z" fill="#F09409"/><path d="m420 30 120 120-120 120-30-30 90-90-90-90 30-30Z" fill="#434649"/><path d="m330 180-30 30 90 90 30-30-90-90Z" fill="#F09409"/><path d="m120 30 30 30-90 90 90 90-30 30L0 150 120 30Z" fill="#434649"/><path d="m390 0 30 30-270 270-30-30L390 0Z" fill="#F09409"/></svg>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<svg width="540" height="300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m150 0 90 90-30 30-90-90 30-30Z" fill="#F09409"/><path d="m420 30 120 120-120 120-30-30 90-90-90-90 30-30Z" fill="#434649"/><path d="m330 180-30 30 90 90 30-30-90-90Z" fill="#F09409"/><path d="m120 30 30 30-90 90 90 90-30 30L0 150 120 30Z" fill="#434649"/><path d="m390 0 30 30-270 270-30-30L390 0Z" fill="#F09409"/></svg>
<svg viewBox="0 0 540 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m150 0 90 90-30 30-90-90 30-30Z" fill="#F09409"/><path d="m420 30 120 120-120 120-30-30 90-90-90-90 30-30Z" fill="#434649"/><path d="m330 180-30 30 90 90 30-30-90-90Z" fill="#F09409"/><path d="m120 30 30 30-90 90 90 90-30 30L0 150 120 30Z" fill="#434649"/><path d="m390 0 30 30-270 270-30-30L390 0Z" fill="#F09409"/></svg>

@@ -0,0 +1 @@
<svg width="36" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m10 0 6 6-2 2-6-6 2-2Z" fill="#EA8600"/><path d="m28 2 8 8-8 8-2-2 6-6-6-6 2-2Z" fill="#C6C6C6"/><path d="m22 12-2 2 6 6 2-2-6-6Z" fill="#EA8600"/><path d="m8 2 2 2-6 6 6 6-2 2-8-8 8-8Z" fill="#C6C6C6"/><path d="m26 0 2 2-18 18-2-2L26 0Z" fill="#EA8600"/></svg>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<svg width="36" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m10 0 6 6-2 2-6-6 2-2Z" fill="#EA8600"/><path d="m28 2 8 8-8 8-2-2 6-6-6-6 2-2Z" fill="#C6C6C6"/><path d="m22 12-2 2 6 6 2-2-6-6Z" fill="#EA8600"/><path d="m8 2 2 2-6 6 6 6-2 2-8-8 8-8Z" fill="#C6C6C6"/><path d="m26 0 2 2-18 18-2-2L26 0Z" fill="#EA8600"/></svg>
<svg viewBox="0 0 36 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m10 0 6 6-2 2-6-6 2-2Z" fill="#EA8600"/><path d="m28 2 8 8-8 8-2-2 6-6-6-6 2-2Z" fill="#C6C6C6"/><path d="m22 12-2 2 6 6 2-2-6-6Z" fill="#EA8600"/><path d="m8 2 2 2-6 6 6 6-2 2-8-8 8-8Z" fill="#C6C6C6"/><path d="m26 0 2 2-18 18-2-2L26 0Z" fill="#EA8600"/></svg>

@@ -0,0 +1 @@
<svg width="540" height="300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m150 0 30 30-30 30-30-30 30-30Zm60 60 30 30-30 30-30-30 30-30Zm240 0 30 30-30 30-30-30 30-30Zm60 60 30 30-30 30-30-30 30-30Zm-60 60 30 30-30 30-30-30 30-30Zm-60 60 30 30-30 30-30-30 30-30Zm-60-60 30 30-30 30-30-30 30-30ZM90 60l30 30-30 30-30-30 30-30Z" fill="#0842A0"/><path d="m390 0 30 30-270 270L0 150l30-30 120 120L390 0Z" fill="#1B6EF3"/></svg>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<svg width="540" height="300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m150 0 30 30-30 30-30-30 30-30Zm60 60 30 30-30 30-30-30 30-30Zm240 0 30 30-30 30-30-30 30-30Zm60 60 30 30-30 30-30-30 30-30Zm-60 60 30 30-30 30-30-30 30-30Zm-60 60 30 30-30 30-30-30 30-30Zm-60-60 30 30-30 30-30-30 30-30ZM90 60l30 30-30 30-30-30 30-30Z" fill="#0842A0"/><path d="m390 0 30 30-270 270L0 150l30-30 120 120L390 0Z" fill="#1B6EF3"/></svg>
<svg viewBox="0 0 540 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m150 0 30 30-30 30-30-30 30-30Zm60 60 30 30-30 30-30-30 30-30Zm240 0 30 30-30 30-30-30 30-30Zm60 60 30 30-30 30-30-30 30-30Zm-60 60 30 30-30 30-30-30 30-30Zm-60 60 30 30-30 30-30-30 30-30Zm-60-60 30 30-30 30-30-30 30-30ZM90 60l30 30-30 30-30-30 30-30Z" fill="#0842A0"/><path d="m390 0 30 30-270 270L0 150l30-30 120 120L390 0Z" fill="#1B6EF3"/></svg>

@@ -0,0 +1 @@
<svg width="36" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m10 0 2 2-2 2-2-2 2-2Zm4 4 2 2-2 2-2-2 2-2Zm16 0 2 2-2 2-2-2 2-2Zm4 4 2 2-2 2-2-2 2-2Zm-4 4 2 2-2 2-2-2 2-2Zm-4 4 2 2-2 2-2-2 2-2Zm-4-4 2 2-2 2-2-2 2-2ZM6 4l2 2-2 2-2-2 2-2Z" fill="#AECBFA"/><path d="m26 0 2 2-18 18L0 10l2-2 8 8L26 0Z" fill="#1A73E8"/></svg>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<svg width="36" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m10 0 2 2-2 2-2-2 2-2Zm4 4 2 2-2 2-2-2 2-2Zm16 0 2 2-2 2-2-2 2-2Zm4 4 2 2-2 2-2-2 2-2Zm-4 4 2 2-2 2-2-2 2-2Zm-4 4 2 2-2 2-2-2 2-2Zm-4-4 2 2-2 2-2-2 2-2ZM6 4l2 2-2 2-2-2 2-2Z" fill="#AECBFA"/><path d="m26 0 2 2-18 18L0 10l2-2 8 8L26 0Z" fill="#1A73E8"/></svg>
<svg viewBox="0 0 36 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m10 0 2 2-2 2-2-2 2-2Zm4 4 2 2-2 2-2-2 2-2Zm16 0 2 2-2 2-2-2 2-2Zm4 4 2 2-2 2-2-2 2-2Zm-4 4 2 2-2 2-2-2 2-2Zm-4 4 2 2-2 2-2-2 2-2Zm-4-4 2 2-2 2-2-2 2-2ZM6 4l2 2-2 2-2-2 2-2Z" fill="#AECBFA"/><path d="m26 0 2 2-18 18L0 10l2-2 8 8L26 0Z" fill="#1A73E8"/></svg>

@@ -0,0 +1 @@
<svg width="13" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M7.15 5.85h-.894a.406.406 0 0 1-.406-.406V2.356c0-.224.182-.406.406-.406h.894m0 6.5h-.894a.406.406 0 0 1-.406-.406v-.488c0-.224.182-.406.406-.406h.894M11.7 0H1.3C.585 0 0 .585 0 1.3v10.72c0 .361.438.542.694.286L2.48 10.52a.407.407 0 0 1 .287-.119H11.7c.715 0 1.3-.585 1.3-1.3V1.3c0-.715-.585-1.3-1.3-1.3Z" fill="#000"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h13v13H0z"/></clipPath></defs></svg>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<svg width="13" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M7.15 5.85h-.894a.406.406 0 0 1-.406-.406V2.356c0-.224.182-.406.406-.406h.894m0 6.5h-.894a.406.406 0 0 1-.406-.406v-.488c0-.224.182-.406.406-.406h.894M11.7 0H1.3C.585 0 0 .585 0 1.3v10.72c0 .361.438.542.694.286L2.48 10.52a.407.407 0 0 1 .287-.119H11.7c.715 0 1.3-.585 1.3-1.3V1.3c0-.715-.585-1.3-1.3-1.3Z" fill="#000"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h13v13H0z"/></clipPath></defs></svg>
<svg viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M7.15 5.85h-.894a.406.406 0 0 1-.406-.406V2.356c0-.224.182-.406.406-.406h.894m0 6.5h-.894a.406.406 0 0 1-.406-.406v-.488c0-.224.182-.406.406-.406h.894M11.7 0H1.3C.585 0 0 .585 0 1.3v10.72c0 .361.438.542.694.286L2.48 10.52a.407.407 0 0 1 .287-.119H11.7c.715 0 1.3-.585 1.3-1.3V1.3c0-.715-.585-1.3-1.3-1.3Z" fill="#000"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h13v13H0z"/></clipPath></defs></svg>

Comment on lines +182 to +196
&:first-child a {
&,
&:active,
&:visited {
background: none;
color: var(--text-link);
}
}

&:not(:first-child) a {
color: var(--text-primary);
&,
&:active {
background: none;
color: var(--text-primary);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use classes instead of the first-child/last-child distinction?

Comment on lines +164 to +172
<a
href={feedbackLink}
data-glean={BASELINE.LINK_FEEDBACK}
className="feedback-link"
target="_blank"
rel="noreferrer"
>
<span className="visually-hidden">Feedback</span>
</a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: The link has no visual indicator on hover that it's a link.

<p>
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", {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can low_date be undefined? If so, should this sentence be conditionally shown only if low_date is truthy?

@LeoMcA
Copy link
Member Author

LeoMcA commented Dec 5, 2023

Thanks, I'll address these in a follow-up PR so we can release on time

@LeoMcA LeoMcA merged commit 8372e0b into main Dec 5, 2023
16 checks passed
@LeoMcA LeoMcA deleted the baseline-next branch December 5, 2023 12:33
LeoMcA added a commit that referenced this pull request Dec 12, 2023
also address review from prior PR:
#10128 (review)
- 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)
LeoMcA added a commit that referenced this pull request Dec 14, 2023
also address review from prior PR:
#10128 (review)
- remove height/width and add viewbox
- 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency file metrics
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants