Skip to content
This repository is currently being migrated. It's locked while the migration is in progress.

<va-tag>: Add new web component#1808

Draft
RyanMunsch wants to merge 5 commits into
mainfrom
3848-va-tag
Draft

<va-tag>: Add new web component#1808
RyanMunsch wants to merge 5 commits into
mainfrom
3848-va-tag

Conversation

@RyanMunsch
Copy link
Copy Markdown
Contributor

@RyanMunsch RyanMunsch commented Oct 9, 2025

Chromatic

https://3848-va-tag--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

  • Adds new web component: <va-tag>
    • Replaces existing stories for "Tag" (version using utility class from CSS Library/USWDS) with a proper web component.
    • Also removes obsolete code related to previous Tag version.

Note With <va-tag> added, we should plan deprecation warning for the .usa-label utility class that was used for previous, non-web component version.

Related tickets and links

Closes department-of-veterans-affairs/vets-design-system-documentation#4009

Screenshots

Testing and review

Approvals

See the QA Checklists section below for suggested approvals. Use your best judgment if additional reviews are needed. When in doubt, request a review.

Approval groups

Add approval groups to the PR as needed:

QA checklists

Use the QA checklists below as guides, not rules. Not all checklists will apply to every PR but there could be some overlap.

In all scenarios, changes should be fully tested by the author and verified by the reviewer(s); functionality, responsiveness, etc.

✨ New Component Added
  • The PR has the minor label
  • The component matches the Figma designs.
  • All properties, custom events, and utility functions have e2e and/or unit tests
  • A new Storybook page has been added for the component
  • Tested in all VA breakpoints.
  • Chromatic UI Tests have run and snapshot changes have been accepted by the design reviewer
  • Tested in vets-website using Verdaccio
  • Engineering has approved the PR
  • Design has approved the PR
  • Accessibility has approved the PR
🌱 New Component Variation Added
  • The PR has the minor label
  • The variation matches its Figma design.
  • Any new properties, custom events, or utility functions have e2e and/or unit tests
  • A new story has been added to the component's existing Storybook page
  • Any Chromatic UI snapshot changes have been accepted by a design reviewer
  • Tested in vets-website using Verdaccio
  • Engineering has approved the PR
  • Design has approved the PR
🐞 Component Fix
  • The PR has the patch label
  • Any new properties, custom events, or utility functions have e2e and/or unit tests
  • Any markup changes are evaluated for impact on vets-website.
    • Will any vets-website tests fail from the change?
  • Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
  • Engineering has approved the PR
♿️ Component Fix - Accessibility
  • The PR has the patch label
  • Any new properties, custom events, or utility functions have e2e and/or unit tests
  • Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
  • Engineering has approved the PR
  • Accessibility has approved the PR
🚨 Component Fix - Breaking API Change
  • The PR has the major label
  • vets-website and content-build have been evaluated to determine the impact of the breaking change
  • Any new properties, custom events, or utility functions have e2e and/or unit tests
  • Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
  • Tested in vets-website using Verdaccio
  • Engineering has approved the PR
🔧 Component Update - Non-Breaking API Change
  • The PR has the minor label
  • Any new properties, custom events, or utility functions have e2e and/or unit tests
  • Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
  • Engineering has approved the PR
📖 Storybook Update
  • The PR has the ignore-for-release label
  • Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
  • Engineering has approved the PR
🎨 CSS-Library Update
  • The PR has the css-library label
  • vets-website and content-build have been checked to determine the impact of any breaking changes
  • Engineering has approved the PR

@RyanMunsch RyanMunsch added the minor For a minor Semantic Version change label Oct 9, 2025
@RyanMunsch RyanMunsch marked this pull request as ready for review October 9, 2025 20:01
@RyanMunsch RyanMunsch requested a review from a team as a code owner October 9, 2025 20:01
@RyanMunsch RyanMunsch requested review from a team October 9, 2025 20:07
Comment thread packages/web-components/src/components/va-tag/va-tag.scss Outdated
Comment thread packages/web-components/src/components/va-tag/va-tag.scss Outdated
Comment thread packages/web-components/src/components/va-tag/va-tag.tsx Outdated
guidanceHref: 'tag',
guidanceName: 'Tag',
maturityCategory: USE,
maturityLevel: DEPLOYED,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need to understand our deprecation process for this before removing it. It might be better to start with adding it to the deprecated section. There will ideally be some communication around this as well.

Screenshot 2025-10-10 at 9 02 26 AM

@RyanMunsch
Copy link
Copy Markdown
Contributor Author

Thanks, @jamigibbs. I forgot to cherry pick the two commits based on your feedback in the other PR 🤡. Those should be good now.

Good call on not removing the outgoing USWDS version. I restored and updated that story so that it's grouped with the rest of the deprecated components.

@RyanMunsch RyanMunsch requested a review from jamigibbs October 10, 2025 15:15
@RyanMunsch RyanMunsch marked this pull request as draft October 10, 2025 18:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

minor For a minor Semantic Version change

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CSS-Library - Replace .usa-label with .usa-tag

3 participants