From 5ec7476af10035958df0d557c09b866768223dd2 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 26 Sep 2025 11:49:54 -0700
Subject: [PATCH 1/8] check props when using as

---
 .../__tests__/primer-react.browser.test.tsx   | 79 ++++++++++++++-----
 1 file changed, 59 insertions(+), 20 deletions(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index 89eeeb65764..9d34739a460 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -47,8 +47,9 @@ import {
 
 describe('@primer/react', () => {
   test('ActionList supports `sx` prop', () => {
-    render(<ActionList data-testid="component" sx={{background: 'red'}} />)
+    render(<ActionList as="ul" data-testid="component" sx={{background: 'red'}} variant="inset" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('data-variant', 'inset')
   })
 
   test('ActionMenu.Button supports `sx` prop', () => {
@@ -109,7 +110,7 @@ describe('@primer/react', () => {
   })
 
   test('Box supports `sx` prop', () => {
-    render(<Box data-testid="component" sx={{background: 'red'}} />)
+    render(<Box as="div" data-testid="component" sx={{background: 'red'}} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
@@ -119,13 +120,15 @@ describe('@primer/react', () => {
   })
 
   test('Breadcrumbs.Item supports `sx` prop', () => {
-    render(<Breadcrumbs.Item data-testid="component" sx={{background: 'red'}} />)
+    render(<Breadcrumbs.Item as="li" data-testid="component" sx={{background: 'red'}} selected />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component').className.includes('selected')).toBe(true)
   })
 
   test('Button supports `sx` prop', () => {
-    render(<Button data-testid="component" sx={{background: 'red'}} />)
+    render(<Button as="button" data-testid="component" sx={{background: 'red'}} size="medium" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'medium')
   })
 
   test('Checkbox supports `sx` prop', () => {
@@ -156,8 +159,9 @@ describe('@primer/react', () => {
   })
 
   test('Flash supports `sx` prop', () => {
-    render(<Flash data-testid="component" sx={{background: 'red'}} />)
+    render(<Flash as="div" data-testid="component" sx={{background: 'red'}} variant="success" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('data-variant', 'success')
   })
 
   test('FormControl supports `sx` prop', () => {
@@ -170,7 +174,7 @@ describe('@primer/react', () => {
   })
 
   test('Header supports `sx` prop', () => {
-    render(<Header data-testid="component" sx={{background: 'red'}} />)
+    render(<Header as="header" data-testid="component" sx={{background: 'red'}} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
@@ -180,23 +184,40 @@ describe('@primer/react', () => {
   })
 
   test('IconButton supports `sx` prop', () => {
-    render(<IconButton aria-label="test" data-testid="component" sx={{background: 'red'}} icon={() => <svg />} />)
+    render(
+      <IconButton
+        as="button"
+        aria-label="test"
+        data-testid="component"
+        sx={{background: 'red'}}
+        icon={() => <svg />}
+      />,
+    )
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+
+    // Test that IconButton renders the icon component (SVG) in its children
+    const iconButton = screen.getByTestId('component')
+    const svgElement = iconButton.querySelector('svg')
+    expect(svgElement).toBeInTheDocument()
+    expect(iconButton.children.length).toBeGreaterThan(0)
   })
 
   test('Label supports `sx` prop', () => {
-    render(<Label data-testid="component" sx={{background: 'red'}} />)
+    render(<Label as="span" data-testid="component" sx={{background: 'red'}} size="large" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'large')
   })
 
   test('Link supports `sx` prop', () => {
-    render(<Link data-testid="component" sx={{background: 'red'}} />)
+    render(<Link as="a" data-testid="component" sx={{background: 'red'}} inline />)
+    expect(screen.getByTestId('component')).toHaveAttribute('data-inline', 'true')
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
   test('LinkButton supports `sx` prop', () => {
-    render(<LinkButton data-testid="component" sx={{background: 'red'}} />)
+    render(<LinkButton as="a" data-testid="component" sx={{background: 'red'}} size="medium" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'medium')
   })
 
   test('NavList supports `sx` prop', () => {
@@ -234,19 +255,23 @@ describe('@primer/react', () => {
     render(
       <ThemeProvider>
         <Overlay
+          as="div"
           data-testid="component"
           sx={{background: 'red'}}
           onClickOutside={() => {}}
           onEscape={() => {}}
           returnFocusRef={ref}
+          role="dialog"
         />
       </ThemeProvider>,
     )
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('role', 'dialog')
   })
 
   test('PageHeader supports `sx` prop', () => {
-    const {container} = render(<PageHeader data-testid="component" sx={{background: 'red'}} />)
+    const {container} = render(<PageHeader as="div" data-testid="component" sx={{background: 'red'}} role="article" />)
+    expect(screen.getByTestId('component')).toHaveAttribute('role', 'article')
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
@@ -271,8 +296,13 @@ describe('@primer/react', () => {
   })
 
   test('PageLayout.Content supports `sx` prop', () => {
-    const {container} = render(<PageLayout.Content data-testid="component" sx={{background: 'red'}} />)
-    expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
+    const {container} = render(
+      <PageLayout.Content as="div" data-testid="component" sx={{background: 'red'}} aria-labelledby="normal" />,
+    )
+
+    const outerElement = container.firstElementChild! as HTMLElement
+    expect(window.getComputedStyle(outerElement).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(outerElement).toHaveAttribute('aria-labelledby', 'normal')
   })
 
   test('PageLayout.Pane supports `sx` prop', () => {
@@ -334,8 +364,9 @@ describe('@primer/react', () => {
   })
 
   test.skip('Select supports `sx` prop', () => {
-    render(<Select data-testid="component" sx={{background: 'red'}} />)
+    render(<Select as="select" data-testid="component" sx={{background: 'red'}} required />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('required')
   })
 
   test('Spinner supports `sx` prop', () => {
@@ -359,13 +390,15 @@ describe('@primer/react', () => {
   })
 
   test('Text supports `sx` prop', () => {
-    render(<Text data-testid="component" sx={{background: 'red'}} />)
+    render(<Text as="span" data-testid="component" sx={{background: 'red'}} size="small" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'small')
   })
 
   test('TextInput supports `sx` prop', () => {
-    const {container} = render(<TextInput sx={{background: 'red'}} />)
+    const {container} = render(<TextInput as="input" sx={{background: 'red'}} loading />)
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(container.firstElementChild).toHaveAttribute('data-trailing-visual', 'true')
   })
 
   test('TextInput.Action supports `sx` prop', () => {
@@ -404,8 +437,9 @@ describe('@primer/react', () => {
   })
 
   test('Token supports `sx` prop', () => {
-    render(<Token data-testid="component" sx={{background: 'red'}} text="test" />)
+    render(<Token as="button" data-testid="component" sx={{background: 'red'}} text="test" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveTextContent('test')
   })
 
   test.todo('Tooltip supports `sx` prop', () => {
@@ -418,25 +452,30 @@ describe('@primer/react', () => {
   })
 
   test('Truncate supports `sx` prop', () => {
-    render(<Truncate data-testid="component" sx={{background: 'red'}} title="test" />)
+    render(<Truncate as="div" data-testid="component" sx={{background: 'red'}} title="test" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('title', 'test')
   })
 
   test('UnderlineNav supports `sx` prop', () => {
     render(
-      <UnderlineNav aria-label="navigation" data-testid="component" sx={{background: 'red'}}>
+      <UnderlineNav as="nav" aria-label="navigation" data-testid="component" sx={{background: 'red'}} variant="inset">
         <UnderlineNav.Item>test</UnderlineNav.Item>
       </UnderlineNav>,
     )
+    console.log(screen.getByLabelText('navigation').attributes)
     expect(window.getComputedStyle(screen.getByLabelText('navigation')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByLabelText('navigation')).toHaveAttribute('data-variant', 'inset')
   })
 
   test('UnderlineNav.Item supports `sx` prop', () => {
     render(
-      <UnderlineNav.Item data-testid="component" sx={{background: 'red'}}>
+      <UnderlineNav.Item as="a" data-testid="component" sx={{background: 'red'}} icon={<svg />}>
         test
       </UnderlineNav.Item>,
     )
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    const svgElement = screen.getByTestId('component').querySelector('svg')
+    expect(svgElement).toBeInTheDocument()
   })
 })

From 77fe7ec4305243bf45f5f16ddcaf400d644ea867 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 26 Sep 2025 12:13:50 -0700
Subject: [PATCH 2/8] fixes

---
 .../src/__tests__/primer-react.browser.test.tsx        | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index 9d34739a460..cf8f7017d08 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -161,7 +161,7 @@ describe('@primer/react', () => {
   test('Flash supports `sx` prop', () => {
     render(<Flash as="div" data-testid="component" sx={{background: 'red'}} variant="success" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
-    expect(screen.getByTestId('component')).toHaveAttribute('data-variant', 'success')
+    expect(screen.getByTestId('component')).toHaveAttribute('variant', 'success')
   })
 
   test('FormControl supports `sx` prop', () => {
@@ -215,9 +215,11 @@ describe('@primer/react', () => {
   })
 
   test('LinkButton supports `sx` prop', () => {
-    render(<LinkButton as="a" data-testid="component" sx={{background: 'red'}} size="medium" />)
+    render(<LinkButton as="a" data-testid="component" sx={{background: 'red'}} icon={<svg />} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
-    expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'medium')
+    console.log(screen.getByTestId('component'))
+    expect(screen.getByTestId('component').hasAttribute('icon'))
+  
   })
 
   test('NavList supports `sx` prop', () => {
@@ -271,7 +273,7 @@ describe('@primer/react', () => {
 
   test('PageHeader supports `sx` prop', () => {
     const {container} = render(<PageHeader as="div" data-testid="component" sx={{background: 'red'}} role="article" />)
-    expect(screen.getByTestId('component')).toHaveAttribute('role', 'article')
+    expect(container.firstElementChild!).toHaveAttribute('role', 'article')
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 

From 8c460068de7be3f57b436c6ababee57d93a4d3b5 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 26 Sep 2025 12:14:31 -0700
Subject: [PATCH 3/8] format

---
 .../styled-react/src/__tests__/primer-react.browser.test.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index cf8f7017d08..3919da101a0 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -219,7 +219,6 @@ describe('@primer/react', () => {
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
     console.log(screen.getByTestId('component'))
     expect(screen.getByTestId('component').hasAttribute('icon'))
-  
   })
 
   test('NavList supports `sx` prop', () => {

From 7c8232e60572a8fb3f430371580a9903fb1fd4ab Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 26 Sep 2025 12:17:26 -0700
Subject: [PATCH 4/8] remove console log

---
 .../styled-react/src/__tests__/primer-react.browser.test.tsx    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index 3919da101a0..ae2204cb8b2 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -217,7 +217,6 @@ describe('@primer/react', () => {
   test('LinkButton supports `sx` prop', () => {
     render(<LinkButton as="a" data-testid="component" sx={{background: 'red'}} icon={<svg />} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
-    console.log(screen.getByTestId('component'))
     expect(screen.getByTestId('component').hasAttribute('icon'))
   })
 
@@ -464,7 +463,6 @@ describe('@primer/react', () => {
         <UnderlineNav.Item>test</UnderlineNav.Item>
       </UnderlineNav>,
     )
-    console.log(screen.getByLabelText('navigation').attributes)
     expect(window.getComputedStyle(screen.getByLabelText('navigation')).backgroundColor).toBe('rgb(255, 0, 0)')
     expect(screen.getByLabelText('navigation')).toHaveAttribute('data-variant', 'inset')
   })

From 3dff5061b2a179a7da4a34580cd5d395d65c8ff0 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 26 Sep 2025 12:24:14 -0700
Subject: [PATCH 5/8] lint fix

---
 .../styled-react/src/__tests__/primer-react.browser.test.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index ae2204cb8b2..70a4ada5663 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -217,7 +217,8 @@ describe('@primer/react', () => {
   test('LinkButton supports `sx` prop', () => {
     render(<LinkButton as="a" data-testid="component" sx={{background: 'red'}} icon={<svg />} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
-    expect(screen.getByTestId('component').hasAttribute('icon'))
+    const svgElement = screen.getByTestId('component').querySelector('svg')
+    expect(svgElement).toBeInTheDocument()
   })
 
   test('NavList supports `sx` prop', () => {
@@ -297,7 +298,7 @@ describe('@primer/react', () => {
 
   test('PageLayout.Content supports `sx` prop', () => {
     const {container} = render(
-      <PageLayout.Content as="div" data-testid="component" sx={{background: 'red'}} aria-labelledby="normal" />,
+      <PageLayout.Content as="section" data-testid="component" sx={{background: 'red'}} aria-labelledby="normal" />,
     )
 
     const outerElement = container.firstElementChild! as HTMLElement

From 415943a1a1566cee7f5f2c943d9419ef85f4c588 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 26 Sep 2025 12:31:00 -0700
Subject: [PATCH 6/8] check icon attribute

---
 .../styled-react/src/__tests__/primer-react.browser.test.tsx   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index 70a4ada5663..a0c7e4b14cc 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -217,8 +217,7 @@ describe('@primer/react', () => {
   test('LinkButton supports `sx` prop', () => {
     render(<LinkButton as="a" data-testid="component" sx={{background: 'red'}} icon={<svg />} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
-    const svgElement = screen.getByTestId('component').querySelector('svg')
-    expect(svgElement).toBeInTheDocument()
+    expect(screen.getByTestId('component')).toHaveAttribute('icon')
   })
 
   test('NavList supports `sx` prop', () => {

From ea7d99e231f895ac434ae9006e46d7018baa481d Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 26 Sep 2025 14:46:28 -0700
Subject: [PATCH 7/8] depreacted and experimental tests

---
 .../src/__tests__/primer-react-deprecated.browser.test.tsx     | 3 ++-
 .../src/__tests__/primer-react-experimental.browser.test.tsx   | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx
index c8fbd7fbc54..3542c0b44cd 100644
--- a/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx
@@ -19,7 +19,8 @@ describe('@primer/react/deprecated', () => {
   })
 
   test('TabNav.Link supports `sx` prop', () => {
-    render(<TabNav.Link data-testid="component" sx={{background: 'red'}} />)
+    render(<TabNav.Link as="a" data-testid="component" sx={{background: 'red'}} />)
+    expect(screen.getByTestId('component')).toHaveAttribute('role', 'tab')
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
diff --git a/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx
index 4e2a8fa64fe..86ea2df3afd 100644
--- a/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx
@@ -9,7 +9,8 @@ describe('@primer/react/experimental', () => {
   })
 
   test('PageHeader supports `sx` prop', () => {
-    const {container} = render(<PageHeader data-testid="component" sx={{background: 'red'}} />)
+    const {container} = render(<PageHeader as="div" data-testid="component" sx={{background: 'red'}} role="article" />)
+    expect(container.firstElementChild!).toHaveAttribute('role', 'article')
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 

From 4e63f507feff9621d13e788d0dea3925edbef9ce Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Mon, 29 Sep 2025 10:16:56 -0700
Subject: [PATCH 8/8] use div instead of default ul

---
 .../styled-react/src/__tests__/primer-react.browser.test.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index 945b1062086..33ed2c72e22 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -47,7 +47,7 @@ import {
 
 describe('@primer/react', () => {
   test('ActionList supports `sx` prop', () => {
-    render(<ActionList as="ul" data-testid="component" sx={{background: 'red'}} variant="inset" />)
+    render(<ActionList as="div" data-testid="component" sx={{background: 'red'}} variant="inset" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
     expect(screen.getByTestId('component')).toHaveAttribute('data-variant', 'inset')
   })