GrafanaUI: change active tab styles to prevent layout shift (#64126)

packages/grafana-ui/src/components/Tabs/Tab.tsx

@@ -4,7 +4,7 @@ import React, { HTMLProps } from 'react';
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { stylesFactory, useTheme2 } from '../../themes';
+import { useStyles2 } from '../../themes';
 import { getFocusStyles } from '../../themes/mixins';
 import { IconName } from '../../types';
 import { Icon } from '../Icon/Icon';
@@ -26,8 +26,7 @@ export interface TabProps extends HTMLProps<HTMLAnchorElement> {
 
 export const Tab = React.forwardRef<HTMLAnchorElement, TabProps>(
   ({ label, active, icon, onChangeTab, counter, suffix: Suffix, className, href, ...otherProps }, ref) => {
-    const theme = useTheme2();
-    const tabsStyles = getTabStyles(theme);
+    const tabsStyles = useStyles2(getStyles);
     const content = () => (
       <>
         {icon && <Icon name={icon} />}
@@ -61,7 +60,7 @@ export const Tab = React.forwardRef<HTMLAnchorElement, TabProps>(
 
 Tab.displayName = 'Tab';
 
-const getTabStyles = stylesFactory((theme: GrafanaTheme2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     item: css`
       list-style: none;
@@ -74,12 +73,24 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme2) => {
       padding: ${theme.spacing(1.5, 2, 1)};
       display: block;
       height: 100%;
+
       svg {
         margin-right: ${theme.spacing(1)};
       }
 
       &:focus-visible {
-+        ${getFocusStyles(theme)}
+        ${getFocusStyles(theme)}
+      }
+
+      &::before {
+        display: block;
+        content: ' ';
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 4px;
+        border-radius: ${theme.shape.radius.default};
+        bottom: 0px;
       }
     `,
     notActive: css`
@@ -89,15 +100,7 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme2) => {
         color: ${theme.colors.text.primary};
 
         &::before {
-          display: block;
-          content: ' ';
-          position: absolute;
-          left: 0;
-          right: 0;
-          height: 4px;
-          border-radius: ${theme.shape.radius.default};
-          bottom: 0px;
-          background: ${theme.colors.action.hover};
+          background-color: ${theme.colors.action.hover};
         }
       }
     `,
@@ -105,26 +108,17 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme2) => {
       label: activeTabStyle;
       color: ${theme.colors.text.primary};
       overflow: hidden;
-      font-weight: ${theme.typography.fontWeightMedium};
 
       a {
         color: ${theme.colors.text.primary};
       }
 
       &::before {
-        display: block;
-        content: ' ';
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 4px;
-        border-radius: ${theme.shape.radius.default};
-        bottom: 0px;
-        background-image: ${theme.colors.gradients.brandHorizontal} !important;
+        background-image: ${theme.colors.gradients.brandHorizontal};
       }
     `,
     suffix: css`
       margin-left: ${theme.spacing(1)};
     `,
   };
-});
+};

packages/grafana-ui/src/components/Tabs/VerticalTab.tsx

@@ -66,7 +66,6 @@ const getTabStyles = (theme: GrafanaTheme2) => {
     activeStyle: css`
       label: activeTabStyle;
       color: ${theme.colors.text.maxContrast};
-      font-weight: 500;
       overflow: hidden;
 
       &::before {