Tabs: Vertical Tabs should be 40px min height

[scruffian]

What?

Vertical tabs should be 40px min-height.

Why?

We don't need as much spacing for vertical tabs.

How?

Apply min-height: 40px to tabs which have a [aria-orientation='vertical'] attribute.

Screenshots or screencast

Before	After

[github-actions]

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: scruffian <scruffian@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: tyxla <tyxla@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.

[jeryj]

This seems like the right place to fix this 👍🏻

[jeryj]

Can we wrap this in a media query? For touch devices the larger 48px click area is helpful.

[mirka]

For touch devices the larger 48px click area is helpful.

FWIW, the 40px size (the new default height for basic control components) was chosen specifically to be touch-friendly, so I don't think we need to upsize on touch devices.

[scruffian]

I added a breakpoint. Unfortunately we can't use the mixin in typescript.

[mirka]

We don't need as much spacing for vertical tabs.

Are we sure that makes sense in the general case? No strong opinion, but just wanted to make sure this decision wasn't colored too much by the patterns inserter case, where there happen to be a ton of tabs, and they are "secondary" to the horizontal tabs on top. (Or, it could mean that we can downsize the horizontal tabs to 40px as well.)

[richtabor]

Are we sure that makes sense in the general case?

Yes, I would think so. It's more about the target area and not the space between the words that you see. 40px is the standard large size that we should use in most cases. Horizontal tabs are fine as-is.

[richtabor]

LGTM

Before	After

[DaniGuardiola]

As I was looking through different instances of Tabs, I realized we have many divergences with custom styles. This was one of them, so I'd like to do a full pass and make sure we can minimize those divergences across instances.

I might follow up with a PR that removes pretty much all custom styles so we can visualize it and make decisions about what styles/variants need to make it into the base component, or remain as a custom style.

[tyxla]

As I was looking through different instances of Tabs, I realized we have many divergences with custom styles. This was one of them, so I'd like to do a full pass and make sure we can minimize those divergences across instances.

I might follow up with a PR that removes pretty much all custom styles so we can visualize it and make decisions about what styles/variants need to make it into the base component, or remain as a custom style.

I second this. Ideally, we should try to generalize any solutions and have as few style overrides as possible. This will make maintenance easier and will ensure we're more consistent across the entire editor.

[ciampo]

Absolutely. When a different design from what the source component offers is needed, we should fall into one of these two buckets:

• if possible, we try to use what the component offers already without any overrides
• if we really, really think that the new design / behavior is needed, than we should find the bet way to add it to the source component, without any overrides.

Keeping this mindset may cause slower pace of iteration, but it's immensely beneficial in the long term, both in terms of speed of iteration and consistency across the whole ecosystem.

[richtabor]

@ciampo is this clear to merge?

[ciampo]

@ciampo is this clear to merge?

I initially shared the same doubts as Lena, but if there's agreement that this change makes sense in the general case we can go ahead after adding a CHANGELOG entry (it can go under Internal since Tabs is still a private component) 🚀

As a follow-up, I would also strongly recommend that we do a pass of all Tabs instances and remove as many style overrides as possible (ideally all of them) as @DaniGuardiola suggested. Style divergences are a symptom that our designs are inconsistent and/or that the source component is not offering what consumers need, and we should fix it — especially since we'd like to stabilize Tabs very soon.