- MenuButton and MenuButtonLink is now 40x40px when there is only an …

…icon (no label, and not expandable). Icon is then centered. - Align RailMenuLink tooltip vertically centered compared to trigger element, so that tooltip arrow is centered in tooltip. - Smaller indent around items in rail menu.
StenaIT · Oct 5, 2023 · 96ee96d · 96ee96d
1 parent bd25949
commit 96ee96d
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 4 deletions.
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
@@ -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
@@ -46,6 +46,8 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
     },
     ref
   ) {
+    const iconOnly = !label && !expandable;
+
     return (
       <Box>
         <Box
@@ -61,14 +63,15 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
               selected && styles.selected,
               disabled && styles.disabled,
               styles[variant],
+              iconOnly && styles.iconOnly,
               className
             )}
             disabled={disabled}
             ref={ref}
             {...buttonProps}
           >
             <Row
-              justifyContent={"space-between"}
+              justifyContent={iconOnly ? "center" : "space-between"}
               alignItems={"center"}
               indent={label ? 2 : 1}
             >

diff --git 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 = (
-    <Row justifyContent={"space-between"} indent={label ? 2 : 1}>
+    <Row
+      justifyContent={iconOnly ? "center" : "space-between"}
+      indent={label ? 2 : 1}
+    >
       <MenuButtonContent label={label} leftIcon={leftIcon} />
     </Row>
   );
@@ -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
@@ -23,7 +23,7 @@ export const RailMenuLink: React.FC<RailMenuLinkProps> = ({
   }
 
   return (
-    <Tooltip label={label} placement={"right-start"} appendTo={document.body}>
+    <Tooltip label={label} placement={"right"} appendTo={document.body}>
       <MenuButtonLink {...menuButtonLinkProps} />
     </Tooltip>
   );

diff --git 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<SidebarRailMenuProps> = ({
       left={0}
       top={0}
       bottom={0}
-      indent={1}
+      indent={0.5}
       spacing={1}
       gap={1}
       shadow={"popover"}