data component adr part 8

.changeset/silent-buses-knock.md

@@ -0,0 +1,14 @@
+---
+"@primer/react": minor
+---
+
+Add data-component attributes and associated tests for:
+
+SplitPageLayout
+Stack
+StateLabel
+SubNav
+TabNav
+Text
+TextArea
+ThemeProvider

packages/react/src/PageLayout/PageLayout.tsx

@@ -67,6 +67,7 @@ export type PageLayoutProps = {
   _slotsConfig?: Record<'header' | 'footer' | 'sidebar', React.ElementType>
   className?: string
   style?: React.CSSProperties
+  'data-component'?: string
 }
 
 // TODO: refs
@@ -79,6 +80,7 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
   className,
   style,
   _slotsConfig: slotsConfig,
+  'data-component': dataComponent = 'PageLayout',
 }) => {
   const paneRef = useRef<HTMLDivElement>(null)
   const contentWrapperRef = useRef<HTMLDivElement>(null)
@@ -101,7 +103,13 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
 
   return (
     <PageLayoutContext.Provider value={memoizedContextValue}>
-      <RootWrapper style={style} padding={padding} className={className} hasSidebar={!!slots.sidebar}>
+      <RootWrapper
+        style={style}
+        padding={padding}
+        className={className}
+        hasSidebar={!!slots.sidebar}
+        dataComponent={dataComponent}
+      >
         {slots.sidebar}
         <div ref={sidebarContentWrapperRef} className={classes.PageLayoutWrapper} data-width={containerWidth}>
           {slots.header}
@@ -120,7 +128,10 @@ const RootWrapper = memo(
     children,
     className,
     hasSidebar,
-  }: React.PropsWithChildren<Pick<PageLayoutProps, 'style' | 'padding' | 'className'> & {hasSidebar?: boolean}>) => {
+    dataComponent,
+  }: React.PropsWithChildren<
+    Pick<PageLayoutProps, 'style' | 'padding' | 'className'> & {hasSidebar?: boolean; dataComponent: string}
+  >) => {
     return (
       <div
         style={
@@ -130,7 +141,7 @@ const RootWrapper = memo(
           } as React.CSSProperties
         }
         className={clsx(classes.PageLayoutRoot, className)}
-        data-component="PageLayout"
+        data-component={dataComponent}
         data-has-sidebar={hasSidebar || undefined}
       >
         {children}
@@ -549,6 +560,7 @@ export type PageLayoutHeaderProps = {
   hidden?: boolean | ResponsiveValue<boolean>
   className?: string
   style?: React.CSSProperties
+  'data-component'?: string
 }
 
 const Header: FCWithSlotMarker<React.PropsWithChildren<PageLayoutHeaderProps>> = ({
@@ -561,6 +573,7 @@ const Header: FCWithSlotMarker<React.PropsWithChildren<PageLayoutHeaderProps>> =
   children,
   style,
   className,
+  'data-component': dataComponent = 'PageLayout.Header',
 }) => {
   // Combine divider and dividerWhenNarrow for backwards compatibility
   const dividerProp =
@@ -574,7 +587,7 @@ const Header: FCWithSlotMarker<React.PropsWithChildren<PageLayoutHeaderProps>> =
     <header
       aria-label={label}
       aria-labelledby={labelledBy}
-      data-component="PageLayout.Header"
+      data-component={dataComponent}
       {...getResponsiveAttributes('hidden', hidden)}
       className={clsx(classes.Header, className)}
       style={
@@ -632,6 +645,7 @@ export type PageLayoutContentProps = {
   hidden?: boolean | ResponsiveValue<boolean>
   className?: string
   style?: React.CSSProperties
+  'data-component'?: string
 }
 
 // TODO: Account for pane width when centering content
@@ -645,6 +659,7 @@ const Content: FCWithSlotMarker<React.PropsWithChildren<PageLayoutContentProps>>
   children,
   className,
   style,
+  'data-component': dataComponent = 'PageLayout.Content',
 }) => {
   const Component = as
   const {contentWrapperRef} = React.useContext(PageLayoutContext)
@@ -654,7 +669,7 @@ const Content: FCWithSlotMarker<React.PropsWithChildren<PageLayoutContentProps>>
       ref={contentWrapperRef}
       aria-label={label}
       aria-labelledby={labelledBy}
-      data-component="PageLayout.Content"
+      data-component={dataComponent}
       style={style}
       className={clsx(classes.ContentWrapper, className)}
       {...getResponsiveAttributes('is-hidden', hidden)}
@@ -750,6 +765,7 @@ export type PageLayoutPaneBaseProps = {
   id?: string
   className?: string
   style?: React.CSSProperties
+  'data-component'?: string
 }
 
 export type PageLayoutPaneProps = PageLayoutPaneBaseProps &
@@ -799,6 +815,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
       id,
       className,
       style,
+      'data-component': dataComponent = 'PageLayout.Pane',
     },
     forwardRef,
   ) => {
@@ -902,7 +919,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           {...labelProp}
           {...(id && {id: paneId})}
           className={classes.Pane}
-          data-component="PageLayout.Pane"
+          data-component={dataComponent}
           data-resizable={resizable || undefined}
           style={
             {
@@ -1100,6 +1117,7 @@ export type PageLayoutSidebarBaseProps = {
 
   className?: string
   style?: React.CSSProperties
+  'data-component'?: string
 }
 
 export type PageLayoutSidebarProps = PageLayoutSidebarBaseProps &
@@ -1145,6 +1163,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLay
       id,
       className,
       style,
+      'data-component': dataComponent = 'PageLayout.Sidebar',
     },
     forwardRef,
   ) => {
@@ -1237,7 +1256,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLay
           {...labelProp}
           {...(id && {id: sidebarId})}
           className={classes.Sidebar}
-          data-component="PageLayout.Sidebar"
+          data-component={dataComponent}
           data-resizable={resizable || undefined}
           style={
             {
@@ -1313,6 +1332,7 @@ export type PageLayoutFooterProps = {
   hidden?: boolean | ResponsiveValue<boolean>
   className?: string
   style?: React.CSSProperties
+  'data-component'?: string
 }
 
 const Footer: FCWithSlotMarker<React.PropsWithChildren<PageLayoutFooterProps>> = ({
@@ -1325,6 +1345,7 @@ const Footer: FCWithSlotMarker<React.PropsWithChildren<PageLayoutFooterProps>> =
   children,
   className,
   style,
+  'data-component': dataComponent = 'PageLayout.Footer',
 }) => {
   // Combine divider and dividerWhenNarrow for backwards compatibility
   const dividerProp =
@@ -1338,7 +1359,7 @@ const Footer: FCWithSlotMarker<React.PropsWithChildren<PageLayoutFooterProps>> =
     <footer
       aria-label={label}
       aria-labelledby={labelledBy}
-      data-component="PageLayout.Footer"
+      data-component={dataComponent}
       {...getResponsiveAttributes('hidden', hidden)}
       className={clsx(classes.FooterWrapper, className)}
       style={

packages/react/src/SplitPageLayout/SplitPageLayout.test.tsx

@@ -7,6 +7,25 @@ import {implementsClassName} from '../utils/testing'
 describe('SplitPageLayout', () => {
   implementsClassName(SplitPageLayout)
 
+  it('renders data-component attributes for all components', () => {
+    const {container} = render(
+      <SplitPageLayout>
+        <SplitPageLayout.Header>Header</SplitPageLayout.Header>
+        <SplitPageLayout.Content>Content</SplitPageLayout.Content>
+        <SplitPageLayout.Pane>Pane</SplitPageLayout.Pane>
+        <SplitPageLayout.Sidebar>Sidebar</SplitPageLayout.Sidebar>
+        <SplitPageLayout.Footer>Footer</SplitPageLayout.Footer>
+      </SplitPageLayout>,
+    )
+
+    expect(container.firstChild).toHaveAttribute('data-component', 'SplitPageLayout')
+    expect(container.querySelector('[data-component="SplitPageLayout.Header"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="SplitPageLayout.Content"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="SplitPageLayout.Pane"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="SplitPageLayout.Sidebar"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="SplitPageLayout.Footer"]')).toBeInTheDocument()
+  })
+
   it('renders Pane with a custom ID', () => {
     const {getByText} = render(
       <SplitPageLayout>

packages/react/src/SplitPageLayout/SplitPageLayout.tsx

@@ -7,6 +7,7 @@ import type {
   PageLayoutSidebarProps,
 } from '../PageLayout'
 import {PageLayout} from '../PageLayout'
+import type {WithSlotMarker} from '../utils/types'
 
 // ----------------------------------------------------------------------------
 // SplitPageLayout
@@ -16,6 +17,7 @@ export type SplitPageLayoutProps = {className?: string}
 export const Root: React.FC<React.PropsWithChildren<SplitPageLayoutProps>> = props => {
   return (
     <PageLayout
+      data-component="SplitPageLayout"
       containerWidth="full"
       padding="none"
       columnGap="none"
@@ -43,7 +45,7 @@ export const Header: React.FC<React.PropsWithChildren<SplitPageLayoutHeaderProps
   ...props
 }) => {
   // eslint-disable-next-line primer-react/direct-slot-children
-  return <PageLayout.Header padding={padding} divider={divider} {...props} />
+  return <PageLayout.Header data-component="SplitPageLayout.Header" padding={padding} divider={divider} {...props} />
 }
 
 Header.displayName = 'SplitPageLayout.Header'
@@ -58,7 +60,7 @@ export const Content: React.FC<React.PropsWithChildren<SplitPageLayoutContentPro
   padding = 'normal',
   ...props
 }) => {
-  return <PageLayout.Content width={width} padding={padding} {...props} />
+  return <PageLayout.Content data-component="SplitPageLayout.Content" width={width} padding={padding} {...props} />
 }
 
 Content.displayName = 'SplitPageLayout.Content'
@@ -77,6 +79,7 @@ export const Pane: React.FC<React.PropsWithChildren<SplitPageLayoutPaneProps>> =
 }) => {
   return (
     <PageLayout.Pane
+      data-component="SplitPageLayout.Pane"
       position={position}
       sticky={sticky}
       padding={padding}
@@ -98,7 +101,15 @@ export const Sidebar: React.FC<React.PropsWithChildren<SplitPageLayoutSidebarPro
   divider = 'line',
   ...props
 }) => {
-  return <PageLayout.Sidebar position={position} padding={padding} divider={divider} {...props} />
+  return (
+    <PageLayout.Sidebar
+      data-component="SplitPageLayout.Sidebar"
+      position={position}
+      padding={padding}
+      divider={divider}
+      {...props}
+    />
+  )
 }
 
 Sidebar.displayName = 'SplitPageLayout.Sidebar'
@@ -114,13 +125,18 @@ export const Footer: React.FC<React.PropsWithChildren<SplitPageLayoutFooterProps
   ...props
 }) => {
   // eslint-disable-next-line primer-react/direct-slot-children
-  return <PageLayout.Footer padding={padding} divider={divider} {...props} />
+  return <PageLayout.Footer data-component="SplitPageLayout.Footer" padding={padding} divider={divider} {...props} />
 }
 
 Footer.displayName = 'SplitPageLayout.Footer'
 
 // ----------------------------------------------------------------------------
 // Export
+;(Header as WithSlotMarker<typeof Header>).__SLOT__ = PageLayout.Header.__SLOT__
+;(Content as WithSlotMarker<typeof Content>).__SLOT__ = PageLayout.Content.__SLOT__
+;(Pane as WithSlotMarker<typeof Pane>).__SLOT__ = PageLayout.Pane.__SLOT__
+;(Sidebar as WithSlotMarker<typeof Sidebar>).__SLOT__ = PageLayout.Sidebar.__SLOT__
+;(Footer as WithSlotMarker<typeof Footer>).__SLOT__ = PageLayout.Footer.__SLOT__
 
 export const SplitPageLayout = Object.assign(Root, {
   Header,

packages/react/src/Stack/Stack.tsx

@@ -102,6 +102,7 @@ const Stack = forwardRef(
       <Component
         ref={forwardedRef}
         {...rest}
+        data-component="Stack"
         className={clsx(className, classes.Stack)}
         {...getResponsiveAttributes('gap', gap)}
         {...getResponsiveAttributes('direction', direction)}
@@ -144,6 +145,7 @@ const StackItem = forwardRef(({as: Component = 'div', children, grow, shrink, cl
     <Component
       ref={forwardedRef}
       {...rest}
+      data-component="StackItem"
       className={clsx(className, classes.StackItem)}
       {...getResponsiveAttributes('grow', grow)}
       {...getResponsiveAttributes('shrink', shrink)}

packages/react/src/Stack/__tests__/Stack.test.tsx

@@ -8,6 +8,11 @@ import classes from '../Stack.module.css'
 describe('Stack', () => {
   implementsClassName(Stack, classes.Stack)
 
+  it('renders data-component attribute', () => {
+    render(<Stack data-testid="stack" />)
+    expect(screen.getByTestId('stack')).toHaveAttribute('data-component', 'Stack')
+  })
+
   it('should support rendering content through `children`', () => {
     render(
       <Stack>

packages/react/src/Stack/__tests__/StackItem.test.tsx

@@ -8,6 +8,15 @@ import classes from '../Stack.module.css'
 describe('StackItem', () => {
   implementsClassName(StackItem, classes.StackItem)
 
+  it('renders data-component attribute', () => {
+    render(
+      <Stack>
+        <StackItem data-testid="stack-item">Content</StackItem>
+      </Stack>,
+    )
+    expect(screen.getByTestId('stack-item')).toHaveAttribute('data-component', 'StackItem')
+  })
+
   it('should render its children', () => {
     render(
       <Stack>

packages/react/src/StateLabel/StateLabel.tsx

@@ -84,6 +84,7 @@ const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(
         {...rest}
         ref={ref}
         className={clsx(classes.StateLabel, className)}
+        data-component="StateLabel"
         data-size={inferredSize}
         data-status={status}
       >

packages/react/src/StateLabel/__tests__/StateLabel.test.tsx

@@ -7,6 +7,13 @@ import classes from '../StateLabel.module.css'
 describe('StateLabel', () => {
   implementsClassName(props => <StateLabel {...props} status="issueOpened" />, classes.StateLabel)
 
+  it('renders data-component attribute', () => {
+    expect(HTMLRender(<StateLabel status="issueOpened" />).container.firstChild).toHaveAttribute(
+      'data-component',
+      'StateLabel',
+    )
+  })
+
   it('respects the status prop', () => {
     expect(HTMLRender(<StateLabel status="issueOpened" />).container).toMatchSnapshot()
     expect(HTMLRender(<StateLabel status="issueClosed" />).container).toMatchSnapshot()
@@ -64,11 +71,13 @@ describe('StateLabel', () => {
     expect(screenArchived.getByText('Archived')).toBeInTheDocument() // text
     screenArchived.unmount()
   })
+
   it('renders open status without an icon', () => {
     const screen = HTMLRender(<StateLabel status="open">Open</StateLabel>)
     expect(screen.queryByRole('img')).not.toBeInTheDocument() // svg
     expect(screen.getByText('Open')).toBeInTheDocument() // text
   })
+
   it('renders closed status without an icon', () => {
     const screen = HTMLRender(<StateLabel status="closed">Closed</StateLabel>)
     expect(screen.queryByRole('img')).not.toBeInTheDocument() // svg