Skip to content

Conversation

@jlongshore
Copy link
Contributor

Closes #7180

Issue was when adding an overflow menu to the row header, we would end up with nested buttons. This effort was to make those elements siblings rather than parent/child...

What did you change?

Moved the rendering of other components in row headers to be siblings to the header button. Had to shell game some styles.

How did you test and verify your work?

Storybook, test script

@jlongshore jlongshore requested a review from a team as a code owner May 6, 2025 13:42
@jlongshore jlongshore requested review from anamikaanu96 and elycheea and removed request for a team May 6, 2025 13:42
@netlify
Copy link

netlify bot commented May 6, 2025

Deploy Preview for ibm-products-web-components ready!

Name Link
🔨 Latest commit 95fe39b
🔍 Latest deploy log https://app.netlify.com/projects/ibm-products-web-components/deploys/6931bedaf3353600070052bc
😎 Deploy Preview https://deploy-preview-7448--ibm-products-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.

@netlify
Copy link

netlify bot commented May 6, 2025

Deploy Preview for carbon-for-ibm-products ready!

Name Link
🔨 Latest commit 95fe39b
🔍 Latest deploy log https://app.netlify.com/projects/carbon-for-ibm-products/deploys/6931beda132c1e00079f8fa4
😎 Deploy Preview https://deploy-preview-7448--carbon-for-ibm-products.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.

@codecov
Copy link

codecov bot commented May 6, 2025

Codecov Report

❌ Patch coverage is 80.00000% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.63%. Comparing base (d3d2a2a) to head (95fe39b).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #7448      +/-   ##
==========================================
- Coverage   82.47%   81.63%   -0.84%     
==========================================
  Files         324      411      +87     
  Lines       10779    18937    +8158     
  Branches     3543     4223     +680     
==========================================
+ Hits         8890    15460    +6570     
- Misses       1889     3477    +1588     
Components Coverage Δ
ibm-products 82.49% <80.00%> (+0.02%) ⬆️
ibm-products-web-components 80.50% <ø> (∅)
🚀 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.

@matthewgallo matthewgallo self-requested a review May 7, 2025 14:27
Copy link
Member

@matthewgallo matthewgallo left a comment

Choose a reason for hiding this comment

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

Looks good, just notice some slight visual differences in the layout of the row header cells

With current changes
image

With previous changes
image

matthewgallo
matthewgallo previously approved these changes May 12, 2025
Copy link
Member

@matthewgallo matthewgallo left a comment

Choose a reason for hiding this comment

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

Approving after chatting with @jlongshore a bit more about the specs for spreadsheet row headers 🎉

@elycheea elycheea changed the title fix(DataSpreadsheet): 7180 dataspreadsheet overflow fix(DataSpreadsheet): overflow menus in data spreadsheet row headers May 14, 2025
@elycheea elycheea changed the title fix(DataSpreadsheet): overflow menus in data spreadsheet row headers fix(DataSpreadsheet): overflow menus in spreadsheet row headers May 14, 2025
@elycheea elycheea changed the title fix(DataSpreadsheet): overflow menus in spreadsheet row headers fix(DataSpreadsheet): overflow menus in row headers May 14, 2025
@elycheea
Copy link
Contributor

@jlongshore looks like there’s a conflict in the snapshots. You might just need to run it again — I think it’s just yarn test:c4p:snapshot.

onClick={handleRowHeaderClickEvent(index)}
className={cx(
`${blockClass}__td`,
// `${blockClass}__td`,
Copy link
Contributor

Choose a reason for hiding this comment

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

minor, but removing would be preferred to commenting out unless there's like a really good reason to leave that there

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good eye!

@elycheea elycheea added the needs: design opinion Design question needs opinion from designer label May 21, 2025
@elycheea
Copy link
Contributor

Also tagging this as needs: design opinion Design question needs opinion from designer .

New hover state Previous hover state
image image

Note that clicking on the row number does select/highlight the full row.
The empty space in the current implementation does feel like a visual bug, especially since the whole row has a hover state but only the internal button will actually select the row in the fix. (The change here removes an accessibility bug on nested interactive elements.)

Copy link
Contributor

@davidmenendez davidmenendez left a comment

Choose a reason for hiding this comment

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

looks good to me, but i believe we're still waiting for a design opinion. @RichKummer whenever you have some time to look 👍

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

Labels

needs: design opinion Design question needs opinion from designer

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DataSpreadsheet with OverflowMenu on each row breaks when opening the menu item and clicking on the menu table

4 participants