Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Fix Alert colors #2339

Closed
3 tasks
caw310 opened this issue Dec 14, 2023 · 6 comments · Fixed by department-of-veterans-affairs/component-library#1004
Closed
3 tasks

Fix Alert colors #2339

caw310 opened this issue Dec 14, 2023 · 6 comments · Fixed by department-of-veterans-affairs/component-library#1004
Assignees
@harshil1793
Labels
DST-engineering Issues that require work from Design System Team engineers platform-design-system-team va-alert

Comments

@caw310
Copy link
Contributor

caw310 commented Dec 14, 2023 •
edited
Loading

Description

Update colors in all Alert Banner status types

From Matt:
The info alert has 2 background colors, which you can't see until it reaches a certain width. In Figma we are using the component level tokens (vads-alert-color-background-info-on-light), which I realize adds a level of complexity because we're not yet using those in the components themselves. USWDS switched from primary-alt to info (state tokens: info, info-light, info-lighter, etc.) in Alert. We're not using those tokens yet either in the component itself. So we need to fix that so that our info Alert actually matches USWDS.

Details

Figma - Alert - https://www.figma.com/file/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?type=design&node-id=539%3A4085&mode=design&t=nDqXz5T9BrUSbxTi-1

Tasks

  • Update the info alert background colors to to match USWDS info alert

Acceptance Criteria

  • Info Alert web component matches USWDS info alert
  • Info Alert in Storybook is updated
@caw310 caw310 added platform-design-system-team va-alert DST-engineering Issues that require work from Design System Team engineers labels Dec 14, 2023
@caw310
Copy link
Contributor Author

caw310 commented Dec 14, 2023

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc

@humancompanion-usds humancompanion-usds changed the title Fix background color of the info Alert Fix Alert colors Dec 14, 2023
@humancompanion-usds
Copy link
Collaborator

In addition, the following Alert colors are incorrect:

  • Warning border should be vads-alert-color-border-warning-on-light which points to vads-color-warning (#ffbe2e)
  • Error border color should be vads-alert-color-border-error-on-light which points to vads-color-error (#d54309)
  • Success border color should be vads-alert-color-border-success-on-light which points to vads-color-success (#00a91c)

@caw310 caw310 added the Stretch Stretch goals label Dec 15, 2023
@andaleliz andaleliz mentioned this issue Dec 15, 2023
Closed
8 tasks
@harshil1793 harshil1793 self-assigned this Dec 19, 2023
@harshil1793
Copy link
Contributor

harshil1793 commented Dec 20, 2023 •
edited
Loading

@humancompanion-usds I've noticed that like info alert others doesn't match with the USWDS colors. Would you like the other alerts to be fixed as well?

@caw310
Copy link
Contributor Author

caw310 commented Dec 20, 2023

@danbrady , since you're working on Alerts, can you chime in since Matt is out?

@danbrady
Copy link
Contributor

Yeah, I think we should be updating all the colors in alert to the USWDS colors. You might want to check with @powellkerry who is working on updating the tokens/vars (#2324) which I think would be needed here?

@harshil1793
Copy link
Contributor

@danbrady, I've noticed that the tokens were already in place, and I'm able to use them.

@harshil1793 harshil1793 mentioned this issue Dec 21, 2023
Merged
13 tasks
@caw310 caw310 removed the Stretch Stretch goals label Dec 21, 2023
@mmiddaugh mmiddaugh mentioned this issue Jan 2, 2024
Closed
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@harshil1793 harshil1793

Labels
DST-engineering Issues that require work from Design System Team engineers platform-design-system-team va-alert
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

va-alert: update uswds background and border colors department-of-veterans-affairs/component-library
4 participants
@danbrady @harshil1793 @humancompanion-usds @caw310