From d41436657a879b8ed942ad3d86534b3903350098 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 9 Jul 2024 20:27:08 +0900 Subject: [PATCH] Tabs: Fix text-align when text wraps in vertical mode (#63272) * Tabs: Fix text-align when text wraps in vertical mode * Add changelog Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: DaniGuardiola --- packages/components/CHANGELOG.md | 1 + packages/components/src/tabs/styles.ts | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1bef17c7b487a1..0abb1b79050eba 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -22,6 +22,7 @@ - `UnitControl`: Fix an issue where keyboard shortcuts unintentionally shift focus on Windows OS. ([#62988](https://github.com/WordPress/gutenberg/pull/62988)) - Fix inaccessibly disabled `Button`s ([#62306](https://github.com/WordPress/gutenberg/pull/62306)). - `TimePicker`: Fix time zone overflow ([#63209](https://github.com/WordPress/gutenberg/pull/63209)). +- `Tabs`: Fix text-align when text wraps in vertical mode ([#63272](https://github.com/WordPress/gutenberg/pull/63272)). ### Internal diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts index 7fbb8b52d7e5a5..d6fb117a3032a0 100644 --- a/packages/components/src/tabs/styles.ts +++ b/packages/components/src/tabs/styles.ts @@ -15,9 +15,13 @@ export const TabListWrapper = styled.div` display: flex; align-items: stretch; flex-direction: row; + text-align: center; + &[aria-orientation='vertical'] { flex-direction: column; + text-align: start; } + @media not ( prefers-reduced-motion: reduce ) { &.is-animation-enabled::after { transition-property: left, top, width, height; @@ -70,6 +74,7 @@ export const Tab = styled( Ariakit.Tab )` padding: ${ space( 4 ) }; margin-left: 0; font-weight: 500; + text-align: inherit; &[aria-disabled='true'] { cursor: default;