-
Notifications
You must be signed in to change notification settings - Fork 194
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
fix: static white meter story and corrected fill colors #2965
base: main
Are you sure you want to change the base?
fix: static white meter story and corrected fill colors #2965
Conversation
🦋 Changeset detectedLatest commit: e41ba19 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
🚀 Deployed on https://pr-2965--spectrum-css.netlify.app |
File metricsSummaryTotal size: 4.63 MB* Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.
Detailsprogressbar
* Results are not gzipped or minified. * An ASCII character in UTF-8 is 8 bits or 1 byte. |
87fc3e3
to
d4136b2
Compare
d4136b2
to
c763024
Compare
c763024
to
87fde44
Compare
87fde44
to
f0e5cb8
Compare
c9036fe
to
05e5bf0
Compare
@@ -223,7 +223,7 @@ | |||
} | |||
|
|||
/* Static White */ | |||
.spectrum-ProgressBar--staticWhite { | |||
.spectrum-ProgressBar.spectrum-ProgressBar--staticWhite { |
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.
I don't love that we have to increase specificity to make this work but we can address those concerns in a separate PR because it's an issue we have across the project.
3557f37
to
6375a73
Compare
6375a73
to
e41ba19
Compare
Description
Because meter just extends the
ProgressBar.args
,staticWhite
shows in the meter controls in Storybook. During the work in #2929, we noticed that the positive, negative and notice fill colors for meter do not respond as expected when looking at astaticWhite
story. WhenstaticWhite
was turned on, the positive, negative and notice colors remained the same, while the default story (and all of the progress bar stories) have reinforced, white fill colors.🚫
![Screenshot 2024-07-29 at 10 49 39 AM](https://private-user-images.githubusercontent.com/69602589/355538364-5d65291f-ee5d-4983-9ffe-9c5b7a4d3aa5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MDE5MzgsIm5iZiI6MTcyMzUwMTYzOCwicGF0aCI6Ii82OTYwMjU4OS8zNTU1MzgzNjQtNWQ2NTI5MWYtZWU1ZC00OTgzLTlmZmUtOWM1YjdhNGQzYWE1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODEyVDIyMjcxOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE3YjIwMjMyOTRhZmFmNjkxNjRlZjVhMGE3NGE3NTFiYTk1ZTc3MjAzYzU2YThmZTFmYjQ4MjNlNzk5NGZlNWEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.7AE0lNMa73ZOEndpZf5KieVysfVLVUlpZ1e5DkVBD3U)
After checking with design (Nadeen), it was confirmed all stories should have the same fill colors as the default story when
staticWhite
is toggled on:✅
![Screenshot 2024-08-06 at 1 03 24 PM](https://private-user-images.githubusercontent.com/69602589/355538648-047bb751-89a7-4821-80b8-bb6d7b84e384.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MDE5MzgsIm5iZiI6MTcyMzUwMTYzOCwicGF0aCI6Ii82OTYwMjU4OS8zNTU1Mzg2NDgtMDQ3YmI3NTEtODlhNy00ODIxLTgwYjgtYmI2ZDdiODRlMzg0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODEyVDIyMjcxOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM0ODI4MmIwN2U2ZWI5NGQzZjE5YzRkMDNkMzBkNGYyZDE0Yzk1ZjVhOWRhN2NlMTQyNGQ3NWQwZTBhMmE3ZTMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Ik8OlZCNuMjulVt3zzqW1555hpyX97YwmYoUvu8-Y84)
This PR adds the static white story to meter to increase Chromatic coverage, and adds CSS to enforce the static white design specs.
CSS-872
How and where has this been tested?
Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.
Validation steps
Meter
--spectrum-progressbar-fill-color-white
), and track colors turning to transparent white (--spectrum-progressbar-track-color-white
)spectrum-ProgressBar
(the parent element)is-positive
; negative=is-negative
; notice=is-notice
), and also has the additionalspectrum-ProgressBar--staticWhite
class)Regression testing
Validate:
Screenshots
To-do list