diff --git a/.changeset/nine-apes-change.md b/.changeset/nine-apes-change.md new file mode 100644 index 00000000000..c34471c10ed --- /dev/null +++ b/.changeset/nine-apes-change.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +StateLabel: Add open and closed states for no icon cases diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-colorblind-linux.png new file mode 100644 index 00000000000..d66700ef6bd Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-dimmed-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-dimmed-linux.png new file mode 100644 index 00000000000..58841130c3d Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-high-contrast-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-high-contrast-linux.png new file mode 100644 index 00000000000..cf7bd6ef5e9 Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-linux.png new file mode 100644 index 00000000000..d66700ef6bd Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-tritanopia-linux.png new file mode 100644 index 00000000000..d66700ef6bd Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-light-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-light-colorblind-linux.png new file mode 100644 index 00000000000..28974dea315 Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-light-high-contrast-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-light-high-contrast-linux.png new file mode 100644 index 00000000000..610a309c3f8 Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-light-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-light-linux.png new file mode 100644 index 00000000000..28974dea315 Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-light-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-light-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-light-tritanopia-linux.png new file mode 100644 index 00000000000..28974dea315 Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Closed-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-colorblind-linux.png new file mode 100644 index 00000000000..b18a7d0ff3e Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-dimmed-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-dimmed-linux.png new file mode 100644 index 00000000000..23c372c5d9f Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-high-contrast-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ca0dc443723 Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-linux.png new file mode 100644 index 00000000000..71bbf30a0c7 Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-tritanopia-linux.png new file mode 100644 index 00000000000..50ceccdda14 Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-light-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-light-colorblind-linux.png new file mode 100644 index 00000000000..95aaa6af893 Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-light-high-contrast-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-light-high-contrast-linux.png new file mode 100644 index 00000000000..5e91409d876 Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-light-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-light-linux.png new file mode 100644 index 00000000000..90e5c9691d5 Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-light-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-light-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-light-tritanopia-linux.png new file mode 100644 index 00000000000..a65ba6d3679 Binary files /dev/null and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Open-light-tritanopia-linux.png differ diff --git a/e2e/components/StateLabel.test.ts b/e2e/components/StateLabel.test.ts index 71499af2b61..af14bd7caf6 100644 --- a/e2e/components/StateLabel.test.ts +++ b/e2e/components/StateLabel.test.ts @@ -182,4 +182,40 @@ test.describe('StateLabel', () => { }) } }) + + test.describe('Open', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-statelabel-features--open', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`StateLabel.Open.${theme}.png`) + }) + }) + } + }) + + test.describe('Closed', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-statelabel-features--closed', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`StateLabel.Closed.${theme}.png`) + }) + }) + } + }) }) diff --git a/e2e/matchers/toHaveNoViolations.ts b/e2e/matchers/toHaveNoViolations.ts index eab524f44aa..754ad8c6cc4 100644 --- a/e2e/matchers/toHaveNoViolations.ts +++ b/e2e/matchers/toHaveNoViolations.ts @@ -23,6 +23,7 @@ const COLOR_CONTRAST_SKIP = [ 'components-statelabel-features--issue-opened', 'components-statelabel-features--pull-opened', 'components-statelabel-features--small', + 'components-statelabel-features--open', 'deprecated-components-actionlist--complex-list-inset-variant-story', // Deprecated component 'deprecated-components-actionlist--complex-list-full-variant-story', // Deprecated component ] diff --git a/packages/react/src/StateLabel/StateLabel.docs.json b/packages/react/src/StateLabel/StateLabel.docs.json index fa1025478d0..f860af91b12 100644 --- a/packages/react/src/StateLabel/StateLabel.docs.json +++ b/packages/react/src/StateLabel/StateLabel.docs.json @@ -39,6 +39,12 @@ }, { "id": "components-statelabel-features--small" + }, + { + "id": "components-statelabel-features--open" + }, + { + "id": "components-statelabel-features--closed" } ], "importPath": "@primer/react", @@ -50,7 +56,7 @@ }, { "name": "status", - "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'unavailable'", + "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'unavailable' | 'open' | 'closed'", "required": true }, { diff --git a/packages/react/src/StateLabel/StateLabel.features.stories.tsx b/packages/react/src/StateLabel/StateLabel.features.stories.tsx index f7606086b73..39216cee1e9 100644 --- a/packages/react/src/StateLabel/StateLabel.features.stories.tsx +++ b/packages/react/src/StateLabel/StateLabel.features.stories.tsx @@ -2,6 +2,7 @@ import React from 'react' import type {Meta} from '@storybook/react' import type {ComponentProps} from '../utils/types' import StateLabel from './StateLabel' +import VisuallyHidden from '../_VisuallyHidden' export default { title: 'Components/StateLabel/Features', @@ -19,6 +20,14 @@ export const PullMerged = () => Merged Queued export const Draft = () => Draft export const Unavailable = () => Unavailable +export const Open = () => ( + + {/* Because open is a generic status, a visually hidden text could be added to specify the type of the artifact */} + Milestone + Open + +) +export const Closed = () => Closed export const Small = () => ( diff --git a/packages/react/src/StateLabel/StateLabel.tsx b/packages/react/src/StateLabel/StateLabel.tsx index f038fe1151e..05a11c7e344 100644 --- a/packages/react/src/StateLabel/StateLabel.tsx +++ b/packages/react/src/StateLabel/StateLabel.tsx @@ -31,6 +31,8 @@ const octiconMap = { issueDraft: IssueDraftIcon, pullQueued: GitMergeQueueIcon, unavailable: AlertIcon, + open: null, + closed: null, } const labelMap: Record = { @@ -44,6 +46,8 @@ const labelMap: Record function StateLabel({children, status, variant: variantProp = 'normal', ...rest}: StateLabelProps) { const octiconProps = variantProp === 'small' ? {width: '1em'} : {} + // Open and closed statuses, we don't want to show an icon + const noIconStatus = status === 'open' || status === 'closed' return ( {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */} - {status && ( + {status && !noIconStatus && ( { expect(screen2.getByLabelText('Pull request')).toBeInTheDocument() // svg expect(screen2.getByText('Merged')).toBeInTheDocument() // text }) + it('renders open status without an icon', () => { + const screen = HTMLRender(Open) + expect(screen.queryByRole('img')).not.toBeInTheDocument() // svg + expect(screen.getByText('Open')).toBeInTheDocument() // text + }) + it('renders closed status without an icon', () => { + const screen = HTMLRender(Closed) + expect(screen.queryByRole('img')).not.toBeInTheDocument() // svg + expect(screen.getByText('Closed')).toBeInTheDocument() // text + }) }) diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 8405ba30bd8..73ed1696fcc 100755 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -1200,6 +1200,14 @@ const components = new Map([ id: 'components-statelabel-features--small', name: 'Small', }, + { + id: 'components-statelabel-features--open', + name: 'Open', + }, + { + id: 'components-statelabel-features--closed', + name: 'Closed', + }, ], }, ],