-
Notifications
You must be signed in to change notification settings - Fork 509
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
Conversation
There was a problem hiding this 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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Avoid SVG width/height:
<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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
dito
<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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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> |
&: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); | ||
} |
There was a problem hiding this comment.
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?
<a | ||
href={feedbackLink} | ||
data-glean={BASELINE.LINK_FEEDBACK} | ||
className="feedback-link" | ||
target="_blank" | ||
rel="noreferrer" | ||
> | ||
<span className="visually-hidden">Feedback</span> | ||
</a> |
There was a problem hiding this comment.
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", { |
There was a problem hiding this comment.
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?
Thanks, I'll address these in a follow-up PR so we can release on time |
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)
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)
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 packageScreenshots
Before
After
How did you test this change?
Going through pages listed on https://developer.allizom.org/en-US/build.json and their localized counterparts