UISeeds - Tag Component

[slowbot]

Description

Transfer the Tag component from UIC to Seeds

Links

Eng Audit Zero height Docs

Additional Details

• We are removing uppercase styles
• We are scoping down variants and making the pill size the default
• We are reducing down to two sizes, md and lg
• We are making lighter bg colors defaults and shifting darker colors to inverse variants
• Adding an icon left and right option

Acceptance Criteria

Figma Design Spec

QA review/instructions

[jaredcwhite]

For the "in process" tag variant, should it be referencing the yellow color values directly, or use the warn/warn-light colors?

[jaredcwhite]

Is there no "squarer" option then? It's only the pill shape?

[emilyjablonski]

+1 to "squarer" option, and also that I'm not seeing the version of this with larger padding like we have in the listing form and want to ensure that is intentional?

Also noting that it looks like this component might have a dependency on Tooltip from the best practices docs

• "The ARIA label for a tag should align with the visible label text on the tag." - I don't think we need an aria label in this case - what would it include that isn't in the text content?

[slowbot]

• we have intentionally removed the squared option and additional padding, hoping this could be handled with theming. We felt the other style too closely resembled the Button component

[jaredcwhite]

Maybe we should review recommendations here and also on Message so it's clear when to use one vs. the other. Either one could potentially be used to indicate the "status" of something…

[slowbot]

@emilyjablonski

There is a use case where we want the tag to represent "status", and in those instances, we found that it's recommended that they support aria-live

"When tags are used to call out new content that is dynamically loaded onto a page, be sure to use ARIA live regions to alert screen readers of the change." https://designsystem.digital.gov/components/tag/

Can push this to a v2 and handle the uptake of specific use cases if that's better.

[jaredcwhite]

@slowbot Wouldn't an alert or toast be better suited for live updates? I can't really conceive of a tag conveying anything time-sensitive or in response to an action

[emilyjablonski]

^ +1, we also don't currently have any use cases of dynamic tags that load onto a page

[slowbot]

I trust you both. It seems that we have tag components in Partners that signify draft and published states for a listing. Was thinking they could use some form of labeling. Can always push on this until it comes up again.

[slowbot]

@jaredcwhite

"For the "in process" tag variant, should it be referencing the yellow color values directly, or use the warn/warn-light colors?"

This is a good question. I think we thought linking to yellow directly would be better for this use case but could be convinced otherwise.

[jaredcwhite]

@slowbot For the "Highlight Warm/Cool" options, is there the possibility of calling them "Accent Warm/Cool"? I'm just curious why the naming discrepancy on the tag variants vs. color tokens.

[jaredcwhite]

Will go update zeroheight for this one as well as Button.

[slowbot]

@jaredcwhite We can talk about it. I think there was a mixed proposal of removing the "accent" name everywhere and moving to "highlight" for token and variants

[jaredcwhite]

@slowbot Cool. Also I'm noticing now the Tooltip example in zeroheight…we don't have any tooltip component currently, so wondering if we should remove that for now.

[slowbot]

Yeah it was a use case in Detroit but we can remove for now. @jaredcwhite

[slowbot]

@jaredcwhite Should we create a new ticket for updating token names from accent to highlight?

[slowbot]

Closing and creating a new ticket for highlight naming story https://github.com/bloom-housing/ui-seeds/issues/60