Overflow menu for data table rows should be visible on hover #5804
Comments
|
Hi 👋 we used to do what you suggested, but we switched to make the current way because users seem to have difficulties to discover the overflow menu icon. CC @carbon-design-system/design |
|
Like @ljitendra said, the design team decided to specified the UX so that the menu is shown on row hover. Maybe this can be discussed with the Design team - to avoid overwriting Carbon, it would be nice to have this behaviour available as a prop (like "actionsOnHover"). If you changed this recently, please update your Documentation: |
|
I think we could add a prop for overflow hover. 👍🏻 |
|
Yes, we need to update that to what we have as default (persistent overflow icons)! A designer on our team is actually working on docs for data table this month, so we will update it. |
This change introduces `overflowMenuOnHover` prop to `<DataTable>` that
determines whether or not to show overflow menu on hover, by changing
CSS class of `<Table>` as follows:
* `overflowMenuOnHover={true}` _unsets_
`bx--data-table--visible-overflow-menu`
* `overflowMenuOnHover={false}` _sets_
`bx--data-table--visible-overflow-menu`
That CSS class changes the behavior of overflow menu in
`<TableCell className="bx--table-column-menu">`; The former above shows
overflow menu only on hover, the latter above shows overflow menu
always.
Though our latest design dictates that showing overflow menu on hover
should be optional, this change sets `overflowMenuOnHover={true}` as the
default. This is because of the following reasons:
1. `<DataTable>` has never set `bx--data-table--visible-overflow-menu`
before and thus setting it by default will be a breaking change
2. Showing overflow menu always can alternately be (and has been in our
stories) achieved by _not_ setting
`className="bx--table-column-menu"` to `<TableCell>`
Fixes carbon-design-system#5804.
* feat(DataTable): option to show overflow menu on hover
This change introduces `overflowMenuOnHover` prop to `<DataTable>` that
determines whether or not to show overflow menu on hover, by changing
CSS class of `<Table>` as follows:
* `overflowMenuOnHover={true}` _unsets_
`bx--data-table--visible-overflow-menu`
* `overflowMenuOnHover={false}` _sets_
`bx--data-table--visible-overflow-menu`
That CSS class changes the behavior of overflow menu in
`<TableCell className="bx--table-column-menu">`; The former above shows
overflow menu only on hover, the latter above shows overflow menu
always.
Though our latest design dictates that showing overflow menu on hover
should be optional, this change sets `overflowMenuOnHover={true}` as the
default. This is because of the following reasons:
1. `<DataTable>` has never set `bx--data-table--visible-overflow-menu`
before and thus setting it by default will be a breaking change
2. Showing overflow menu always can alternately be (and has been in our
stories) achieved by _not_ setting
`className="bx--table-column-menu"` to `<TableCell>`
Fixes #5804.
* fix(data-table): remove redundant style
|
So, I'm confused since this issue is closed but the documentation doesn't seem to have been updated yet.
Thanks! |
|
@joshua-vaughn Right, the component has not changed, the default has always been persistent for the component. In fact, the react component did not use to support on hover, and our developers (CPD) were manually doing so. @laurenmrice The website documentation however is still misleading. It states the default behavior is on hover and that there are usability issues with making the icons persistent. When can we expect this documentation to be updated?
|
|
@garciaam A designer on our team is currently working on updating data table usage documentation. We are introducing a new documentation structure to our usage tabs which will cover more sections than we are showing now. Data table is one of our largest components so we are taking the time to make sure the content is thorough. The section about overflow menu will be addressed. There is no exact timeline on when this will be available, but it is actively being worked on as a high priority project. |
Summary
Based on storybook link for data table component, the overflow menu is visible for every row. Based on UX discussions, there should be a prop to make the menu appear only on hover or visible for each row.
The text was updated successfully, but these errors were encountered: