Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Overflow menu for data table rows should be visible on hover #5804

Closed
ljitendra opened this issue Apr 3, 2020 · 9 comments · Fixed by #5822
Closed

Overflow menu for data table rows should be visible on hover #5804

ljitendra opened this issue Apr 3, 2020 · 9 comments · Fixed by #5822
Labels
type: enhancement 💡

Comments

@ljitendra
Copy link

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.

Screen Shot 2020-04-03 at 3 11 29 PM
@asudoh
Copy link
Contributor

asudoh commented Apr 3, 2020

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

@ConradSchmidt
Copy link
Contributor

ConradSchmidt commented Apr 6, 2020 •
edited
Loading

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 we would provide a PR would it be more feasible to get this implemented?

If you changed this recently, please update your Documentation:
https://www.carbondesignsystem.com/components/data-table/usage/
Persistent overflow menu
By default, the overflow menu icon appears on hover or focus. This reduces visual clutter and drives user interactions with clear context and results.

@laurenmrice
Copy link
Member

I think we could add a prop for overflow hover. 👍🏻

@ConradSchmidt
Copy link
Contributor

But just to be clear, is the Carbon site/guideline outdated, when it comes to this topic? Because the guideline says something different than @asudoh as quoted here

@laurenmrice
Copy link
Member

laurenmrice commented Apr 6, 2020 •
edited
Loading

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.

@janchild janchild mentioned this issue Apr 6, 2020
Closed
asudoh added a commit to asudoh/carbon-components that referenced this issue Apr 8, 2020
@asudoh
feat(DataTable): option to show overflow menu on hover
381ae6b 
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.
@asudoh asudoh mentioned this issue Apr 8, 2020
Merged
tw15egan pushed a commit that referenced this issue Apr 9, 2020
@asudoh
feat(DataTable): option to show overflow menu on hover (#5822)
6795904 
* 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
@joshua-vaughn
Copy link

So, I'm confused since this issue is closed but the documentation doesn't seem to have been updated yet.

  • Is there a hover/persistent property?
  • If so, is it now "persistent" by default in the code, and this just hasn't been updated in the data table docs yet?
  • Could my application suite decide that "hover" is more appropriate for our data scientist users?

Thanks!

@asudoh
Copy link
Contributor

asudoh commented Apr 21, 2020

Hi 👋 #5822 introduces overflowMenuOnHover. The default is not changed. Please see #5822 for more details.

@andreagmann
Copy link

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

Screen Shot 2020-05-07 at 8 12 06 AM

@laurenmrice
Copy link
Member

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

@tay1orjones tay1orjones mentioned this issue Apr 19, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: enhancement 💡
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(DataTable): option to show overflow menu on hover asudoh/carbon-components
6 participants
@asudoh @ConradSchmidt @andreagmann @ljitendra @laurenmrice @joshua-vaughn