diff --git a/packages/grafana-ui/src/components/Menu/Menu.tsx b/packages/grafana-ui/src/components/Menu/Menu.tsx index c2307326a88..aaf18da48ee 100644 --- a/packages/grafana-ui/src/components/Menu/Menu.tsx +++ b/packages/grafana-ui/src/components/Menu/Menu.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/css'; +import { css, cx } from '@emotion/css'; import React, { useImperativeHandle, useRef } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; @@ -39,7 +39,16 @@ const MenuComp = React.forwardRef( aria-label={ariaLabel} onKeyDown={handleKeys} > - {header &&
{header}
} + {header && ( +
0 && styles.headerBorder + )} + > + {header} +
+ )} {children} ); @@ -57,7 +66,9 @@ export const Menu = Object.assign(MenuComp, { const getStyles = (theme: GrafanaTheme2) => { return { header: css({ - padding: `${theme.spacing(0.5, 0.5, 1, 0.5)}`, + padding: `${theme.spacing(0.5, 1, 1, 1)}`, + }), + headerBorder: css({ borderBottom: `1px solid ${theme.colors.border.weak}`, }), wrapper: css({