diff --git a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx index dd21e055e80..a953c2615c6 100644 --- a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx +++ b/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 or an array of */ 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 = ({ children }) => { +export const TabsBar: FC = ({ children, className, hideBorder }) => { const theme = useTheme(); - const tabsStyles = getTabsBarStyles(theme); + const tabsStyles = getTabsBarStyles(theme, hideBorder); return ( -
+
    {children}
); diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx index 430a52bd3ec..7c1df0b7d37 100644 --- a/public/app/core/components/PageHeader/PageHeader.tsx +++ b/public/app/core/components/PageHeader/PageHeader.tsx @@ -57,7 +57,7 @@ const Navigation = ({ main }: { main: NavModelItem }) => { return (