StateLabel: Add `open` and `closed` states for no icon cases #5803

broccolinisoup · 2025-03-21T04:36:05Z

For milestone open and closes states, we need a variant of the StateLabel without an icon. After talking (GitHub staff only link) with @mperrotti and @emilybrick, they gave me a 👍🏻 to add two new states open and closed for cases that do not need/have an icon.

Changelog

New

Add open state
Add closed state

Changed

Removed

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-03-21T04:36:09Z

🦋 Changeset detected

Latest commit: 65160e3

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 · 2025-03-21T04:36:37Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-03-21T04:39:31Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	105.65 KB (+0.09% 🔺)
packages/react/dist/browser.umd.js	105.92 KB (-0.01% 🔽)

.changeset/nine-apes-change.md

broccolinisoup · 2025-03-21T04:41:10Z

packages/react/src/StateLabel/StateLabel.features.stories.tsx

@@ -19,6 +20,14 @@ export const PullMerged = () => <StateLabel status="pullMerged">Merged</StateLab
 export const Queued = () => <StateLabel status="pullQueued">Queued</StateLabel>
 export const Draft = () => <StateLabel status="draft">Draft</StateLabel>
 export const Unavailable = () => <StateLabel status="unavailable">Unavailable</StateLabel>
+export const Open = () => (
+  <StateLabel status="open">
+    {/* Because open is a generic status, a visually hidden text could be added to specify the type of the artifact */}


This is optional - I am happy to remove it if you think it is unnecessary or confusing.

joshblack · 2025-03-21T14:36:35Z

@broccolinisoup seems like the AAT failures are coming from color contrast: https://primer-d5758f4231-13348165.drafts.github.io/aat-no-flag/#?testId=9a7338b81aa38bfd83ad-792f1d5d04241e89b7e1&q=s:failed 👀

broccolinisoup · 2025-03-25T10:10:39Z

@broccolinisoup seems like the AAT failures are coming from color contrast: https://primer-d5758f4231-13348165.drafts.github.io/aat-no-flag/#?testId=9a7338b81aa38bfd83ad-792f1d5d04241e89b7e1&q=s:failed 👀

Thanks @joshblack !! I added the "open" story to color contrast skip list.

joshblack · 2025-03-25T15:02:56Z

@broccolinisoup just wanted to double-check, is that story expected to fail contrast checks?

broccolinisoup · 2025-03-27T02:50:43Z

@broccolinisoup just wanted to double-check, is that story expected to fail contrast checks?

@joshblack I believe so—at least if the issueOpened variant is still expected to fail the contrast check. The new open status uses the same colors as issueOpened, just without an icon. Let me know if I’m missing anything.

broccolinisoup added 2 commits March 21, 2025 12:17

Add open and closed states to StateLabel component

aad2479

Docs and e2e test update

a2b75d1

github-actions bot added the staff Author is a staff member label Mar 21, 2025

broccolinisoup changed the title ~~StateLabel: Add open and closed states for no icon cases~~ StateLabel: Add open and closed states for no icon cases Mar 21, 2025

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 Mar 21, 2025

Create nine-apes-change.md

f7e9174

broccolinisoup commented Mar 21, 2025

View reviewed changes

.changeset/nine-apes-change.md Outdated Show resolved Hide resolved

Update .changeset/nine-apes-change.md

b267ca3

github-actions bot requested a deployment to storybook-preview-5803 March 21, 2025 04:40 Abandoned

broccolinisoup commented Mar 21, 2025

View reviewed changes

broccolinisoup added the update snapshots label Mar 21, 2025

broccolinisoup deployed to github-pages March 21, 2025 04:54 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5803 March 21, 2025 04:54 Inactive

test(vrt): update snapshots

9982edf

github-actions bot removed the update snapshots label Mar 21, 2025

broccolinisoup marked this pull request as ready for review March 21, 2025 05:07

broccolinisoup requested review from a team as code owners March 21, 2025 05:07

broccolinisoup requested review from emilybrick and joshblack March 21, 2025 05:07

primer bot deployed to github-pages March 21, 2025 05:10 View deployment

github-actions bot temporarily deployed to storybook-preview-5803 March 21, 2025 05:10 Inactive

primer bot deployed to github-pages March 21, 2025 06:10 View deployment

github-actions bot temporarily deployed to storybook-preview-5803 March 21, 2025 06:10 Inactive

joshblack approved these changes Mar 21, 2025

View reviewed changes

add stories to color contrast skip list

464495d

closed state is fine - no need to remove

06d4d12

broccolinisoup enabled auto-merge March 25, 2025 10:10

github-actions bot requested a deployment to storybook-preview-5803 March 25, 2025 10:13 Abandoned

broccolinisoup added this pull request to the merge queue Mar 25, 2025

broccolinisoup deployed to github-pages March 25, 2025 10:28 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5803 March 25, 2025 10:28 Inactive

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Mar 25, 2025

Merge branch 'main' into broccolinisoup/state-label-open-closed

65160e3

broccolinisoup deployed to github-pages March 27, 2025 02:58 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-5803 March 27, 2025 02:58 View deployment

joshblack added this pull request to the merge queue Mar 31, 2025

Merged via the queue into main with commit 9c135c4 Mar 31, 2025
44 checks passed

joshblack deleted the broccolinisoup/state-label-open-closed branch March 31, 2025 17:08

primer bot mentioned this pull request Mar 31, 2025

Release tracking (37.18.0) #5834

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

StateLabel: Add `open` and `closed` states for no icon cases #5803

StateLabel: Add `open` and `closed` states for no icon cases #5803

Uh oh!

broccolinisoup commented Mar 21, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 21, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 21, 2025

Uh oh!

github-actions bot commented Mar 21, 2025 •

edited

Loading

Uh oh!

Uh oh!

broccolinisoup Mar 21, 2025

Uh oh!

joshblack commented Mar 21, 2025

Uh oh!

broccolinisoup commented Mar 25, 2025

Uh oh!

Uh oh!

joshblack commented Mar 25, 2025

Uh oh!

broccolinisoup commented Mar 27, 2025

Uh oh!

Uh oh!

Uh oh!

StateLabel: Add open and closed states for no icon cases #5803

StateLabel: Add open and closed states for no icon cases #5803

Uh oh!

Conversation

broccolinisoup commented Mar 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Mar 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Mar 21, 2025

Uh oh!

github-actions bot commented Mar 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Uh oh!

broccolinisoup Mar 21, 2025

Choose a reason for hiding this comment

Uh oh!

joshblack commented Mar 21, 2025

Uh oh!

broccolinisoup commented Mar 25, 2025

Uh oh!

Uh oh!

joshblack commented Mar 25, 2025

Uh oh!

broccolinisoup commented Mar 27, 2025

Uh oh!

Uh oh!

Uh oh!

StateLabel: Add `open` and `closed` states for no icon cases #5803

StateLabel: Add `open` and `closed` states for no icon cases #5803

broccolinisoup commented Mar 21, 2025 •

edited

Loading

changeset-bot bot commented Mar 21, 2025 •

edited

Loading

github-actions bot commented Mar 21, 2025 •

edited

Loading