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.

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

Establish a consistent pattern for navigation buttons that open sub-panels #66448

Open
2 of 6 tasks
afercia opened this issue Oct 25, 2024 · 0 comments
Open
2 of 6 tasks
Labels
Needs Design Feedback Needs general design feedback. [Package] Edit Site /packages/edit-site [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Oct 25, 2024

Description

In the Site editor, some settings panels have sub-panels (drill-down menus in design jargon). The controls to open these sub-panels are usually NavigationButtonAsItem components (under the hod it's a Navigator.Button).

Some of these buttons do show a chevron icon to visually communicate they open a drill-down menu. Some don't.

It's not that clear to me what the criteria is to determine which buttons should show a chevron and which ones should not.

There may be reasons why some don't but I'd tend to think a chevron icon adds value as it makes the user experiences more predictable and communicates well what's going to happen when clicking one of these buttons.

There are other minor inconsistencies, for example some of these buttons have a border. Some don't.
I do realize the navigation buttons that are grouped in a set of logically related items need to be styled a bit differently. Still, the lack of a chevron icon introduces inconsistency and doesn't help predictability.

A few examples:

The following navigation buttons show a chevron icon:

  • Styles > Colors > Edit palette
  • Styles > Typography > Font size presets
  • Styles > Browse styles
  • Styles > Blocks
  • Styles > Additional CSS

Image

The following navigation buttons do not show a chevron icon:

  • Styles root menu: Typography, Colors, Background, Shadows, Layout.
  • Styles > Typography > Elements

Image

The buttons undeer 'Elements' are particularly confusing to me. They look like the fonts ones above. However, the fonts ones open a modal dialog while the Elements ones open a drill-down menu. They basically look the same, but they do different things.

One more example:

  • The custom shadows navigation buttons don't show a chevron icon. It's particularly confusing when there's only one custom shadow:

Image

I'd like to propose to use a chevron icon for all the buttons that open a drill-down menu.
Also i'd suggest to consider some more consistency about borders and margins.

Step-by-step reproduction instructions

N/A
See the examples in the Site editor > Styles panel

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
@afercia afercia added [Package] Edit Site /packages/edit-site [Type] Bug An existing feature does not function as intended Needs Design Feedback Needs general design feedback. labels Oct 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Feedback Needs general design feedback. [Package] Edit Site /packages/edit-site [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

1 participant