DataViews edit page and template: remove multiple edit actions

[karmatosed]

What problem does this address?

In DataViews there are two issues.

1. Edit can appear twice.
2. A single menu item just with 'edit' can be seen on for example Templates. Where on pages this might be a pancil icon and also in menu.

What is your proposed solution?

Overall, I would suggest not using hidden option menus. However, that patterns iteration is a longer discussion. I would like to focus on a fix that can clean up this situation. Then looking at ways to expose as much as possible on interaction over use any hidden menus would be the way forward.

Option one: Remove the pencil icon and only have edit in the menu.
This is less than ideal as the primary action is probably 'edit,' which is why it was exposed in the first place.
The reason to do this might be that the pencil icon is less accessible, but I would love feedback on this. Having hidden features might be less desirable in an options menu.

Evidence to maybe do this is that the Post screen hasn't got an exposed primary action:

Option two: Remove edit from the menu
As it is exposed as a primary feature anyway, this means that this interaction would be true:

• Any primary action is visible outside the menu and removed as text in menu.
• The options menu with just 'edit' would be removed, and the pencil icon would be added.

This could also apply to other cases. In the case of the Post screen, this could even make rename work by clicking inside the field later. That feels outside the scope of this ticket but is a natural behaviour expected by fields. I think 'view' is the primary. This is one of the issues with these hidden menus and only exposing the primary.

[Rishit30G]

Thanks for sharing the issue,

I was able to achieve the first option suggested: Remove the pencil icon and only have edit in the menu

This was a simple fix, however even I feel that option two is much more viable
I did give the second option a try, but couldn't achieve it because the useEditPostAction tightly couples the icon and label present in the DataView, I'll try to investigate more if we can make option two possible

However for now, below screencast shares the draft PR ( #68797 ) changes to achieve Option 1:

Screen.Recording.2025-01-21.at.11.15.50.AM.mov

[karmatosed]

Thank you @Rishit30G for this. I do wonder if we can do something though about keeping the icon. Seeing this makes me really miss it. It also doesn't resolve the menus with just that item in it.

[Rishit30G]

Noted @karmatosed, as mentioned above I will investigate it and see how we can achieve that 👍🏻

[carolinan]

There are many past discussions about these menus and workflows, including:
#65165
#65600

[Rishit30G]

It also doesn't resolve the menus with just that item in it.

Please let me know if this looks good @karmatosed ? 🙇🏻

[Rishit30G]

On investigating a little bit I could find that when we are on the Grid or Table view has 3 icons ( Edit, View Delete ) that appear but they are also mentioned in the action dropdown that we have, so would that also need some cleanup i.e the option version of these icons should be removed from the dropdown ? 🤔
Because we plan to remove it from the List view then we should also consider Grid and Table
Requires a design feedback 🙇🏻

Screen.Recording.2025-01-22.at.1.58.58.PM.mov

[carolinan]

In the template grid view, do we really want a new icon option for edit, and then another button with three dots beside it, that opens a menu that contain a single option? Theme templates that have been edited by the user can be reset, and if edit is moved, that will be the only option in the menu.
Do we want the options to be different depending on if the template is edited?

User created templates have rename and delete, so the three dot menu will always have at least two options.

[afercia]

A single menu item just with 'edit' can be seen on for example Templates.

Focusing only on this point, I think dropdown menus with only one item are a broader issue across the editor, not limited to Dataviews. It's been discussed previously and I'm still not sure what the benefit of having a dropdown menu that only contains one item is. To me, it's clearly an usability issue and it forces users to a double click to 1) discover 2) take the action.

Most of these menus with only one item use an ellipsis icon, which already has inherent accessibility issues. Also, conceptually, the ellipsis icon is a 'More' menu, which implies there should be other controls before it. However, the ellipsis icon button is often used 'in isolation' and named inconsistently: Actions, Options, etc.

A couple previous related discussions: #42555 and #42505. Quoting:

The ellipsis button opens a dropdown menu, even when the menu contains just one item. In this case, users are forced to click twice to actually take the only available action. Seems to me this isn't ideal. When there's only one action, there's no need for a dropdown menu in the first place.

A few usage examples outside of the Dataviews can be seen at:

• Template cards > ellipsis button
• Pattern cards > ellipsis button
• Styles > Colors > Edit palette > 'Color options' ellipsis button
• Styles > Background > 'Background image options' ellipsis button > Toolspanel with only one setting to reset

Screenshots:

Overall, I'd think the 'menu with only one item' pattern should be considered holistically and likely have a separated issue for discussion.

Note: The background setting 'Reset all' sounds a little off as there's only one thing to reset.

[Rishit30G]

Thanks for sharing your views and thoughts @carolinan and @afercia! 🙇🏻
So for now I believe I can make the fix for removing the 3 dot icon from template grid and table and only keep the icon for a user friendly experience
I have updated my PR accordingly ( #68797 )

[afercia]

A single menu item just with 'edit' can be seen on for example Templates.

I'd think this specific part of the issue should be extended to all cases where a menu contains only one menu item. It's not just about the 'edit' action. There are other cases where the ellipsis menu contains only one item e.g. in Patterns > All patterns, it only contains 'Duplicate':

As an user, I don't want to have to open a menu to find only one action that doesn't need a 'More" menu.

[Rishit30G]

I would be introducing a new filter function, to separate out the Primary Actions from the dropdown and make them visible as icons only
So before committing the code, I would like to share a screencast that shows how the Grid and Table would look like:
Please share your thoughts/suggestions if it is the expected solution to the issue raised 🙏🏻

Screen.Recording.2025-01-30.at.4.23.43.PM.mov

Feedback from Mamaduka: #68797 (comment)

I think the current action-related design choices are intentional. The gird uses a compact version because there is limited space.

It's probably better to move the conversation back to the issue before we move forward with a solution.