From 48a9f6afe80d3cdcaf2168eea540465a006e2523 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 11 Jul 2024 16:13:57 +0100 Subject: [PATCH 1/3] Inserter: Reduce the height of the categories tabs to 40px --- packages/block-editor/src/components/inserter/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 3e30f0713b5295..6853b31b1be53d 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -243,6 +243,7 @@ $block-inserter-tabs-height: 44px; display: block; position: relative; height: auto; + min-height: 40px; &[aria-selected="true"] { color: var(--wp-admin-theme-color); From 6c4ad0598b7c9b228e2ee178638b14ba4255ab33 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 11 Jul 2024 16:23:46 +0100 Subject: [PATCH 2/3] Make all vertically oriented tabs have a min height of 40px --- packages/block-editor/src/components/inserter/style.scss | 1 - packages/components/src/tabs/styles.ts | 6 ++++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 6853b31b1be53d..3e30f0713b5295 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -243,7 +243,6 @@ $block-inserter-tabs-height: 44px; display: block; position: relative; height: auto; - min-height: 40px; &[aria-selected="true"] { color: var(--wp-admin-theme-color); diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts index 88e54285d619b1..7d67f462c7e87e 100644 --- a/packages/components/src/tabs/styles.ts +++ b/packages/components/src/tabs/styles.ts @@ -120,6 +120,12 @@ export const Tab = styled( Ariakit.Tab )` opacity: 1; } } + + [aria-orientation='vertical'] & { + min-height: ${ space( + 10 + ) }; // Avoid fixed height to allow for long strings that go in multiple lines. + } `; export const TabPanel = styled( Ariakit.TabPanel )` From 8514c28eb1139887032355b50cb6cbad8adb3749 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 15 Jul 2024 11:14:57 +0100 Subject: [PATCH 3/3] Add Changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 21ece7c6aaed34..9f3731a282d262 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -12,6 +12,7 @@ - `CustomSelectControlV2`: animate select popover appearance. ([#63343](https://github.com/WordPress/gutenberg/pull/63343)) - `CustomSelectControlV2`: do not flip popover if legacy adapter. ([#63357](https://github.com/WordPress/gutenberg/pull/63357)). - `DropdownMenuV2`: invert animation direction. ([#63443](https://github.com/WordPress/gutenberg/pull/63443)). +- `Tabs`: Vertical Tabs should be 40px min height. ([#63446](https://github.com/WordPress/gutenberg/pull/63446)). ### Enhancements