Merge branch 'vpn/task/vpnbe-1334-fix-tab-css' into 'main'

[VPNBE-1334] Fix Tab underline variant css

See merge request web/clients!16930

Author: MargeBot

packages/components/components/tabs/Tabs.scss

@@ -1,7 +1,7 @@
 @import '~@proton/styles/scss/lib';
 
 .tabs {
-	&.withTransition > &-nav &-link {
+	&.with-transition > &-nav &-link {
 		transition: 0.15s easing(ease-out-quint);
 	}
 
@@ -45,7 +45,7 @@
 		}
 	}
 
-	&--underline.withTransition > &-nav &-indicator {
+	&--underline.with-transition > &-nav &-indicator {
 		transition: transform 0.15s easing(ease-out-quad);
 	}
 
@@ -58,6 +58,14 @@
 		transform: translateX(var(--tabs_translate)) scaleX(var(--tabs_scale));
 		border-block-end: 2px solid var(--interaction-norm);
 
+		&.hides {
+			transition: opacity 0.1s linear 0.1s;
+
+			&.hide {
+				opacity: 0;
+			}
+		}
+
 		@at-root {
 			[dir='rtl'] & {
 				transform-origin: right center;
@@ -111,7 +119,7 @@
 		}
 	}
 
-	&--modern.withTransition > &-nav &-indicator {
+	&--modern.with-transition > &-nav &-indicator {
 		transition-property: transform, inline-size;
 		transition-duration: 0.3s;
 		transition-timing-function: easing(ease-out-quad);

packages/components/components/tabs/Tabs.tsx

@@ -109,7 +109,7 @@ export const Tabs = ({
         if (!isReady && translate !== undefined && scale !== undefined && width !== undefined) {
             setReady(true);
             setTimeout(() => {
-                rootRef.current?.classList.add('withTransition');
+                rootRef.current?.classList.add('with-transition');
                 indicatortRef.current?.classList.remove('hides');
             }, 300 /* same with transition duration in css */);
         }
@@ -151,7 +151,7 @@ export const Tabs = ({
                         role="tablist"
                         ref={containerRef}
                         style={
-                            translate && scale && width
+                            translate !== undefined && scale !== undefined && width !== undefined
                                 ? { '--tabs_translate': translate, '--tabs_scale': scale, '--tabs_width': width }
                                 : {}
                         }