diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 08a99c0d8ed2cd..bbe5c984f16b38 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -39,6 +39,7 @@ ### Bug Fixes +- `Tabs`, `TabPanel`: Expand vertical tab interaction backgrounds and focus rings across the row ([#84821](https://github.com/WordPress/gutenberg/pull/84821)). - `StyleProvider`: Register module styles before children measure layout in iframe documents ([#84736](https://github.com/WordPress/gutenberg/pull/84736)). - `BorderBoxControl`: Unpack multi-value CSS box shorthand strings (such as `"0 0 0 2px"`) into individual side widths when splitting borders ([#84826](https://github.com/WordPress/gutenberg/pull/84826)). - `SelectControl`: Preserve the minimal variant's inline layout in iframe documents ([#84732](https://github.com/WordPress/gutenberg/pull/84732)). diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss index 1d4f995de47e04..8c2194bf47d4c0 100644 --- a/packages/components/src/tab-panel/style.scss +++ b/packages/components/src/tab-panel/style.scss @@ -41,8 +41,7 @@ &:focus-visible { color: var(--wpds-color-foreground-interactive-neutral-active); - &::before, - & .components-tab-panel__tabs-item-label::before { + &::before { background-color: var(--wpds-color-background-interactive-neutral-weak-active); } } @@ -85,10 +84,6 @@ // Interaction background and focus ring. &::before { content: ""; - } - - &::before, - & .components-tab-panel__tabs-item-label::before { position: absolute; z-index: -1; inset: var(--wpds-dimension-padding-md); @@ -96,37 +91,20 @@ border-radius: var(--wpds-border-radius-sm); } - &:focus-visible::before, - &:focus-visible .components-tab-panel__tabs-item-label::before { + &:focus-visible::before { @include outset-ring__focus(); outline-offset: 0; } .components-tab-panel__tabs[aria-orientation="vertical"] & { &::before { - content: none; - } - - &.has-icon::before { - content: ""; - inset-block: var(--wpds-dimension-padding-sm); - inset-inline-start: - calc(50% - var(--wpds-dimension-size-sm) / - 2 - var(--wpds-dimension-padding-xs)); - inset-inline-end: auto; - width: - calc(var(--wpds-dimension-size-sm) + 2 * - var(--wpds-dimension-padding-xs)); + inset: 0; + outline-offset: calc(-1 * var(--wpds-border-width-focus)); } & .components-tab-panel__tabs-item-label { position: relative; display: inline-flex; - - &::before { - content: ""; - inset: calc(-1 * var(--wpds-dimension-padding-xs)); - } } &::after { diff --git a/packages/components/src/tabs/style.module.scss b/packages/components/src/tabs/style.module.scss index d5e6af40d02415..8a35a46ef0c2d6 100644 --- a/packages/components/src/tabs/style.module.scss +++ b/packages/components/src/tabs/style.module.scss @@ -91,6 +91,7 @@ &::before { top: var(--wpds-dimension-padding-md); inset-inline-start: 0; + z-index: 1; width: var(--wp-admin-border-width-focus); height: max(0px, calc(var(--selected-height, 0) * 1px - 2 * var(--wpds-dimension-padding-md))); transform: translateY(calc(var(--selected-top, 0) * 1px)); @@ -134,8 +135,7 @@ ) { color: var(--wpds-color-foreground-interactive-neutral-active); - &::after, - & .tab-children::after { + &::after { background-color: var(--wpds-color-background-interactive-neutral-weak-active); opacity: 1; } @@ -149,8 +149,7 @@ // Interaction background and focus indicator. position: relative; isolation: isolate; - &::after, - & .tab-children::after { + &::after { position: absolute; z-index: -1; pointer-events: none; @@ -168,8 +167,7 @@ } } - &[data-focus-visible]::after, - &[data-focus-visible] .tab-children::after { + &[data-focus-visible]::after { outline-color: $components-color-accent; opacity: 1; } @@ -189,6 +187,12 @@ [aria-orientation="vertical"] & { padding: var(--wpds-dimension-padding-md); min-height: var(--wpds-dimension-size-lg); + + &::after { + content: ""; + inset: 0; + outline-offset: calc(-1 * var(--wp-admin-border-width-focus)); + } } } @@ -202,14 +206,7 @@ justify-content: center; } [aria-orientation="vertical"] & { - flex-grow: 0; - position: relative; justify-content: start; - - &::after { - content: ""; - inset: calc(-1 * var(--wpds-dimension-padding-xs)); - } } } diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 6d76db5efb7071..36d7814fed4cca 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -32,6 +32,7 @@ ### Bug Fixes +- `Tabs`: Expand vertical tab interaction backgrounds and focus rings across the row ([#84821](https://github.com/WordPress/gutenberg/pull/84821)). - Keep the `Link` new-tab indicator with the preceding text when wrapping ([#84806](https://github.com/WordPress/gutenberg/pull/84806)). - `Select`: Keep long popup lists scrollable when item alignment falls back to anchored positioning or the popup opens through touch ([#84682](https://github.com/WordPress/gutenberg/pull/84682)). - `Combobox.Input`, `SearchableSelect`, and `SearchableSelectControl`: Orient the search icon toward the top left in LTR and the top right in RTL ([#84690](https://github.com/WordPress/gutenberg/pull/84690)). diff --git a/packages/ui/src/tabs/style.module.css b/packages/ui/src/tabs/style.module.css index dafd08396f6016..5c77ea3f5fd026 100644 --- a/packages/ui/src/tabs/style.module.css +++ b/packages/ui/src/tabs/style.module.css @@ -150,8 +150,7 @@ ) { color: var(--wpds-color-foreground-interactive-neutral-active); - &::after, - & .tab-children::after { + &::after { background-color: var(--wpds-color-background-interactive-neutral-weak-active); opacity: 1; } @@ -159,8 +158,7 @@ /* Interaction background and focus indicator. */ &::before, - &::after, - & .tab-children::after { + &::after { position: absolute; z-index: -1; pointer-events: none; @@ -177,8 +175,7 @@ } } - &:focus-visible::after, - &:focus-visible .tab-children::after { + &:focus-visible::after { outline-color: var(--wpds-color-stroke-focus); opacity: 1; } @@ -242,6 +239,12 @@ [data-orientation="vertical"] & { padding: var(--wpds-dimension-padding-md); min-height: var(--wpds-dimension-size-lg); + + &::after { + content: ""; + inset: 0; + outline-offset: calc(-1 * var(--wpds-border-width-focus)); + } } } @@ -256,14 +259,7 @@ } [data-orientation="vertical"] & { - flex-grow: 0; - position: relative; justify-content: start; - - &::after { - content: ""; - inset: calc(-1 * var(--wpds-dimension-padding-xs)); - } } } }