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

The shadows menu items miss a chevron icon #67696

Closed
2 of 6 tasks
afercia opened this issue Dec 6, 2024 · 5 comments · Fixed by #67720
Closed
2 of 6 tasks

The shadows menu items miss a chevron icon #67696

afercia opened this issue Dec 6, 2024 · 5 comments · Fixed by #67720
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Dec 6, 2024

Description

In the Global styles panel there are several menu items that provide access to su-pabels, in design jarcon the 'drill-down' menu sub-panels.

Moat of these menu items use a chevron icon to visually indicate the presence of a sub-level panel and to make interaction predictable.

The Shadows menu items don't.

For consistency and better user experience, I think all the menu items that navigate to a drill-down sub-level should use the chevron icon.

Cc @WordPress/gutenberg-design

Screenshot with a few examples:

Image

Step-by-step reproduction instructions

  • Go to the Site editor > Styles > Shadows
  • Observe the shadows menu items don't use a chevron icon.

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 [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. labels Dec 6, 2024
@richtabor
Copy link
Member

Why are we rendering the font sizes alongside the labels? You can't interact with them from this view and they don't mean anything. Reading 1.75rem has no frame of reference in relation to a font size. We don't show them for shadows, naturally.

I propose that if we add chevrons, we remove the font size values.

@Mamaduka
Copy link
Member

Mamaduka commented Dec 8, 2024

Should we also remove the icon prefix for the shadow names? It's the same icon and doesn't convey any meaning.

@afercia
Copy link
Contributor Author

afercia commented Dec 9, 2024

I'd agree with both points above: removing the font sizes and the icons for the shadows, although those are issues slighly outside the scope of this report which is specifically about the chevron icon.

Regarding the icon for the shadows:
I'm not sure I ever understood why the concept of shadow (dim light, penumbra, dark) is conveyed by the means of an icon that represents a shining sun. Anyone have any context about it?

@Mamaduka
Copy link
Member

Mamaduka commented Dec 9, 2024

I think @yogeshbhutkar started working to resolve all points in #67720, so we can handle these in one go.

I'm not sure I ever understood why the concept of shadow (dim light, penumbra, dark) is conveyed by the means of an icon that represents a shining sun. Anyone have any context about it?

I'm not sure. The same icon is usually used in OS to represent screen brightness, so it seems out of place here.

@jameskoster
Copy link
Contributor

Related: #64445

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants