refactor(IssueLabel): update types, tests, and stories for usage

.changeset/dry-chairs-start.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update IssueLabel component types to support custom content through `children` and support the `as` prop

e2e/components/IssueLabel.test.ts

@@ -1,4 +1,4 @@
-import {test, expect} from '@playwright/test'
+import {test, expect, type Page} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
@@ -86,10 +86,16 @@ const stories = [
   {
     title: 'Button',
     id: 'experimental-components-issuelabel-features--as-button',
+    async interact(page: Page) {
+      await page.getByRole('button', {name: 'Issue label'}).hover()
+    },
   },
   {
     title: 'Link',
     id: 'experimental-components-issuelabel-features--as-link',
+    async interact(page: Page) {
+      await page.getByRole('link', {name: 'Issue label'}).hover()
+    },
   },
   {
     title: 'Group Of Labels',
@@ -120,7 +126,12 @@ test.describe('IssueLabel', () => {
             })
 
             // Default state
-            await expect(page).toHaveScreenshot(`IssueLabel.${story.title}.${theme}.png`)
+            await expect(page.locator('body')).toHaveScreenshot(`IssueLabel.${story.title}.${theme}.png`)
+
+            if ('interact' in story) {
+              await story.interact(page)
+              await expect(page.locator('body')).toHaveScreenshot(`IssueLabel.interactions.${story.title}.${theme}.png`)
+            }
           })
         })
       }

packages/react/jest.config.js

@@ -40,8 +40,8 @@ module.exports = {
     '<rootDir>/src/NavList/',
     '<rootDir>/src/Octicon/',
     '<rootDir>/src/Overlay/',
-    '<rootDir>/src/Pagehead/',
     '<rootDir>/src/PageLayout/',
+    '<rootDir>/src/Pagehead/',
     '<rootDir>/src/Pagination/',
     '<rootDir>/src/ProgressBar/',
     '<rootDir>/src/Radio/',
@@ -51,8 +51,8 @@ module.exports = {
     '<rootDir>/src/SegmentedControl/',
     '<rootDir>/src/Select/',
     '<rootDir>/src/Skeleton/',
-    '<rootDir>/src/SkeletonText/',
     '<rootDir>/src/SkeletonAvatar/',
+    '<rootDir>/src/SkeletonText/',
     '<rootDir>/src/Spinner/',
     '<rootDir>/src/SplitPageLayout/',
     '<rootDir>/src/Stack/',
@@ -80,6 +80,7 @@ module.exports = {
     '<rootDir>/src/__tests__/theme.test.ts',
     '<rootDir>/src/__tests__/themeGet.test.ts',
     '<rootDir>/src/__tests__/useSafeTimeout.test.ts',
+    '<rootDir>/src/experimental/IssueLabel',
     '<rootDir>/src/hooks/',
     '<rootDir>/src/internal/utils/',
     '<rootDir>/src/live-region/',

packages/react/src/experimental/IssueLabel/IssueLabel.docs.json

@@ -1,11 +1,21 @@
 {
   "id": "issue_label",
   "name": "IssueLabel",
-  "status": "draft",
+  "status": "alpha",
   "a11yReviewed": false,
   "stories": [],
   "importPath": "@primer/react/experimental",
   "props": [
+    {
+      "name": "as",
+      "type": "React.ElementType",
+      "description": "The HTML element or React component to render as the root element"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "description": "Class name for custom styling"
+    },
     {
       "name": "fillColor",
       "type": "string",
@@ -16,31 +26,18 @@
       "type": "'pink'\n| 'plum'\n| 'purple'\n| 'indigo'\n| 'blue'\n| 'cyan'\n| 'teal'\n| 'pine'\n| 'green'\n| 'lime'\n| 'olive'\n| 'lemon'\n| 'yellow'\n| 'orange'\n| 'red'\n| 'coral'\n| 'gray'\n| 'brown'\n| 'auburn'",
       "defaultValue": "'gray'",
       "description": "Color variant for the background and text color"
-    },
-    {
-      "name": "className",
-      "type": "string",
-      "description": "Class name for custom styling."
-    },
+    }
+  ],
+  "subcomponents": [],
+  "stories": [
     {
-      "name": "href",
-      "type": "string"
+      "id": "experimental-components-issuelabel--default"
     },
     {
-      "name": "as",
-      "type": "React.ElementType",
-      "defaultValue": "'span'"
+      "id": "experimental-components-issuelabel-features--group-of-labels"
     },
     {
-      "name": "text",
-      "type": "string",
-      "description": "Label text."
-    },
-    {
-      "name": "id",
-      "type": "string",
-      "description": "A unique identifier that can be associated with the label."
+      "id": "experimental-components-issuelabel-features--hex-color"
     }
-  ],
-  "subcomponents": []
+  ]
 }

packages/react/src/experimental/IssueLabel/IssueLabel.features.stories.tsx

@@ -1,6 +1,7 @@
 import {IssueLabel} from '../IssueLabel'
 import type {Meta} from '@storybook/react-vite'
 import {Stack} from '../../Stack'
+import {action} from 'storybook/internal/actions'
 
 const meta = {
   title: 'Experimental/Components/IssueLabel/Features',
@@ -9,54 +10,55 @@ const meta = {
 
 export default meta
 
-export const VariantPink = () => <IssueLabel variant="pink" text="Issue label" />
+export const VariantPink = () => <IssueLabel variant="pink">Issue label</IssueLabel>
 
-export const VariantPlum = () => <IssueLabel variant="plum" text="Issue label" />
+export const VariantPlum = () => <IssueLabel variant="plum">Issue label</IssueLabel>
 
-export const VariantPurple = () => <IssueLabel variant="purple" text="Issue label" />
+export const VariantPurple = () => <IssueLabel variant="purple">Issue label</IssueLabel>
 
-export const VariantIndigo = () => <IssueLabel variant="indigo" text="Issue label" />
+export const VariantIndigo = () => <IssueLabel variant="indigo">Issue label</IssueLabel>
 
-export const VariantBlue = () => <IssueLabel variant="blue" text="Issue label" />
+export const VariantBlue = () => <IssueLabel variant="blue">Issue label</IssueLabel>
 
-export const VariantCyan = () => <IssueLabel variant="cyan" text="Issue label" />
+export const VariantCyan = () => <IssueLabel variant="cyan">Issue label</IssueLabel>
 
-export const VariantTeal = () => <IssueLabel variant="teal" text="Issue label" />
+export const VariantTeal = () => <IssueLabel variant="teal">Issue label</IssueLabel>
 
-export const VariantPine = () => <IssueLabel variant="pine" text="Issue label" />
+export const VariantPine = () => <IssueLabel variant="pine">Issue label</IssueLabel>
 
-export const VariantGreen = () => <IssueLabel variant="green" text="Issue label" />
+export const VariantGreen = () => <IssueLabel variant="green">Issue label</IssueLabel>
 
-export const VariantLime = () => <IssueLabel variant="lime" text="Issue label" />
+export const VariantLime = () => <IssueLabel variant="lime">Issue label</IssueLabel>
 
-export const VariantOlive = () => <IssueLabel variant="olive" text="Issue label" />
+export const VariantOlive = () => <IssueLabel variant="olive">Issue label</IssueLabel>
 
-export const VariantLemon = () => <IssueLabel variant="lemon" text="Issue label" />
+export const VariantLemon = () => <IssueLabel variant="lemon">Issue label</IssueLabel>
 
-export const VariantYellow = () => <IssueLabel variant="yellow" text="Issue label" />
+export const VariantYellow = () => <IssueLabel variant="yellow">Issue label</IssueLabel>
 
-export const VariantOrange = () => <IssueLabel variant="orange" text="Issue label" />
+export const VariantOrange = () => <IssueLabel variant="orange">Issue label</IssueLabel>
 
-export const VariantRed = () => <IssueLabel variant="red" text="Issue label" />
+export const VariantRed = () => <IssueLabel variant="red">Issue label</IssueLabel>
 
-export const VariantCoral = () => <IssueLabel variant="coral" text="Issue label" />
+export const VariantCoral = () => <IssueLabel variant="coral">Issue label</IssueLabel>
 
-export const VariantGray = () => <IssueLabel variant="gray" text="Issue label" />
+export const VariantGray = () => <IssueLabel variant="gray">Issue label</IssueLabel>
 
-export const VariantBrown = () => <IssueLabel variant="brown" text="Issue label" />
+export const VariantBrown = () => <IssueLabel variant="brown">Issue label</IssueLabel>
 
-export const VariantAuburn = () => <IssueLabel variant="auburn" text="Issue label" />
+export const VariantAuburn = () => <IssueLabel variant="auburn">Issue label</IssueLabel>
+
+export const HexColor = (args: {fillColor: `#${string}`}) => {
+  return <IssueLabel fillColor={args.fillColor}>Issue label</IssueLabel>
+}
 
-export const HexColor = (args: {fillColor: `#${string}`}) => (
-  <IssueLabel text="Issue label" fillColor={args.fillColor} />
-)
 HexColor.args = {
   fillColor: '#59B200',
 }
 HexColor.argTypes = {
   fillColor: {control: {type: 'color'}},
   variant: {table: {disable: true}},
-  text: {table: {disable: true}},
+  children: {table: {disable: true}},
   id: {table: {disable: true}},
   className: {table: {disable: true}},
   onClick: {table: {disable: true}},
@@ -65,19 +67,17 @@ HexColor.argTypes = {
   href: {table: {disable: true}},
 }
 
-export const AsLink = () => <IssueLabel href="/" text="Issue label" />
-
-export const AsButton = () => <IssueLabel text="Issue label" as="button" />
+export const AsLink = () => <IssueLabel href="/">Issue label</IssueLabel>
 
-export const OnClick = () => <IssueLabel text="Issue label" onClick={() => alert('clicked')} />
+export const AsButton = () => <IssueLabel onClick={action('onClick')}>Issue label</IssueLabel>
 
 export const GroupOfLabels = () => (
   <Stack direction="horizontal" gap="condensed" wrap="wrap">
-    <IssueLabel variant="blue" text="Issue label" />
-    <IssueLabel variant="purple" text="Another label" />
-    <IssueLabel variant="green" text="A third label" />
-    <IssueLabel variant="orange" text="Issue label" />
-    <IssueLabel variant="yellow" text="Another label" />
-    <IssueLabel variant="brown" text="A third label" />
+    <IssueLabel variant="blue">Issue label</IssueLabel>
+    <IssueLabel variant="purple">Another label</IssueLabel>
+    <IssueLabel variant="green">A third label</IssueLabel>
+    <IssueLabel variant="orange">Issue label</IssueLabel>
+    <IssueLabel variant="yellow">Another label</IssueLabel>
+    <IssueLabel variant="brown">A third label</IssueLabel>
   </Stack>
 )