Tabs: icon tabs and text tabs have a different height

[ciampo]

Text tabs (ie. <Tabs.Tab>text</Tabs.Tab>) are 48px tall: https://wordpress.github.io/gutenberg/?path=/story/components-experimental-tabs--default

Icon tabs (ie. <Tabs.Tab><Icon /></Tabs.Tab>) are 56px tall: https://wordpress.github.io/gutenberg/?path=/story/components-experimental-tabs--with-tab-icons-and-tooltips

Should we revise any aspects of this? It may be tricky to enforce it fully with the current set of APIs, since Tabs can not possibly know what its children are.

[ciampo]

cc @WordPress/gutenberg-components @WordPress/gutenberg-design

[jasmussen]

They should both have the same height, of course. Probably best to maintain the 48px height for now, since it affects a key visual of the editor:

[jameskoster]

If we used min-height and removed vertical padding I think that would solve this issue? Appreciate it wouldn't account for children taller than 48px, but that feels like an edge case to me.

[ciampo]

We could probably just remove the vertical padding and rely on flexbox alignment ?

[patil-vipul]

Raising a PR as per the suggestion from @ciampo in sometime.

cc: @ciampo @jameskoster @jasmussen

[DaniGuardiola]

The Tabs component is currently heavily in flux, so please hold off on working on this until a few tweaks have been merged. I believe one of the pending PRs fixes this already.

[DaniGuardiola]

This will be fixed by #65387

[ciampo]

Closing as fixed in #65387

[t-hamano]

In WordPress 6.7 Beta3, I noticed that the icon tabs are 56px tall:

https://playground.wordpress.net/?wp=beta

Whereas in WordPress 6.6, it is 48px:

https://playground.wordpress.net/?wp=6.6

Maybe a special backport is needed for WordPress 6.7?