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

Make Tabs have a fluid height #62027

Merged
merged 2 commits into from
Jul 9, 2024
Merged

Conversation

afercia
Copy link
Contributor

@afercia afercia commented May 27, 2024

Fixes #62018

What?

The styling of the Tabs component doesn't take into account longer strings that wrap to multiple lines. The focus style overlaps the text and partially hides it.

Why?

Text should always be fully readable.
Fixed heights should be avoided as much as possible, to allow text to re-flow and adapt.

How?

  • Makes the tabs height fluid.
  • Simplifies the focus style: in this case there's no need to use both box-shadow and outline. The latter always works, also for Windows Hight Contrast Mode, and cam be styled exactly like the previous box-shadow.
  • The default height is now a min-height of 48 pixels.

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Before:

before

After:

after

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Package] Components /packages/components CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Show button text labels A preference in the Post and Site Editor that makes buttons show text instead of icons labels May 27, 2024
@afercia afercia requested a review from ajitbohra as a code owner May 27, 2024 13:13
Copy link

github-actions bot commented May 27, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: huzaifaalmesbah <huzaifaalmesbah@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@huzaifaalmesbah
Copy link
Contributor

This is looking good to me.

@afercia afercia requested review from mirka and ciampo July 8, 2024 08:48
@ciampo
Copy link
Contributor

ciampo commented Jul 8, 2024

Thank you for working on this, i'll take a look tomorrow

Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went ahead and merged current trunk to test it with the most recent indicator styles for orientation="vertical".

I found two pre-existing problems which I broke out into a separate issue/PR, if anyone else notices them too:

Otherwise, code changes look good to me 👍

@afercia afercia force-pushed the fix/tabs-focus-style-overelaps-text branch from feb0309 to 8baa662 Compare July 9, 2024 07:15
@afercia
Copy link
Contributor Author

afercia commented Jul 9, 2024

Thanks all for your review and feedback.

@afercia afercia merged commit 6812059 into trunk Jul 9, 2024
61 checks passed
@afercia afercia deleted the fix/tabs-focus-style-overelaps-text branch July 9, 2024 07:58
@github-actions github-actions bot added this to the Gutenberg 18.8 milestone Jul 9, 2024
huubl pushed a commit to huubl/gutenberg that referenced this pull request Jul 10, 2024
* Make Tabs fluid height.

* Add changelog entry.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: huzaifaalmesbah <huzaifaalmesbah@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Jul 18, 2024
* Make Tabs fluid height.

* Add changelog entry.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: huzaifaalmesbah <huzaifaalmesbah@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Show button text labels A preference in the Post and Site Editor that makes buttons show text instead of icons [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). 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

Successfully merging this pull request may close these issues.

Tabs: focus style overlaps text when 'Show button text labels' preference is enabled
4 participants