fix: prevent internal props rendering to DOM#7984
Open
joshblack wants to merge 3 commits into
Open
Conversation
🦋 Changeset detectedLatest commit: 8c79aa0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
Bot
added
staff
Contributor
|
joshblack
changed the title
joshblack
force-pushed
the
joshblack/fail-on-console/expected-console-errors
branch
from
09ab19c to
78c1fc6
Compare
joshblack
force-pushed
the
joshblack/fail-on-console/class-name-fixtures
branch
from
1915503 to
d302051
Compare
joshblack
force-pushed
the
joshblack/fail-on-console/expected-console-errors
branch
from
78c1fc6 to
422d492
Compare
joshblack
force-pushed
the
joshblack/fail-on-console/class-name-fixtures
branch
from
d302051 to
8b05a66
Compare
joshblack
force-pushed
the
joshblack/fail-on-console/expected-console-errors
branch
from
422d492 to
e8e6005
Compare
joshblack
force-pushed
the
joshblack/fail-on-console/class-name-fixtures
branch
from
8b05a66 to
d097ea6
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR aims to eliminate React DOM warnings in tests caused by invalid implementsClassName fixtures, and to prevent internal/custom props from being forwarded onto DOM elements (notably in CircleBadge and deprecated ActionList.Group).
Changes:
- Updated multiple
implementsClassNameusages in tests to render components with required props/children (e.g.aria-label,name, required slot children). - Adjusted deprecated
ActionList.Groupto stop forwardinggroupIdonto the rendered<div>. - Adjusted
CircleBadgeto avoid forwardinginlineas a DOM attribute, and added a patch changeset.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/SegmentedControl/SegmentedControl.test.tsx | Wraps SegmentedControl in a fixture that includes required aria-label for className testing. |
| packages/react/src/RadioGroup/RadioGroup.test.tsx | Updates implementsClassName fixture to include required RadioGroup.Label child. |
| packages/react/src/Radio/Radio.test.tsx | Updates implementsClassName fixture to include required name prop. |
| packages/react/src/FormControl/tests/FormControl.test.tsx | Updates implementsClassName fixtures to include required FormControl.Label and an input child. |
| packages/react/src/Details/tests/Details.test.tsx | Updates implementsClassName fixture to include required Details.Summary child. |
| packages/react/src/deprecated/ActionList/Group.tsx | Stops forwarding groupId to the DOM by destructuring it out. |
| packages/react/src/DataTable/tests/Table.test.tsx | Updates implementsClassName fixture for Table.Cell to render within a required table structure. |
| packages/react/src/CircleBadge/CircleBadge.tsx | Stops forwarding inline to the DOM by destructuring it out. |
| packages/react/src/CheckboxGroup/CheckboxGroup.test.tsx | Updates implementsClassName fixture to include required CheckboxGroup.Label child. |
| packages/react/src/tests/CheckboxOrRadioGroup.test.tsx | Updates implementsClassName fixture to include required CheckboxOrRadioGroup.Label child. |
| .changeset/fix-dom-prop-warnings.md | Adds a patch changeset documenting the DOM-prop leak prevention. |
Copilot's findings
- Files reviewed: 11/11 changed files
- Comments generated: 2
Comment on lines
31
to
35
| const CircleBadge = <As extends React.ElementType>({as: Component = 'div', inline, ...props}: CircleBadgeProps<As>) => ( | ||
| <Component | ||
| {...props} | ||
| data-component="CircleBadge" | ||
| className={clsx(styles.CircleBadge, props.className)} |
| * Collects related `Items` in an `ActionList`. | ||
| */ | ||
| export function Group({header, items, ...props}: GroupProps): JSX.Element { | ||
| export function Group({header, items, groupId: _groupId, ...props}: GroupProps): JSX.Element { |
joshblack
force-pushed
the
joshblack/fail-on-console/expected-console-errors
branch
from
e8e6005 to
24c767b
Compare
joshblack
force-pushed
the
joshblack/fail-on-console/class-name-fixtures
branch
from
d097ea6 to
884842d
Compare
Member
Author
|
@copilot apply code review suggestions |
Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>
Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>
Contributor
TylerJDev
approved these changes
Jun 15, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes invalid
classNamefixtures that emitted React DOM warnings during tests. Also fixes internal prop leaks for CircleBadge and deprecated ActionList.Group so those props are not rendered on DOM elements.Changelog
New
Changed
inline,size, andvariantto DOM elements.groupIdandshowItemDividersto DOM elements.Removed
Rollout strategy
Testing & Reviewing
Validated with build, tests, type-check, lint, CSS lint, and format checks. Includes a patch changeset. Added targeted regression assertions for CircleBadge and deprecated ActionList.Group to verify internal props are not rendered as DOM attributes.
Merge checklist