spectrum-web-components
spectrum-web-components copied to clipboard
adobe
fix(toast): make icon customizable
Issue
https://github.com/adobe/spectrum-web-components/issues/4026
Description
Created a slot for the icon inside toasts to enable users to place their own icon if desired.
Motivation and context
Enable express tenant to add newer icons or other toast icons.
How has this been tested?
- [x] Test case 1
- Created a story with a new icon.
Types of changes
- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] 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
- Classic | Lightest | Medium | LTR
- Classic | Lightest | Medium | RTL
- Classic | Lightest | Large | LTR
- Classic | Lightest | Large | RTL
- Classic | Light | Medium | LTR
- Classic | Light | Medium | RTL
- Classic | Light | Large | LTR
- Classic | Light | Large | RTL
- Classic | Dark | Medium | LTR
- Classic | Dark | Medium | RTL
- Classic | Dark | Large | LTR
- Classic | Dark | Large | RTL
- Classic | Darkest | Medium | LTR
- Classic | Darkest | Medium | RTL
- Classic | Darkest | Large | LTR
- Classic | 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
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Tachometer results
Chrome
toast permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 438 kB | 42.74ms - 43.27ms | - | faster ✔ 1% - 3% 0.22ms - 1.31ms |
| branch | 429 kB | 43.30ms - 44.25ms | slower ❌ 1% - 3% 0.22ms - 1.31ms |
- |
Firefox
toast permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 438 kB | 108.11ms - 114.21ms | - | unsure 🔍 -3% - +5% -3.78ms - +5.18ms |
| branch | 429 kB | 107.18ms - 113.74ms | unsure 🔍 -5% - +3% -5.18ms - +3.78ms |
- |
Would be great if you opened a issue with your goals here so we can ensure that the path you take to solve them set you and your application us for success.
Thanks for the quick review @Westbrook ! Created an issue here - https://github.com/adobe/spectrum-web-components/issues/4026 ✅ Added a story and a test for this implementation ✅