New page: Tags

[natalia-fitzgerald]

Recently my team updated the CSS styling for the Tag component. In the past this component has only appeared as a part of the Multiselect in the Selects section. We would like create a separate page for the Tag component and add this to the CFPB Design System.

What is the standard you're documenting? Tags

What section will it live in? Components

When you're ready to share a draft of the page, or want to raise questions, use this issue to track the discussion.

@sonnakim for awareness

[natalia-fitzgerald]

Audit

As a first step, I did an audit of tag components on our website. I identified the use case for each and where on the website the specific tag type is used.

Filter tag (or display tag)

• Use case: Display tags are used to display quick and useful category labels to the user. They are often used to display categories or active filters. Filter tags have 5 possible interactive states — default, hover, focus, hover/focus, and active.
• Website implementation: Used throughout the website in filterable list multiselects, like the blog (example: https://www.consumerfinance.gov/about-us/blog/)

Contextual view	Component view

Toggle tag

• Use case: Toggle tags can be turned on and off when selected by the user. Toggle tags are always present on the interface and are often used for filtering data on the page.
• Website implementation: Used in Consumer Credit Trends data visualizations (example: https://www.consumerfinance.gov/data-research/consumer-credit-trends/auto-loans/origination-activity/)

Contextual view	Component view

Status tag (or tag label)

• Use case: Used one time as part of the archived content banner implementation
• Website implementation: Used one time as part of the archived content banner implementation (example: https://www.consumerfinance.gov/data-research/small-business-lending/filing-instructions-guide/2024-guide-archive-v1/)

Contextual view	Component view

Results

• As a first step I think it would be best to document the "Filter tag" in the CFPB Design System. This component is already built in the DS and is also in the DSR.
• The "Toggle tag" would be good to document but it is currently part of a Highcharts implementation and would therefore need to be rebuilt outside of Highcharts in order to be added to the DS. Perhaps this can be added to the DS backlog?
• The "Status tag" label has such a limited usage on the site that I question whether this should even be a DS component?

@sonnakim Does this sound like a good next step? If so I can start building out this shell page that I started: https://deploy-preview-1829--cfpb-design-system.netlify.app/design-system/components/tags

[natalia-fitzgerald]

@sonnakim Can I move forward with this update?

[jenn-franklin]

We want to document our topic tag in the DS and think adding it to this Tags page draft would work well.

I updated the draft. For some reason, the preview link isn’t working for me. If you follow the draft link and click to edit the page, you’ll be able to see the changes in edit mode. And here’s a screenshot.

@anselmbradford feel free to add the topic tag code when you’re ready.

Any feedback? @sonnakim @natalia-fitzgerald @anselmbradford

Side note: I’m not sure what’s going on with the “undefined” jump link at the top...

[anselmbradford]

feel free to add the topic tag code when you’re ready.

Let's do that in a separate PR.

Side note: I’m not sure what’s going on with the “undefined” jump link at the top...

Yea :\ there's an open issue for that https://github.com/cfpb/design-system/issues/1496

[sonnakim]

Looks good to me 👍 thanks @jenn-franklin !

[jenn-franklin]

Thanks! I've published the page and added it to the side nav: https://cfpb.github.io/design-system/components/tags

@anselmbradford Ready for you to add the topic tag code. Also, would you mind checking out the filter tag code? It's looking funky.

[jenn-franklin]

This is live: https://cfpb.github.io/design-system/components/tags