Skip to content

fix(stories): resolve React warnings for keys and DOM prop forwarding - #8142

Draft
tamas-sage wants to merge 2 commits into
masterfrom
fix/7756-react-story-warnings-keys-dom-props
Draft

fix(stories): resolve React warnings for keys and DOM prop forwarding#8142
tamas-sage wants to merge 2 commits into
masterfrom
fix/7756-react-story-warnings-keys-dom-props

Conversation

@tamas-sage

Copy link
Copy Markdown
Contributor

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

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

Testing instructions

@tamas-sage
tamas-sage requested review from a team as code owners August 20, 2026 07:48
@tamas-sage tamas-sage self-assigned this Aug 20, 2026
@tamas-sage
tamas-sage marked this pull request as draft August 20, 2026 07:59

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 key props to several mapped/array-rendered Storybook examples (Tile, Portrait, Menu, FileInput).
  • Updated Form footer 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 edleeks87 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated no new comments.

@DipperTheDan DipperTheDan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

4 participants