fix(fuselage): do not render GridItem for null or boolean children in CardGrid by Aryan9891 · Pull Request #42987 · RocketChat/Rocket.Chat · GitHub
Skip to content

fix(fuselage): do not render GridItem for null or boolean children in CardGrid - #42987

Open
Aryan9891 wants to merge 2 commits into
RocketChat:developfrom
Aryan9891:fix/fuselage-cardgrid-null-children
Open

fix(fuselage): do not render GridItem for null or boolean children in CardGrid#42987
Aryan9891 wants to merge 2 commits into
RocketChat:developfrom
Aryan9891:fix/fuselage-cardgrid-null-children

Conversation

@Aryan9891

@Aryan9891 Aryan9891 commented Oct 21, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown

Proposed changes (including videos or screenshots)

CardGrid previously wrapped each child using Children.map(children, ...). Because Children.map visits
ull, undefined, and boolean values, conditionally rendered cards such as {condition && } caused an empty, padded to be rendered into the DOM.

This PR updates CardGrid to iterate over Children.toArray(children) instead. Children.toArray strips out empty, null, and boolean children, so only genuine card items are wrapped in a .

  • Replaced Children.map with Children.toArray(children).map(...) in packages/fuselage/src/components/CardGrid/CardGrid.tsx.
  • Assigned unique key from child element or index to each .
  • Added unit regression test in CardGrid.spec.tsx verifying that
    ull, undefined, and boolean children do not produce elements.
  • Added changeset file .changeset/fuselage-cardgrid-null-children.md.

Issue(s)

Closes #42804

Steps to test or reproduce

  1. Render with conditional children:
    ` sx
Card 1
{false &&
Card 2
} {null}
Card 3
` 2. Before: DOM contains 4 .rcx-card-grid__item elements (2 of which are empty padded containers). 3. After: DOM contains exactly 2 .rcx-card-grid__item elements.

Further comments

Follows the solution outlined by @tassoevan in #42804.

Summary by CodeRabbit

  • Bug Fixes

    • CardGrid no longer renders empty grid items for null, undefined, or boolean children.
    • Grid items now maintain stable rendering when displaying mixed or conditional content.

  • Tests

    • Added coverage verifying that only rendered child elements produce grid items.

@Aryan9891
fix(fuselage): do not render GridItem for null or boolean children in…
d11d1a5 
… CardGrid

Closes RocketChat#42804

Signed-off-by: Aryan Sachin <aryansachinixd@gmail.com>
@dionisio-bot

dionisio-bot Bot commented Oct 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

@changeset-bot

changeset-bot Bot commented Oct 21, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: d11d1a5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 22 packages
Name Type
@rocket.chat/fuselage Patch
@rocket.chat/meteor Patch
@rocket.chat/uikit-playground Patch
@rocket.chat/core-typings Patch
@rocket.chat/fuselage-forms Patch
@rocket.chat/fuselage-toastbar Patch
@rocket.chat/fuselage-ui-kit Patch
@rocket.chat/gazzodown Patch
@rocket.chat/layout Patch
@rocket.chat/onboarding-ui Patch
@rocket.chat/storybook-config Patch
@rocket.chat/ui-account Patch
@rocket.chat/ui-avatar Patch
@rocket.chat/ui-client Patch
@rocket.chat/ui-composer Patch
@rocket.chat/ui-conference Patch
@rocket.chat/ui-media Patch
@rocket.chat/ui-video-conf Patch
@rocket.chat/ui-voip Patch
@rocket.chat/web-ui-registration Patch
@rocket.chat/ui-livekit Patch
@rocket.chat/rest-typings Patch

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

@CLAassistant

CLAassistant commented Oct 21, 2026 •
edited
Loading

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

cubic-dev-ai[bot]
cubic-dev-ai Bot reviewed Oct 21, 2026
View reviewed changes

@cubic-dev-ai cubic-dev-ai Bot left a comment •
edited
Loading

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.

All reported issues were addressed across 3 files

Reply to a comment to ask cubic a question or push back. It learns from your replies.

View guided diff | Re-trigger cubic

Comment thread .changeset/fuselage-cardgrid-null-children.md Outdated
@coderabbitai

coderabbitai Bot commented Oct 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: f9ecc4f3-4072-4ccc-b312-d8a2a6d65f69
📥 Commits

Reviewing files that changed from the base of the PR and between d11d1a5 and 8853a8d.

📒 Files selected for processing: 1
  • .changeset/fuselage-cardgrid-null-children.md
🚧 Files skipped from review as they are similar to previous changes: 1
  • .changeset/fuselage-cardgrid-null-children.md

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 remain after this review.

Walkthrough

CardGrid now normalizes children with Children.toArray before creating GridItem elements. It assigns each item a child key when available or its index. A rendering test checks that null and boolean children do not create grid items.

Changes

CardGrid child handling

Layer / File(s) Summary
Normalize children and verify rendering
packages/fuselage/src/components/CardGrid/CardGrid.tsx, packages/fuselage/src/components/CardGrid/CardGrid.spec.tsx, .changeset/fuselage-cardgrid-null-children.md		 CardGrid maps children normalized by Children.toArray and assigns each GridItem a child key or index. The test checks that null, undefined, and boolean children do not produce grid items. The changeset records a patch release.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested labels: type: bug

Merge Risk: ⚪ Minimal · up to 8853a

No merge-blocking issue is established; the change is mergeable after normal checks.

Pre-merge checks: Passed 5
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly and concisely describes the main change: preventing CardGrid from rendering GridItem elements for null or boolean children.
Linked Issues check Passed Issue #42804 requires CardGrid to omit GridItem wrappers for null, undefined, and boolean children. CardGrid now maps over Children.toArray(children), which removes these empty children before wrappin…
Out of Scope Changes check Passed The implementation, regression test, explicit GridItem keys, and changeset directly support issue #42804. No unrelated change is demonstrated.
Docstring Coverage Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…
Full details: Linked Issues check

Explanation

Issue #42804 requires CardGrid to omit GridItem wrappers for null, undefined, and boolean children. CardGrid now maps over Children.toArray(children), which removes these empty children before wrapping. The regression test verifies that only the two rendered children produce GridItem nodes.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2 files. (1 skipped: 1 unsupported.)

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Errors were encountered while retrieving linked issues.

Errors: 1
  • JIRA integration encountered authorization issues. Please disconnect and reconnect the integration in the CodeRabbit UI.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@Aryan9891
fix(fuselage): update changeset description to plain prose
8853a8d 
Signed-off-by: Aryan Sachin <aryansachinixd@gmail.com>

This branch has not been deployed

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

Reviewers

@cubic-dev-ai cubic-dev-ai[bot] cubic-dev-ai[bot] left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

community type: bug

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

fix(fuselage): CardGrid renders empty grid items for null or boolean children

2 participants

@Aryan9891 @CLAassistant