department-of-veterans-affairs / vets-design-system-documentation

Repository for design.va.gov website

https://design.va.gov

36 stars 55 forks source link

Tag component should use USWDS v3 background color #2361

Closed humancompanion-usds closed 2 weeks ago

humancompanion-usds commented 5 months ago

Bug Report

[x] I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

In both Figma and in Storybook the Tag component background-color gray does not match the USWDS v3 color.

USWDS v3: #5c5c5c or gray-60
Storybook: #5b616b
Figma: #565c65 or vads-color-gray

What I expected to happen

I expect us to align on the USWDS v3 color and update the component in Figma and Storybook appropriately.

Urgency

How urgent is this request? Please select the approriate option below and/or provide details

[ ] This bug is blocking work currently in progress
[ ] This bug is affecting work currently in progress but we have a workaround
[ ] This bug is blocking work planned within the next few sprints
[x] This bug is not blocking any work
[ ] Other

Details

I think we just overlooked that this component should be aligned with USWDSv3. Dan or Lucas should have a look to be sure that the entire component is synced with the USWDS version. Look at padding, border radius, font-size, line-height, etc.

caw310 commented 4 months ago

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

Andrew565 commented 4 months ago

I'll tackle the developer side of the equation.

Andrew565 commented 4 months ago

Confirmed that this is already fixed in storybook as of today, turning back over to designers.

danbrady commented 4 months ago

This will probably need more research but here's what I've discovered so far:

In Figma, our Tag component background uses vads-color-gray variable which maps to uswds-system-color-gray-cool-60 which is #565c65. This is how vads-color-gray is specified in Airtable.
If you look at the code for the USWDS Tag component, it's background color uses base-dark token which maps to theme-color-base-dark which also renders to #565c65. (Link to USWDS tokens).
However, if you inspect the USDWS tag on their doc site, you'll see the background color is coming through as #5c5c5c! I believe their doc site is using an older color theme (shows 2.0.0 Beta 6 in header comments).

danbrady commented 4 weeks ago

@humancompanion-usds Since we're modifiying this component in design and code, do we want to bring in USWDS Big tag variation as well?

humancompanion-usds commented 1 week ago

@danbrady - We don't have a use case for Big tag yet. We could put it on the backlog but it isn't a priority.