Skip to content

fix(data-table): maintain row size hierarchy when content wraps - #22629

Open
jesnajoseijk wants to merge 8 commits into
carbon-design-system:mainfrom
jesnajoseijk:fix/20759-datatable-row-height
Open

fix(data-table): maintain row size hierarchy when content wraps#22629
jesnajoseijk wants to merge 8 commits into
carbon-design-system:mainfrom
jesnajoseijk:fix/20759-datatable-row-height

Conversation

@jesnajoseijk

@jesnajoseijk jesnajoseijk commented Jul 5, 2026

Copy link
Copy Markdown
Contributor

Closes #20759

I have read the DCO document and I hereby sign the DCO. Each contributor must post that comment from their GitHub account so the action records their signature.

Fixes a DataTable issue where wrapped cell content could make size="md" rows taller than size="lg".

Changelog

New

  • None

Changed

  • Added explicit lg vertical padding for DataTable header labels and body cells
  • image

Removed

  • None

Testing / Reviewing

  • Verified wrapped content no longer makes md rows taller than lg
  • Ran yarn lint:styles

PR Checklist

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

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

@jesnajoseijk
jesnajoseijk requested a review from a team as a code owner July 5, 2026 05:45
@github-actions

github-actions Bot commented Jul 5, 2026

Copy link
Copy Markdown
Contributor

All contributors have signed the DCO.
Posted by the DCO Assistant Lite bot.

@netlify

netlify Bot commented Jul 5, 2026

Copy link
Copy Markdown

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit b7b1c21
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/6a67859bcca4ba0007ea4ab3
😎 Deploy Preview https://deploy-preview-22629--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.

@netlify

netlify Bot commented Jul 5, 2026

Copy link
Copy Markdown

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

Name Link
🔨 Latest commit b7b1c21
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a67859c1773ac0008529819
😎 Deploy Preview https://deploy-preview-22629--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 Jul 5, 2026

Copy link
Copy Markdown

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit b7b1c21
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/6a67859cc8a97a000852ecbb
😎 Deploy Preview https://deploy-preview-22629--carbon-elements.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 Jul 5, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.59%. Comparing base (c8d2416) to head (b7b1c21).

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #22629      +/-   ##
==========================================
- Coverage   89.60%   89.59%   -0.01%     
==========================================
  Files         582      582              
  Lines       53279    53279              
  Branches     7260     7312      +52     
==========================================
- Hits        47739    47737       -2     
- Misses       5403     5405       +2     
  Partials      137      137              
Flag Coverage Δ
main-packages 87.61% <ø> (ø)
web-components 90.25% <ø> (-0.01%) ⬇️

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

☔ View full report in Codecov by Harness.
📢 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 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 think some of the checklist items in the description should be updated based on the guidance provided in the template.

If some do not apply, ~strike through the item text with tildes~.

@adamalston
adamalston requested review from a team and Rory-McDonald and removed request for a team July 6, 2026 21:26
@Kritvi-bhatia17

Copy link
Copy Markdown
Member

Hi @jesnajoseijk! Thanks for working on this, can you please also fix the same for web components?

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

Looking through the UI Tests: @carbon/react storybook snapshots that have changed on Chromatic, I would expect there to be no change to any of the stories because none of them have wrapping text and this PR doesn't change any of the stories. It would make sense to update one of the stories to have longer text to showcase this bug being fixed.

So two things:

  1. The fix should not impact the visuals/snaps of existing stories at all
  2. A story should be updated to contain wrapping text showcasing the fix, which should cause only those chromatic snaps to change

@netlify

netlify Bot commented Jul 16, 2026

Copy link
Copy Markdown

Deploy Preview for v2-carbon-react ready!

Name Link
🔨 Latest commit b7b1c21
🔍 Latest deploy log https://app.netlify.com/projects/v2-carbon-react/deploys/6a67859c3f3f8300083e4376
😎 Deploy Preview https://deploy-preview-22629--v2-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.

@netlify

netlify Bot commented Jul 16, 2026

Copy link
Copy Markdown

Deploy Preview for v3-carbon-web-components ready!

Name Link
🔨 Latest commit b7b1c21
🔍 Latest deploy log https://app.netlify.com/projects/v3-carbon-web-components/deploys/6a67859cf87ca50009bc314c
😎 Deploy Preview https://deploy-preview-22629--v3-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.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: DataTable: sometimes size="md" is taller than size="lg"

4 participants