Skip to content

Conversation

@kalai7m
Copy link

@kalai7m kalai7m commented Nov 8, 2025

When a DataTable row is expanded, the divider in the expanded content appeared thicker than expected. Hovering over the expanded row also showed a double line, which affected the visual consistency of the table. This fix ensures consistent divider thickness and hover behavior for expanded rows.

Fixes: #20033

Closes #

Fixed visual inconsistencies in DataTable expanded rows

Changelog

New

  • {{new thing}}

Changed

  • Updated hover styles to ensure consistent single-line borders between parent and child rows
  • Aligned direct parent hover behavior with programmatic hover class behavior for visual consistency

Removed

  • Removed box-shadow from expanded child row cells to prevent thick divider appearance

Testing / Reviewing

  1. Open a DataTable with expandable rows
  2. Expand a row and verify the divider within the expanded content appears as a single, consistent line (not thicker)
  3. Hover over the expanded parent row and verify no double line appears
  4. Hover over the expanded child row content and verify the parent row receives the same hover styling
  5. Test in both regular and zebra-striped DataTable variants
  6. Verify selected row states still display correctly with expanded rows

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

When a DataTable row is expanded, the divider in the expanded content appeared
thicker than expected. Hovering over the expanded row also showed a double line,
which affected the visual consistency of the table. This fix ensures consistent
divider thickness and hover behavior for expanded rows.

Fixes: carbon-design-system#20033
@kalai7m kalai7m requested a review from a team as a code owner November 8, 2025 14:18
@github-actions
Copy link
Contributor

github-actions bot commented Nov 8, 2025

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

@kalaivani-mohan-005H8K744

I have read the DCO document and I hereby sign the DCO.

@netlify
Copy link

netlify bot commented Nov 8, 2025

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit e2945c6
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/690f514bb9862700088d38ce
😎 Deploy Preview https://deploy-preview-20993--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify
Copy link

netlify bot commented Nov 8, 2025

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit e2945c6
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/690f514b08b03500088c69bf
😎 Deploy Preview https://deploy-preview-20993--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify
Copy link

netlify bot commented Nov 8, 2025

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

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

QR Code

Use your smartphone camera to open QR code link.

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

@alisonjoseph alisonjoseph requested review from a team and alina-jacob and removed request for a team November 10, 2025 19:09
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]: Expanded DataTable row shows thicker divider and double line on hover

3 participants