From adc1992fe73fea271069aeed54692e77d62c2843 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 9 Jul 2024 09:58:15 +0200 Subject: [PATCH] Make Tabs have a fluid height (#62027) * Make Tabs fluid height. * Add changelog entry. Co-authored-by: afercia Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: huzaifaalmesbah Co-authored-by: ciampo --- packages/components/CHANGELOG.md | 1 + packages/components/src/tabs/styles.ts | 14 ++++++++------ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 01218a30c36e04..1bef17c7b487a1 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -16,6 +16,7 @@ ### Bug Fixes +- `Tabs`: Make Tabs have a fluid height ([#62027](https://github.com/WordPress/gutenberg/pull/62027)). - `UnitControl`: Fix colors when disabled. ([#62970](https://github.com/WordPress/gutenberg/pull/62970)) - `useUpdateEffect`: Correctly track mounted state in strict mode. ([#62974](https://github.com/WordPress/gutenberg/pull/62974)) - `UnitControl`: Fix an issue where keyboard shortcuts unintentionally shift focus on Windows OS. ([#62988](https://github.com/WordPress/gutenberg/pull/62988)) diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts index bd33476a2ccd2a..7fbb8b52d7e5a5 100644 --- a/packages/components/src/tabs/styles.ts +++ b/packages/components/src/tabs/styles.ts @@ -58,12 +58,16 @@ export const Tab = styled( Ariakit.Tab )` align-items: center; position: relative; border-radius: 0; - height: ${ space( 12 ) }; + min-height: ${ space( + 12 + ) }; // Avoid fixed height to allow for long strings that go in multiple lines. + height: auto; background: transparent; border: none; box-shadow: none; cursor: pointer; - padding: 3px ${ space( 4 ) }; // Use padding to offset the [aria-selected="true"] border, this benefits Windows High Contrast mode + line-height: 1.2; // Some languages characters e.g. Japanese may have a native higher line-height. + padding: ${ space( 4 ) }; margin-left: 0; font-weight: 500; @@ -93,7 +97,8 @@ export const Tab = styled( Ariakit.Tab )` pointer-events: none; // Draw the indicator. - box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) + // Outline works for Windows high contrast mode as well. + outline: var( --wp-admin-border-width-focus ) solid ${ COLORS.theme.accent }; border-radius: 2px; @@ -107,9 +112,6 @@ export const Tab = styled( Ariakit.Tab )` &:focus-visible::before { opacity: 1; - - // Windows high contrast mode. - outline: 2px solid transparent; } } `;