From b561a2b52d1c4e981f528c9693599d578507aa3e Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 27 May 2024 14:24:42 +0200 Subject: [PATCH 1/2] Make Tabs fluid height. --- packages/components/src/tabs/styles.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) 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; } } `; From 8baa662be47cc8b5ad4f0376114b6264504183fe Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 27 May 2024 15:15:29 +0200 Subject: [PATCH 2/2] Add changelog entry. --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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))