Skip to content

feat: add withRowGap property to grid#21430

Merged
heloiselui merged 14 commits into
carbon-design-system:mainfrom
lee-chase:addRowGap
Apr 30, 2026
Merged

feat: add withRowGap property to grid#21430
heloiselui merged 14 commits into
carbon-design-system:mainfrom
lee-chase:addRowGap

Conversation

@lee-chase

@lee-chase lee-chase commented Feb 4, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

This PR aims to make using the Carbon Grid simpler by proposing adding a row gap to match the gutter.

It does so by adding the withRowGap property to grid (Web Components and React).

Changelog

Changed

  • Grid to introduce the withRowGap

Testing / Reviewing

  • Added and reviewed new stories for Grid and Flex grid in both React and Web Components.
  • Added tests for these properties.

Before change
image

After change
image

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

  • Reviewed every line of the diff
  • Updated documentation and storybook examples
  • Wrote passing tests that cover this change
  • Addressed any impact on accessibility (a11y)
  • Tested for cross-browser consistency
  • Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

@lee-chase lee-chase requested review from a team as code owners February 4, 2026 12:06
@netlify

netlify Bot commented Feb 4, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit aff5888
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/69f363f13f8d9800081fe4ca
😎 Deploy Preview https://deploy-preview-21430--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Feb 4, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Name Link
🔨 Latest commit aff5888
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/69f363f1fc1181000823a4f8
😎 Deploy Preview https://deploy-preview-21430--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov

codecov Bot commented Feb 4, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.08%. Comparing base (046c448) to head (aff5888).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #21430      +/-   ##
==========================================
- Coverage   95.09%   95.08%   -0.01%     
==========================================
  Files         541      546       +5     
  Lines       45239    45479     +240     
  Branches     6511     6545      +34     
==========================================
+ Hits        43018    43245     +227     
- Misses       2092     2105      +13     
  Partials      129      129
Flag Coverage Δ
main-packages 89.14% <100.00%> (+<0.01%) ⬆️
web-components 97.89% <100.00%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

adamalston
adamalston reviewed Mar 8, 2026
View reviewed changes
Comment thread packages/react/src/components/Grid/CSSGrid.tsx Outdated
Comment thread packages/react/src/components/Grid/CSSGrid.tsx
Comment thread packages/react/src/components/Grid/Grid.mdx Outdated
Comment thread packages/react/src/components/Grid/Grid.mdx Outdated
Comment thread packages/web-components/src/components/grid/grid.ts
Comment thread packages/web-components/src/components/grid/grid.scss
@lee-chase

lee-chase commented Mar 11, 2026

Copy link
Copy Markdown
Member Author

@adamalston addressed points raised in review

tay1orjones
tay1orjones approved these changes Mar 13, 2026
View reviewed changes

@tay1orjones tay1orjones left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Thanks for adding this! Looks good to me.

Random history - it's been a long time ago now, but I think this wasn't included with the initial drop because of some edge case with mixing modes in subgrids or something. I can't find it in the PR history though.

adamalston
adamalston reviewed Mar 16, 2026
View reviewed changes
Comment thread packages/grid/scss/_flex-grid.scss
Comment thread packages/grid/scss/_css-grid.scss
adamalston
adamalston reviewed Mar 20, 2026
View reviewed changes
Comment thread packages/grid/scss/_flex-grid.scss
Comment thread packages/web-components/src/components/grid/grid.scss
adamalston
adamalston reviewed Apr 7, 2026
View reviewed changes

@adamalston adamalston 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.

I see status: visual review 🔍 on this pull request, and I’m not sure whether there's something outstanding there. Once that's resolved, I'm ready to approve given the latest updates.

@lee-chase

lee-chase commented Apr 8, 2026

Copy link
Copy Markdown
Member Author

I see status: visual review 🔍 on this pull request, and I’m not sure whether there's something outstanding there. Once that's resolved, I'm ready to approve given the latest updates.

All review items have been resolved as far as I can tell @adamalston.

@lee-chase

lee-chase commented Apr 30, 2026

Copy link
Copy Markdown
Member Author

@heloiselui as you added the visual review label can you confirm if any changes are needed?

@heloiselui

heloiselui commented Apr 30, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

@heloiselui as you added the visual review label can you confirm if any changes are needed?

Lauren has already reviewed the visual changes, and we have all the necessary approvals. Ready to merge, thank you, Lee!

@heloiselui heloiselui enabled auto-merge April 30, 2026 14:15
@heloiselui heloiselui added this pull request to the merge queue Apr 30, 2026
Merged via the queue into carbon-design-system:main with commit 55ba106 Apr 30, 2026
37 of 45 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tay1orjones tay1orjones tay1orjones approved these changes

@adamalston adamalston adamalston approved these changes

@laurenmrice laurenmrice laurenmrice approved these changes

@heloiselui heloiselui heloiselui approved these changes

Assignees

No one assigned

Labels

status: ready to merge 🎉

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@lee-chase @heloiselui @tay1orjones @adamalston @laurenmrice