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

[oandregal]

What

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

https://github.com/user-attachments/assets/e1c297a6-4feb-4d9e-97df-4825392a6928

Proposal

When there's only a single primary action, make it visible and hide the action's dropdown:

[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 https://github.com/WordPress/gutenberg/issues/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:

https://github.com/user-attachments/assets/9027b327-0a8d-4fd9-b56e-f8781ca93e30

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