Tabs: add vertical indicator animation (#62879)

* Add vertical indicator animation. * Remove style overrides from preferences menu in the block editor. Co-authored-by: DaniGuardiola <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · Jun 27, 2024 · 6de2f42 · 6de2f42
1 parent b883f30
commit 6de2f42
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 32 deletions.
diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
@@ -36,22 +36,20 @@ export const TabListWrapper = styled.div`
 		outline-offset: -1px;
 	}
 	&:not( [aria-orientation='vertical'] )::after {
-		left: var( --indicator-left );
 		bottom: 0;
+		left: var( --indicator-left );
 		width: var( --indicator-width );
 		height: 0;
 		border-bottom: var( --wp-admin-border-width-focus ) solid
 			${ COLORS.theme.accent };
 	}
 	&[aria-orientation='vertical']::after {
-		/* Temporarily hidden, context: https://github.com/WordPress/gutenberg/pull/60560#issuecomment-2126670072 */
-		opacity: 0;
-
-		right: 0;
+		z-index: -1;
+		left: 0;
+		width: 100%;
 		top: var( --indicator-top );
 		height: var( --indicator-height );
-		border-right: var( --wp-admin-border-width-focus ) solid
-			${ COLORS.theme.accent };
+		background-color: ${ COLORS.theme.gray[ 100 ] };
 	}
 `;
 

diff --git a/packages/preferences/src/components/preferences-modal-tabs/style.scss b/packages/preferences/src/components/preferences-modal-tabs/style.scss
@@ -6,31 +6,6 @@ $vertical-tabs-width: 160px;
 	// Aligns button text instead of button box.
 	left: $grid-unit-20;
 	width: $vertical-tabs-width;
-
-	&::after {
-		content: none !important;
-	}
-}
-
-.preferences__tabs-tab {
-	border-radius: $radius-block-ui;
-	font-weight: 400;
-
-	&[aria-selected="true"] {
-		background: $gray-100;
-		box-shadow: none;
-		font-weight: 500;
-	}
-
-	&[role="tab"]:focus:not(:disabled) {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		// Windows high contrast mode.
-		outline: 2px solid transparent;
-	}
-
-	&:focus-visible::before {
-		content: none;
-	}
 }
 
 .preferences__tabs-tabpanel {