spectrum-web-components
spectrum-web-components copied to clipboard
Published
20 hours ago •
adobe
adobe
feat(alert-banner): add alert banner component
trafficstars
Description
Create alert-banner component
Related issue(s)
Motivation and context
How has this been tested?
- [x] Test case 1 You can check out the component at alert-banner storybook
- [x] Test case 2 Check out usage information on alert-banner docs site
Screenshots (if appropriate)
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.
- [x] 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.
- [x] 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 | 221.452 kB | 210.488 kB 🏆 | 210.768 kB |
| Scripts | 53.54 kB | 48.231 kB 🏆 | 48.432 kB |
| Stylesheet | 34.952 kB | 30.30 kB 🏆 | 30.398 kB |
| Document | 6.023 kB | 5.292 kB 🏆 | 5.323 kB |
| Font | 126.937 kB | 126.665 kB | 126.615 kB 🏆 |
Request Count
| Category | Latest | Main | Branch |
|---|---|---|---|
| Total | 45 | 45 | 45 |
| Scripts | 37 | 37 | 37 |
| Stylesheet | 5 | 5 | 5 |
| Document | 1 | 1 | 1 |
| Font | 2 | 2 | 2 |
Tachometer results
Chrome
action-bar permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 485 kB | 44.81ms - 46.00ms | - | faster ✔ 3% - 7% 1.38ms - 3.14ms |
| branch | 472 kB | 47.02ms - 48.31ms | slower ❌ 3% - 7% 1.38ms - 3.14ms |
- |
action-menu permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 647 kB | 120.92ms - 123.62ms | - | faster ✔ 5% - 8% 6.24ms - 10.58ms |
| branch | 634 kB | 128.98ms - 132.37ms | slower ❌ 5% - 9% 6.24ms - 10.58ms |
- |
test-directive permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 604 kB | 56.33ms - 57.72ms | - | faster ✔ 2% - 5% 1.22ms - 3.16ms |
| branch | 592 kB | 58.54ms - 59.88ms | slower ❌ 2% - 6% 1.22ms - 3.16ms |
- |
test-lazy permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 603 kB | 54.45ms - 55.65ms | - | faster ✔ 5% - 8% 3.02ms - 5.05ms |
| branch | 591 kB | 58.27ms - 59.91ms | slower ❌ 5% - 9% 3.02ms - 5.05ms |
- |
test-open-close-directive permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 790 kB | 1865.36ms - 1869.95ms | - | unsure 🔍 -0% - +0% -4.37ms - +1.52ms |
| branch | 777 kB | 1867.24ms - 1870.93ms | unsure 🔍 -0% - +0% -1.52ms - +4.37ms |
- |
test-open-close permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 788 kB | 1854.40ms - 1857.73ms | - | unsure 🔍 -0% - +0% -2.58ms - +1.78ms |
| branch | 775 kB | 1855.05ms - 1857.87ms | unsure 🔍 -0% - +0% -1.78ms - +2.58ms |
- |
Firefox
action-bar permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 485 kB | 111.58ms - 117.54ms | - | faster ✔ 1% - 8% 1.24ms - 10.16ms |
| branch | 472 kB | 116.93ms - 123.59ms | slower ❌ 1% - 9% 1.24ms - 10.16ms |
- |
action-menu permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 647 kB | 271.76ms - 276.00ms | - | faster ✔ 12% - 14% 38.87ms - 45.77ms |
| branch | 634 kB | 313.49ms - 318.91ms | slower ❌ 14% - 17% 38.87ms - 45.77ms |
- |
test-directive permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 604 kB | 127.55ms - 130.49ms | - | faster ✔ 1% - 3% 0.99ms - 4.29ms |
| branch | 592 kB | 130.91ms - 132.41ms | slower ❌ 1% - 3% 0.99ms - 4.29ms |
- |
test-lazy permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 603 kB | 153.14ms - 160.02ms | - | slower ❌ 10% - 16% 14.24ms - 22.24ms |
| branch | 591 kB | 136.31ms - 140.37ms | faster ✔ 9% - 14% 14.24ms - 22.24ms |
- |
test-open-close-directive permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 790 kB | 1911.52ms - 1922.24ms | - | slower ❌ 1% - 2% 22.45ms - 34.27ms |
| branch | 777 kB | 1886.03ms - 1891.01ms | faster ✔ 1% - 2% 22.45ms - 34.27ms |
- |
test-open-close permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 788 kB | 1882.88ms - 1888.84ms | - | unsure 🔍 -0% - +0% -2.00ms - +5.24ms |
| branch | 775 kB | 1882.18ms - 1886.30ms | unsure 🔍 -0% - +0% -5.24ms - +2.00ms |
- |
For larger text the UI is getting distorted. Can you please confirm this with design and update the necessary css changes for this! This will require a text-wrap with a flex container.
Also for documentation site, the demo is breaking.
@loredanaspataru Please rebase this to main so that we can land this for this week's release!