natalia-fitzgerald
commented
10 months ago 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
jenn-franklin
anselmbradford
sonnakim
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