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

Tabs: Make default text alignment consistent #62025

Open
afercia opened this issue May 27, 2024 · 4 comments
Open

Tabs: Make default text alignment consistent #62025

afercia opened this issue May 27, 2024 · 4 comments
Labels
Needs Design Feedback Needs general design feedback. [Package] Components /packages/components [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented May 27, 2024

Description

Noticed while working on #62018

Wondering whether there is any reason why the text horizontal alignment for some tabs is left and for some tabs is centered.
I would expect the alignment to be consistent across the UI.

Example screenshot from latest trunk:

  • On the ledt: In the main inserter, the tabs text is aligned to the left.
  • On the right: in the block inspector main tabs and controls tabs, the text is aligned to the center.

Screenshot 2024-05-27 at 14 37 27

I'd think at least the default alignment should be always consistent.
In the rare cases where a different alignment is desired, this should be done with a variant of the base component rather than with ad-hoc CSS.

Cc @WordPress/gutenberg-design

Step-by-step reproduction instructions

  • Go to the post editor > Options > Preferences > Accessibility, and enable the 'Show button text labels' preference.
  • Add a Navigation block and select it (or any other block that uses tabs in its inspector).
  • Open the main inserter.
  • Observe the tabs text alignment is inconsistent.

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

@afercia afercia added [Type] Bug An existing feature does not function as intended Needs Design Feedback Needs general design feedback. [Package] Components /packages/components labels May 27, 2024
@afercia
Copy link
Contributor Author

afercia commented May 27, 2024

Note: the left alignment doesn't look great, especially when the focus style is visible:

Screenshot 2024-05-27 at 14 50 31

@HILAYTRIVEDI
Copy link
Contributor

Screenshot 2024-05-27 at 9 44 07 PM

I think aligning it in the center looks nice.

@HILAYTRIVEDI
Copy link
Contributor

Just adding justify-content:center will achieve the above.

.block-editor-inserter__tabs div[role=tablist] button[role=tab]{
         justify-content:center;
}

@DaniGuardiola
Copy link
Contributor

Related: #61974

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] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

3 participants