DataViews: when there's only one action and is primary, hide actions dropdown

[oandregal]

What

In some scenarios, the DataViews' consumer only declares one primary action. This is how it looks

Gravacao.do.ecra.2024-09-09.as.17.30.02.mov

Proposal

• Grid layout: to stay as it is.
• Table & List: hide the action's dropdown. For example:

[oandregal]

cc @jameskoster @youknowriad

[jameskoster]

I think this makes sense for table layout. How do you see it working in other layouts, it might look a bit odd in Grid?

[oandregal]

I think this makes sense for table layout. How do you see it working in other layouts, it might look a bit odd in Grid?

Right. Making this work for Table & List (only them display primary actions) should be a good first step, leaving Grid as it is (users interact with actions via the dropdown).

[jameskoster]

Sounds good to me!

[oandregal]

What's difficult about grid that we cannot have actions? Is it that the actions compete with the title for the space? Related #65600

I'm thinking it'd be nice to support this interaction in DataViews. Perhaps we'd want it in the media library so you can preview images with duotone filters? Or in the templates page to quickly see how different palettes affect a template? All those little rounded buttons would be primary actions:

Gravacao.do.ecra.2024-09-25.as.18.07.54.mov

(not that we need to address it right now, but thought I'd share as food for thought)

[jameskoster]

Is it that the actions compete with the title for the space?

Mostly yes. Displaying primary actions would require a good design.

How would the example actions you shared work on table layout, or would they be layout-locked (grid/list only)?

[oandregal]

How would the example actions you shared work on table layout, or would they be layout-locked (grid/list only)?

Consumers can already provide actions that are specific to a layout with something along these lines:

let actions = [];
switch (view.type) {
    case 'grid':
        actions = getGridActions();
        break;
    default:
        actions = getDefaultActions();
}

<DataViews
  view={ view }
  actions={ actions }
/>

In the example I shared I agree those color switcher actions wouldn't make much sense in table, for example.

[oandregal]

I've started to work on this for the list layout: #67015

@jameskoster I'm thinking about tackling table next. If we hide the actions menu for table, I believe the primary action' icon should always be visible (now it's only displayed on hover). Thoughts?

[oandregal]

#67020 for table layout.

[oandregal]

The changes for table have landed and list changes are scheduled to land soon, so I'm closing this one.