fix(stories): resolve React warnings for keys and DOM prop forwarding - #8142
fix(stories): resolve React warnings for keys and DOM prop forwarding#8142tamas-sage wants to merge 2 commits into
Conversation
There was a problem hiding this comment.
Pull request overview
This PR removes recurring React/Storybook warnings by ensuring list-rendered elements have stable key props, avoiding spreading key into JSX props, and preventing style-only props from being forwarded to DOM elements via styled-components transient props.
Changes:
- Added stable React
keyprops to several mapped/array-rendered Storybook examples (Tile, Portrait, Menu, FileInput). - Updated
Formfooter styling to use a transient styled-components prop ($disableStickyOnSmallScreen) so it won’t leak as an invalid DOM attribute. - Mirrored the Portrait story fix in the corresponding
skills/documentation snippet.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/tile/tile-test.stories.tsx | Moves key to the TileContent elements (not in spread props) and stabilizes keys in the rendered content array. |
| src/components/portrait/portrait.stories.tsx | Adds key to Option elements rendered from availableVariants. |
| src/components/menu/menu-test.stories.tsx | Adds a stable key to Menu instances rendered in a map. |
| src/components/form/form.style.ts | Renames a style-only prop to a transient $... prop to prevent DOM prop forwarding warnings. |
| src/components/form/form.component.tsx | Passes the renamed transient prop through to StyledFormFooter. |
| src/components/file-input/file-input-test.stories.tsx | Adds stable keys for the FileInput list in the status mapping story. |
| skills/carbon-react/components/portrait.md | Updates the documented Portrait story snippet to include a key on mapped Option elements. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
edleeks87
left a comment
There was a problem hiding this comment.
The fix commits will trigger a release, they should be either a chore, docs or refactor as there's no functional changes to the component
DipperTheDan
left a comment
There was a problem hiding this comment.
Nothing more to add from me on this. @edleeks87 has made a valid point in his comment and I agree with him on that so it will need addressing.
Proposed behaviour
Stories render without those warnings by adding stable keys, passing key directly, and using transient styled props for non-DOM attributes.
Current behaviour
Storybook stories show React warnings due to missing list keys, key being spread into JSX, and style-only props leaking to DOM.
Checklist
d.tsfile added or updated if requiredQA
Additional context
Testing instructions