Use valid className test fixtures

Author: joshblack

.changeset/fix-dom-prop-warnings.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+CircleBadge, ActionList: Prevent internal props from rendering on DOM elements

packages/react/src/CheckboxGroup/CheckboxGroup.test.tsx

@@ -6,7 +6,14 @@ import {implementsClassName} from '../utils/testing'
 import classes from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.module.css'
 
 describe('CheckboxGroup', () => {
-  implementsClassName(CheckboxGroup, classes.GroupFieldset)
+  implementsClassName(
+    props => (
+      <CheckboxGroup {...props}>
+        <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
+      </CheckboxGroup>
+    ),
+    classes.GroupFieldset,
+  )
   implementsClassName(CheckboxGroup.Caption, classes.CheckboxOrRadioGroupCaption)
   implementsClassName(CheckboxGroup.Label, classes.RadioGroupLabel)
   const mockWarningFn = vi.fn()

packages/react/src/CircleBadge/CircleBadge.tsx

@@ -28,12 +28,12 @@ const sizeStyles = ({size, variant = 'medium'}: CircleBadgeProps<React.ElementTy
   }
 }
 
-const CircleBadge = <As extends React.ElementType>({as: Component = 'div', ...props}: CircleBadgeProps<As>) => (
+const CircleBadge = <As extends React.ElementType>({as: Component = 'div', inline, ...props}: CircleBadgeProps<As>) => (
   <Component
     {...props}
     data-component="CircleBadge"
     className={clsx(styles.CircleBadge, props.className)}
-    data-inline={props.inline ? '' : undefined}
+    data-inline={inline ? '' : undefined}
     style={sizeStyles(props)}
   />
 )

packages/react/src/DataTable/__tests__/Table.test.tsx

@@ -219,7 +219,18 @@ describe('Table', () => {
   })
 
   describe('Table.Cell', () => {
-    implementsClassName(Table.Cell, classes.TableCell)
+    implementsClassName(
+      props => (
+        <Table>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell {...props}>Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      ),
+      classes.TableCell,
+    )
 
     it('should set the element to a <th> when `scope` is defined', () => {
       render(

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

@@ -7,7 +7,14 @@ import {implementsClassName} from '../../utils/testing'
 import classes from '../Details.module.css'
 
 describe('Details', () => {
-  implementsClassName(Details, classes.Details)
+  implementsClassName(
+    props => (
+      <Details {...props}>
+        <Details.Summary>Summary</Details.Summary>
+      </Details>
+    ),
+    classes.Details,
+  )
   implementsClassName(Details.Summary)
   it('Toggles when you click outside', async () => {
     const Component = () => {

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

@@ -59,8 +59,24 @@ const WrappedValidationComponent: FCWithSlotMarker<object> = () => (
 WrappedValidationComponent.__SLOT__ = FormControl.Validation.__SLOT__
 
 describe('FormControl', () => {
-  implementsClassName(FormControl, classes.ControlVerticalLayout)
-  implementsClassName(props => <FormControl {...props} layout="horizontal" />, classes.ControlHorizontalLayout)
+  implementsClassName(
+    props => (
+      <FormControl {...props}>
+        <FormControl.Label>{LABEL_TEXT}</FormControl.Label>
+        <TextInput />
+      </FormControl>
+    ),
+    classes.ControlVerticalLayout,
+  )
+  implementsClassName(
+    props => (
+      <FormControl {...props} layout="horizontal">
+        <FormControl.Label>{LABEL_TEXT}</FormControl.Label>
+        <TextInput />
+      </FormControl>
+    ),
+    classes.ControlHorizontalLayout,
+  )
   implementsClassName(FormControl.Caption, captionClasses.Caption)
   implementsClassName(FormControl.Label, inputClasses.Label)
 

packages/react/src/Radio/Radio.test.tsx

@@ -5,7 +5,7 @@ import {implementsClassName} from '../utils/testing'
 import classes from './Radio.module.css'
 
 describe('Radio', () => {
-  implementsClassName(Radio, classes.Radio)
+  implementsClassName(props => <Radio name="mock" {...props} />, classes.Radio)
   const defaultProps = {
     name: 'mock',
     value: 'mock value',

packages/react/src/RadioGroup/RadioGroup.test.tsx

@@ -6,7 +6,14 @@ import {implementsClassName} from '../utils/testing'
 import classes from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.module.css'
 
 describe('RadioGroup', () => {
-  implementsClassName(RadioGroup, classes.GroupFieldset)
+  implementsClassName(
+    props => (
+      <RadioGroup {...props}>
+        <RadioGroup.Label>Choices</RadioGroup.Label>
+      </RadioGroup>
+    ),
+    classes.GroupFieldset,
+  )
   implementsClassName(RadioGroup.Caption, classes.CheckboxOrRadioGroupCaption)
   implementsClassName(RadioGroup.Label, classes.RadioGroupLabel)
   const mockWarningFn = vi.fn()

packages/react/src/SegmentedControl/SegmentedControl.test.tsx

@@ -32,7 +32,7 @@ const segmentData = [
 ]
 
 describe('SegmentedControl', () => {
-  implementsClassName(SegmentedControl, classes.SegmentedControl)
+  implementsClassName(props => <SegmentedControl aria-label="File view" {...props} />, classes.SegmentedControl)
 
   it('renders with a selected segment - controlled', () => {
     const {getByText} = render(

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

@@ -8,7 +8,14 @@ import classes from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadio
 const INPUT_GROUP_LABEL = 'Choices'
 
 describe('CheckboxOrRadioGroup', () => {
-  implementsClassName(CheckboxOrRadioGroup, classes.GroupFieldset)
+  implementsClassName(
+    props => (
+      <CheckboxOrRadioGroup {...props}>
+        <CheckboxOrRadioGroup.Label>Choices</CheckboxOrRadioGroup.Label>
+      </CheckboxOrRadioGroup>
+    ),
+    classes.GroupFieldset,
+  )
   implementsClassName(CheckboxOrRadioGroup.Caption, classes.CheckboxOrRadioGroupCaption)
   implementsClassName(CheckboxOrRadioGroup.Label, classes.RadioGroupLabel)
   const mockWarningFn = vi.fn()