Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Jan 24, 2026

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
Alert Opened Alert Fixed Alert 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
Copy link

changeset-bot bot commented Jan 24, 2026

🦋 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

Copilot AI and others added 2 commits January 24, 2026 22:00
Co-authored-by: HiroAgustin <1458873+HiroAgustin@users.noreply.github.com>
Co-authored-by: HiroAgustin <1458873+HiroAgustin@users.noreply.github.com>
Copilot AI changed the title [WIP] Update StateLabel component to include Alert status variant Add Alert status variant to StateLabel component Jan 24, 2026
Copilot AI requested a review from HiroAgustin January 24, 2026 22:09
@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jan 25, 2026
@github-actions
Copy link
Contributor

👋 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.

Co-authored-by: HiroAgustin <1458873+HiroAgustin@users.noreply.github.com>
@primer-integration
Copy link

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

@primer-integration
Copy link

Integration test results from github/github-ui:

Passed  CI   Passed
Passed  VRT   Passed
Passed  Projects   Passed

All checks passed!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants