Tabs: Reduce active border from 4 px to 2px (#101888)

* Tabs: Reduce active border from 4 to 2px

* css fixes

packages/grafana-data/src/themes/createComponents.ts

@@ -43,9 +43,6 @@ export interface ThemeComponents {
   sidemenu: {
     width: number;
   };
-  menuTabs: {
-    height: number;
-  };
   horizontalDrawer: {
     defaultHeight: number;
   };
@@ -96,6 +93,7 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
     sidemenu: {
       width: 57,
     },
+    // @ts-expect-error (added here to not crash plugins that might use it)
     menuTabs: {
       height: 5,
     },

packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx

@@ -6,8 +6,9 @@ import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
 
 import { IconButton } from '../../components/IconButton/IconButton';
 import { TabsBar, Tab, TabContent } from '../../components/Tabs';
-import { useStyles2, useTheme2 } from '../../themes';
+import { useStyles2 } from '../../themes';
 import { IconName } from '../../types/icon';
+import { Box } from '../Layout/Box/Box';
 import { ScrollContainer } from '../ScrollContainer/ScrollContainer';
 
 export interface TabConfig {
@@ -28,14 +29,11 @@ export interface TabbedContainerProps {
 export function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose, testId }: TabbedContainerProps) {
   const [activeTab, setActiveTab] = useState(tabs.some((tab) => tab.value === defaultTab) ? defaultTab : tabs[0].value);
   const styles = useStyles2(getStyles);
-  const theme = useTheme2();
 
   const onSelectTab = (item: SelectableValue<string>) => {
     setActiveTab(item.value!);
   };
 
-  const autoHeight = `calc(100% - (${theme.spacing(theme.components.menuTabs.height)} + ${theme.spacing(1)}))`;
-
   return (
     <div className={styles.container} data-testid={testId}>
       <TabsBar className={styles.tabs}>
@@ -48,9 +46,11 @@ export function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose, t
             icon={t.icon}
           />
         ))}
-        <IconButton className={styles.close} onClick={onClose} name="times" tooltip={closeIconTooltip ?? 'Close'} />
+        <Box grow={1} display="flex" justifyContent="flex-end" paddingRight={1}>
+          <IconButton size="lg" onClick={onClose} name="times" tooltip={closeIconTooltip ?? 'Close'} />
+        </Box>
       </TabsBar>
-      <ScrollContainer height={autoHeight}>
+      <ScrollContainer>
         <TabContent className={styles.tabContent}>{tabs.find((t) => t.value === activeTab)?.content}</TabContent>
       </ScrollContainer>
     </div>
@@ -60,21 +60,17 @@ export function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose, t
 const getStyles = (theme: GrafanaTheme2) => ({
   container: css({
     height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '1 1 0',
+    minHeight: 0,
   }),
   tabContent: css({
     padding: theme.spacing(2),
     backgroundColor: theme.colors.background.primary,
-    height: `100%`,
-  }),
-  close: css({
-    position: 'absolute',
-    right: '16px',
-    top: '5px',
-    cursor: 'pointer',
-    fontSize: theme.typography.size.lg,
   }),
   tabs: css({
-    paddingTop: theme.spacing(1),
+    paddingTop: theme.spacing(0.5),
     borderColor: theme.colors.border.weak,
     ul: {
       marginLeft: theme.spacing(2),

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

@@ -92,11 +92,11 @@ const getStyles = (theme: GrafanaTheme2) => {
       position: 'relative',
       display: 'flex',
       whiteSpace: 'nowrap',
-      padding: theme.spacing(0.5),
+      padding: theme.spacing(0, 0.5),
     }),
     link: css({
       color: theme.colors.text.secondary,
-      padding: theme.spacing(1, 1.5, 0.5),
+      padding: theme.spacing(1, 1.5, 1),
       borderRadius: theme.shape.radius.default,
 
       display: 'block',
@@ -114,7 +114,7 @@ const getStyles = (theme: GrafanaTheme2) => {
         position: 'absolute',
         left: 0,
         right: 0,
-        height: '4px',
+        height: '2px',
         borderRadius: theme.shape.radius.default,
         bottom: 0,
       },

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

@@ -36,8 +36,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   tabs: css({
     position: 'relative',
     display: 'flex',
-    height: theme.spacing(theme.components.menuTabs.height),
-    alignItems: 'stretch',
+    alignItems: 'center',
   }),
 });