Skip to content

feat: subcomponents log console warnings when used outside their parents (FE-7167) #7305

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 16 commits into
base: master
Choose a base branch
from

Conversation

Parsium
Copy link
Contributor

@Parsium Parsium commented Apr 15, 2025

Proposed behaviour

For subcomponents that rely on their parent Carbon components to function, ensure a console warning is logged when they are not nested within their required parent.

This includes subcomponents of the following components:

  • Breadcrumbs
  • ButtonToggleGroup
  • Card
  • Dl (Definition list)
  • FlatTable
  • StepFlow
  • StepSequence
  • Tile
  • VerticalMenu

Current behaviour

Many subcomponents must be nested within their parent components in order to function correctly. No error handling occurs if this isn't the case. This means developers using these components incorrectly won't receive any warning that they're following an anti-pattern.

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

Why log errors over throwing them?

For now, createStrictContext logs an error to the browser console and returns a fallback default value, as we are aware this anti-pattern has been used in practice, and we want to avoid breaking apps at this stage. This behaviour should be replaced with throwing an error in the future.

Why don't Accordion, Tabs, etc. log errors?

Currently these components use the legacy React.Children API to modify the props of its children. This will be changed in the future in favour of context. When this occurs, similar error handling will need to be done.

Testing instructions

@Parsium Parsium self-assigned this Apr 15, 2025
@Parsium Parsium changed the title feat: subcomponents log console warnings when used outside their parents feat: subcomponents log console warnings when used outside their parents (FE-7167) Apr 15, 2025
@Parsium Parsium added Work in progress This is a WIP PR so may not be ready for review and removed In Progress labels Apr 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
DO NOT MERGE Work in progress This is a WIP PR so may not be ready for review
Development

Successfully merging this pull request may close these issues.

1 participant