Tabs: Hide Tabs on Page header on small screens (#21489)

* Adding className to hide tabs on small screens

* update snapshot

* Readd border on pageheader

* update snap

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

@@ -1,20 +1,25 @@
 import React, { FC, ReactNode } from 'react';
 import { stylesFactory, useTheme } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css, cx } from 'emotion';
 
 export interface Props {
   /** Children should be a single <Tab /> or an array of <Tab /> */
   children: ReactNode;
+  className?: string;
+  /** For hiding the bottom border (on PageHeader for example) */
+  hideBorder?: boolean;
 }
 
-const getTabsBarStyles = stylesFactory((theme: GrafanaTheme) => {
+const getTabsBarStyles = stylesFactory((theme: GrafanaTheme, hideBorder = false) => {
   const colors = theme.colors;
 
   return {
-    tabsWrapper: css`
-      border-bottom: 1px solid ${colors.pageHeaderBorder};
-    `,
+    tabsWrapper:
+      !hideBorder &&
+      css`
+        border-bottom: 1px solid ${colors.pageHeaderBorder};
+      `,
     tabs: css`
       position: relative;
       top: 1px;
@@ -23,12 +28,12 @@ const getTabsBarStyles = stylesFactory((theme: GrafanaTheme) => {
   };
 });
 
-export const TabsBar: FC<Props> = ({ children }) => {
+export const TabsBar: FC<Props> = ({ children, className, hideBorder }) => {
   const theme = useTheme();
-  const tabsStyles = getTabsBarStyles(theme);
+  const tabsStyles = getTabsBarStyles(theme, hideBorder);
 
   return (
-    <div className={tabsStyles.tabsWrapper}>
+    <div className={cx(tabsStyles.tabsWrapper, className)}>
       <ul className={tabsStyles.tabs}>{children}</ul>
     </div>
   );