chore(data-table): update overflow menu storybook

[aledavila]

Closes #10747

Overflow menu wasn't hiding.

Changelog

Changed

• fixed classname in stories

Testing / Reviewing

Check data table overflow menu

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	1be326c
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/62632490230f960009bddf58
😎 Deploy Preview	https://deploy-preview-11247--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	1be326c
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/626324906576cf0008a39085
😎 Deploy Preview	https://deploy-preview-11247--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[aledavila]

@jnm2377 & @tay1orjones I wanted your take on this if possible. So the issue as it stands is that the overflow menu wasn't hiding when overflowMenuOnHover is true. There are 2 places where that exists I'm not even sure if the prop in Table works. The other is in DataTable component I think that is the one that works. (we can look into that another time)

So to my issue as you see in my change it wasn't working because the prefix was incorrect. In order for this prop to work the user needs to pass in className="cds--table-column-menu" to the TableCell containing the overflow menu. We don't exactly surface this or tell people they need to pass it in unless theres other ideas on how to integrate it into our code(the css might be too intertwined to do that). Do you guys have any ideas on the best way to do that ? So its not exactly a bug just a lack of documentation.

[tay1orjones]

@aledavila Based on #5822 and #5804, DataTable should be passing overflowMenuOnHover down to Table. Table is the only spot where the cds--data-table--visible-overflow-menu class is toggled on/off.

If overflowMenuOnHover requires placing cds--table-column-menu on a TableCell (and rendering an actual OverflowMenu), I agree we need to at the very least document it. A blurb in storybook docs could be enough.

On the bigger picture of how to integrate this more into our code, I wonder if the TableCell should have a containsOverflowMenu prop that toggles the cds--table-column-menu class so we avoid this problem in the future?

[jnm2377]

@aledavila @tay1orjones I'm wondering if there is a different selector that can be used to toggle on/off the overflow menu so that users don't have to forcibly add cds--table-column-menu (since I'm assuming that classname is part of the selector that hides the overflow menu)?

[aledavila]

@jnm2377 yes the way the styles were written it expects it to have that. And I thought about removing it but then other styles use that class

[jnm2377]

I don't mean necessarily removing it from the stylesheet, but adding a selector that will support the use case of a column w/o that class so that it'll still work if a user doesn't add that class.

[tay1orjones]

Would it work if the selectors using .#{$prefix}--table-column-menu were reconfigured to instead apply the styles if a table cell has an overflow menu as a descendant/child?

Something maybe like td:has(> .#{$prefix}--overflow-menu)

[tay1orjones]

Bah, nope, that's a level 4 selector not available in browsers yet. Bummer.

We might not be able to get out of having to apply the class to the table cell.

[aledavila]

@tay1orjones I've added the documentation. Let me know if that makes sense.