diff --git a/packages/elements/src/components/ui/buttons/menu-button/MenuButton.module.css b/packages/elements/src/components/ui/buttons/menu-button/MenuButton.module.css index a7d481c9a..816fd593f 100644 --- a/packages/elements/src/components/ui/buttons/menu-button/MenuButton.module.css +++ b/packages/elements/src/components/ui/buttons/menu-button/MenuButton.module.css @@ -56,6 +56,7 @@ padding: 0; background: var(--current-background-color); height: var(--swui-menu-button-item-height); + min-width: var(--swui-menu-button-item-height); &.danger { --current-text-color: var(--lhds-color-red-600); @@ -94,6 +95,10 @@ background: var(--current-background-color-active); } + &.iconOnly { + justify-content: center; + } + &.selected { background: var(--current-background-selected); diff --git a/packages/elements/src/components/ui/buttons/menu-button/MenuButton.tsx b/packages/elements/src/components/ui/buttons/menu-button/MenuButton.tsx index c740a8d2c..2212c11b8 100644 --- a/packages/elements/src/components/ui/buttons/menu-button/MenuButton.tsx +++ b/packages/elements/src/components/ui/buttons/menu-button/MenuButton.tsx @@ -46,6 +46,8 @@ export const MenuButton = forwardRef( }, ref ) { + const iconOnly = !label && !expandable; + return ( ( selected && styles.selected, disabled && styles.disabled, styles[variant], + iconOnly && styles.iconOnly, className )} disabled={disabled} @@ -68,7 +71,7 @@ export const MenuButton = forwardRef( {...buttonProps} > diff --git a/packages/elements/src/components/ui/buttons/menu-button/MenuButtonLink.tsx b/packages/elements/src/components/ui/buttons/menu-button/MenuButtonLink.tsx index 25356e0cc..ec1495855 100644 --- a/packages/elements/src/components/ui/buttons/menu-button/MenuButtonLink.tsx +++ b/packages/elements/src/components/ui/buttons/menu-button/MenuButtonLink.tsx @@ -56,8 +56,13 @@ export const MenuButtonLink = forwardRef< }, ref ) { + const iconOnly = !label; + const innerChildren = ( - + ); @@ -70,6 +75,7 @@ export const MenuButtonLink = forwardRef< styles.buttonLink, disabled && styles.disabled, noRenderLinkProps?.selected && styles.selected, + iconOnly && styles.iconOnly, styles[variant], className ); diff --git a/packages/panels/src/components/sidebar-menu/items/RailMenuLink.tsx b/packages/panels/src/components/sidebar-menu/items/RailMenuLink.tsx index 1889a3b75..8f9d6fba5 100644 --- a/packages/panels/src/components/sidebar-menu/items/RailMenuLink.tsx +++ b/packages/panels/src/components/sidebar-menu/items/RailMenuLink.tsx @@ -23,7 +23,7 @@ export const RailMenuLink: React.FC = ({ } return ( - + ); diff --git a/packages/panels/src/components/sidebar-menu/rail/SidebarRailMenu.tsx b/packages/panels/src/components/sidebar-menu/rail/SidebarRailMenu.tsx index e98593c10..1e0a9651b 100644 --- a/packages/panels/src/components/sidebar-menu/rail/SidebarRailMenu.tsx +++ b/packages/panels/src/components/sidebar-menu/rail/SidebarRailMenu.tsx @@ -28,7 +28,7 @@ export const SidebarRailMenu: React.FC = ({ left={0} top={0} bottom={0} - indent={1} + indent={0.5} spacing={1} gap={1} shadow={"popover"}