Menu: Uniform padding to make menu item hover state look better (#100275)

* Menu: Uniform padding

* tweak menu header

---------

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
This commit is contained in:
Torkel Ödegaard 2025-02-07 19:07:10 +01:00 committed by GitHub
parent f5d8f42635
commit 79d7e11fa4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 2 deletions

View File

@ -40,7 +40,7 @@ const MenuComp = React.forwardRef<HTMLDivElement, MenuProps>(
boxShadow="z3"
display="inline-block"
onKeyDown={handleKeys}
paddingX={0}
paddingX={0.5}
paddingY={0.5}
ref={localRef}
role="menu"
@ -73,10 +73,11 @@ export const Menu = Object.assign(MenuComp, {
const getStyles = (theme: GrafanaTheme2) => {
return {
header: css({
padding: theme.spacing(0.5, 1, 1, 1),
padding: theme.spacing(0.5, 0.5, 1, 0.5),
}),
headerBorder: css({
borderBottom: `1px solid ${theme.colors.border.weak}`,
marginBottom: theme.spacing(0.5),
}),
};
};

View File

@ -78,6 +78,7 @@ const getStyles = (theme: GrafanaTheme2) => {
}),
itemsWrapper: css({
background: theme.colors.background.primary,
padding: theme.spacing(0.5),
boxShadow: theme.shadows.z3,
display: 'inline-block',
borderRadius: theme.shape.radius.default,