carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://ibm-products.carbondesignsystem.com
Apache License 2.0
98 stars 138 forks source link

Always display action buttons on Datagrid #4474

Open BenceLovas opened 8 months ago

BenceLovas commented 8 months ago

What package(s) are you using?

What did you want to know?

Our team is using the Datagrid component, and we would like to display the action buttons at the end of the rows (instead of the overflow menu).

image

We've found the documentation for it and it looks promising, our only concern is that these buttons only show up when you hover over the row. So my questions are:

elycheea commented 8 months ago

@vsnichols and @marion-bruells may be able to share some context about this particular design decision.

marion-bruells commented 8 months ago

We recommend the following: Show action buttons persistently only if the user is being encouraged to click them. Otherwise, action buttons should be always visible on hover to discourage use and de-clutter content that would otherwise become redundant. Icons on hover reduce the cognitive load (especially in complex tables) and also discourage use of destructive actions. For example: When a table has rows with actions that remove (destructively), delete, disconnect, or destroy the object being acted upon, or if it may cripple the work in another system. image

So in your case I recommend to show the icons on hover only. See also guidance here

If you use an overflow menu (in case you have more than 2 actions), you should show it always persistently by default. Overflow menus on hover are hard to discover due to the low visual contrast (compared to other icons.)

BenceLovas commented 8 months ago

We've had complaints from our users that they had a hard time figuring out where the action buttons were when those were in the overflow menu. (My assumption is this specific user group is not digitally native.) So, that's why we were wondering how they would respond if there is nothing displayed at the first place. Personally I fully understand your reasoning behind de-cluttering and reducing the cognitive load. Thanks for the answers!