adobe
feat(card): update the card background color property name
Description
BREAKING CHANGE: The card component's default variant now uses the same grey background color behind the cover photo that is used behind the image for the quiet variant. This background was only visible when the image did not take up the entire space. The intended background color of --spectrum-background-base-color for non-quiet variants was confirmed by the design team.
This also provides the existing mod custom property --mod-card-preview-background-color for customizing this area behind the image for the default variant.
Related issue(s)
- https://github.com/adobe/spectrum-css/pull/3010
Motivation and context
How has this been tested?
-
[ ] Test case 1
- Go here
- Do this
-
[ ] Test case 2
- Go here
- Do this
-
[x] Did it pass in Desktop?
-
[x] Did it pass in Mobile?
-
[x] Did it pass in iPad?
Screenshots (if appropriate)
Types of changes
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [x] Breaking change (fix or feature that would cause existing functionality to change)
- [ ] Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)
Checklist
- [x] I have signed the Adobe Open Source CLA.
- [x] My code follows the code style of this project.
- [ ] If my change required a change to the documentation, I have updated the documentation in this pull request.
- [x] I have read the CONTRIBUTING document.
- [ ] I have added tests to cover my changes.
- [x] All new and existing tests passed.
- [x] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.
Branch preview
Visual regression test results
When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
- High Contrast Mode | Medium | LTR
- Spectrum | Lightest | Medium | LTR
- Spectrum | Lightest | Medium | RTL
- Spectrum | Lightest | Large | LTR
- Spectrum | Lightest | Large | RTL
- Spectrum | Light | Medium | LTR
- Spectrum | Light | Medium | RTL
- Spectrum | Light | Large | LTR
- Spectrum | Light | Large | RTL
- Spectrum | Dark | Medium | LTR
- Spectrum | Dark | Medium | RTL
- Spectrum | Dark | Large | LTR
- Spectrum | Dark | Large | RTL
- Spectrum | Darkest | Medium | LTR
- Spectrum | Darkest | Medium | RTL
- Spectrum | Darkest | Large | LTR
- Spectrum | Darkest | Large | RTL
- Express | Lightest | Medium | LTR
- Express | Lightest | Medium | RTL
- Express | Lightest | Large | LTR
- Express | Lightest | Large | RTL
- Express | Light | Medium | LTR
- Express | Light | Medium | RTL
- Express | Light | Large | LTR
- Express | Light | Large | RTL
- Express | Dark | Medium | LTR
- Express | Dark | Medium | RTL
- Express | Dark | Large | LTR
- Express | Dark | Large | RTL
- Express | Darkest | Medium | LTR
- Express | Darkest | Medium | RTL
- Express | Darkest | Large | LTR
- Express | Darkest | Large | RTL
- Spectrum-two | Light | Medium | LTR
- Spectrum-two | Light | Medium | RTL
- Spectrum-two | Light | Large | LTR
- Spectrum-two | Light | Large | RTL
- Spectrum-two | Dark | Medium | LTR
- Spectrum-two | Dark | Medium | RTL
- Spectrum-two | Dark | Large | LTR
- Spectrum-two | Dark | Large | RTL
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Lighthouse scores
| Category | Latest (report) | Main (report) | Branch (report) |
|---|---|---|---|
| Performance | 0.99 | 0.99 | 0.99 |
| Accessibility | 1 | 1 | 1 |
| Best Practices | 1 | 1 | 1 |
| SEO | 1 | 0.92 | 0.92 |
| PWA | 1 | 1 | 1 |
What is this?
Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.
Transfer Size
| Category | Latest | Main | Branch |
|---|---|---|---|
| Total | 226.236 kB | 214.521 kB | 214.436 kB 🏆 |
| Scripts | 55.377 kB | 49.973 kB | 49.854 kB 🏆 |
| Stylesheet | 34.718 kB | 30.131 kB | 30.123 kB 🏆 |
| Document | 6.205 kB | 5.452 kB | 5.436 kB 🏆 |
| Font | 127.09 kB | 126.614 kB 🏆 | 126.623 kB |
Request Count
| Category | Latest | Main | Branch |
|---|---|---|---|
| Total | 52 | 52 | 52 |
| Scripts | 41 | 41 | 41 |
| Stylesheet | 5 | 5 | 5 |
| Document | 1 | 1 | 1 |
| Font | 2 | 2 | 2 |
Tachometer results
Chrome
card permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 517 kB | 39.84ms - 41.97ms | - | unsure 🔍 -7% - +1% -3.00ms - +0.63ms |
| branch | 493 kB | 40.62ms - 43.56ms | unsure 🔍 -2% - +7% -0.63ms - +3.00ms |
- |
Firefox
card permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 517 kB | 69.83ms - 73.13ms | - | faster ✔ 0% - 6% 0.26ms - 4.46ms |
| branch | 493 kB | 72.53ms - 75.15ms | slower ❌ 0% - 6% 0.26ms - 4.46ms |
- |
Pull Request Test Coverage Report for Build 10736295181
Details
- 0 of 0 changed or added relevant lines in 0 files are covered.
- No unchanged relevant lines lost coverage.
- Overall coverage decreased (-0.003%) to 98.2%
| Totals | |
|---|---|
| Change from base Build 10718063455: | -0.003% |
| Covered Lines: | 32515 |
| Relevant Lines: | 32946 |
💛 - Coveralls
Always good to be up to date with CSS, thanks for this! :) Let us just make sure to give adequate guidance to customers:
If you are using
--mod-card-background-color, make sure to update it to--mod-card-preview-background-color.
Right! I will touchbase with CSS team on this to make sure we are communicating this to the end users of SWC.
@Rajdeepc does this PR need to be updated or closed? Also flagging it as BREAKING CHANGE will trigger a major version? Is that necessary for a mod token change?
