Add Alert status variant to StateLabel component

[Copilot]

Summary

This PR adds a third variant named "Alert status" to the StateLabel component, alongside the existing "Issue status" and "Pull request status" variants.

Changes Made

Component Updates

• StateLabel.tsx: Added imports for Shield icons and added three new alert statuses:
  • alertOpened: ShieldIcon with 'Alert' label
  • alertFixed: ShieldCheckIcon with 'Alert' label
  • alertDismissed: ShieldSlashIcon with 'Alert' label

Styling

• StateLabel.module.css: Added CSS styles following the same pattern as existing statuses:
  • alertOpened: open-emphasis colors (green) - same as issueOpened and pullOpened
  • alertFixed: done-emphasis colors (purple) - same as issueClosed and pullClosed
  • alertDismissed: draft-emphasis colors (gray) - same as issueDraft

Documentation & Stories

• StateLabel.features.stories.tsx: Added three new stories (AlertOpened, AlertFixed, AlertDismissed)
• StateLabel.docs.json: Updated with new story IDs and alert statuses in type definition

Tests

• StateLabel.test.tsx: Added test cases for all three alert statuses and updated snapshots

Changeset

• .changeset/brave-panthers-wave.md: Added changeset for minor version bump

Visual Examples

Opened	Fixed	Dismissed

Usage

<StateLabel status="alertOpened">Open</StateLabel>
<StateLabel status="alertFixed">Fixed</StateLabel>
<StateLabel status="alertDismissed">Dismissed</StateLabel>

Validation

• ✅ Build successful
• ✅ All tests passing (9/9 tests including new alert tests)
• ✅ Type checking passed
• ✅ Linting passed (ESLint & Stylelint)
• ✅ Code review completed
• ✅ Security scan passed (0 vulnerabilities)
• ✅ Manual verification in Storybook completed
• ✅ Changeset added

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[changeset-bot]

🦋 Changeset detected

Latest commit: dbd9dcf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/11655

[primer-integration]

Integration test results from github/github-ui:

  CI Passed
  VRT Passed
  Projects Passed

All checks passed!

[Copilot]

Pull request overview

This PR adds a new "Alert status" variant to the StateLabel component with three distinct alert states: opened, fixed, and dismissed. The changes introduce shield-based icons to visually represent security alert states alongside the existing issue and pull request status variants.

Changes:

• Added three new alert status types (alertOpened, alertFixed, alertDismissed) with corresponding shield icons (ShieldIcon, ShieldCheckIcon, ShieldSlashIcon)
• Implemented CSS styling that reuses existing design tokens for consistency (open-emphasis for opened, done-emphasis for fixed, draft-emphasis for dismissed)
• Updated component documentation, tests, and Storybook stories to include the new alert variants

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/react/src/StateLabel/StateLabel.tsx	Added shield icon imports and mapped three new alert statuses to icons and aria labels
packages/react/src/StateLabel/StateLabel.module.css	Added CSS rules for the three alert status variants using existing color tokens
packages/react/src/StateLabel/tests/StateLabel.test.tsx	Added snapshot tests and accessibility tests for all three alert statuses
packages/react/src/StateLabel/tests/snapshots/StateLabel.test.tsx.snap	Generated snapshots for the three new alert status renders
packages/react/src/StateLabel/StateLabel.features.stories.tsx	Added three new Storybook stories demonstrating each alert status
packages/react/src/StateLabel/StateLabel.docs.json	Updated documentation with new story IDs and added alert statuses to the type definition
.changeset/brave-panthers-wave.md	Added changeset documenting the minor version bump for the new feature