@beydesign/storybook 0.4.3 → 0.4.5

package/dist/stories/Buttons/MainButton.js

@@ -52,18 +52,32 @@ const ICON_ONLY_SIZE = {
         [ButtonSize.xl]: 52,
     },
 };
+// Figma sizes a text button by its height, with the label centred inside, so
+// take the height from the design rather than deriving it from padding: a
+// CSS border sits outside the box where a Figma stroke sits inside, which
+// would otherwise leave every button 2px taller than the design.
+const TEXT_BUTTON_HEIGHT = {
+    [ButtonSize.xxs]: 32,
+    [ButtonSize.xs]: 36,
+    [ButtonSize.sm]: 40,
+    [ButtonSize.md]: 44,
+    [ButtonSize.lg]: 48,
+    [ButtonSize.xl]: 52,
+};
 const StyledButton = styled.button `
   text-transform: none;
   box-sizing: border-box;
-  padding: ${(props) => props.$displayIconMode === ButtonDisplayMode.Only
-    ? '0'
-    : props.$sizeStyles.padding};
   ${(props) => {
-    if (props.$displayIconMode !== ButtonDisplayMode.Only)
-        return '';
-    const box = `${ICON_ONLY_SIZE[props.$shape][props.$size]}px`;
-    return `width: ${box};
-    height: ${box};`;
+    if (props.$displayIconMode === ButtonDisplayMode.Only) {
+        const box = `${ICON_ONLY_SIZE[props.$shape][props.$size]}px`;
+        return `padding: 0;
+  width: ${box};
+  height: ${box};`;
+    }
+    // min-height, not height, so a label that ever wraps grows the button
+    // instead of spilling out of it.
+    return `padding: ${props.$sizeStyles.padding};
+  min-height: ${TEXT_BUTTON_HEIGHT[props.$size]}px;`;
 }}
   font-size: ${(props) => props.$sizeStyles.fontSize};
   border-radius: ${(props) => props.$shape === ButtonShape.Square
@@ -237,36 +251,41 @@ const StyledButton = styled.button `
 export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, iconWeight = 'regular', displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', testId, }) => {
     // Figma draws a 20px icon at every button size.
     const iconSize = 20;
-    // Icon-only buttons take their box from ICON_ONLY_SIZE and ignore padding.
+    // Vertical padding comes from TEXT_BUTTON_HEIGHT; only the horizontal value
+    // is set here. Icon-only buttons take their box from ICON_ONLY_SIZE and
+    // ignore padding entirely.
+    //
+    // Figma leaves the sm, lg and xl horizontal padding, and the xl gap, off the
+    // spacing scale, so those are raw values with no token to point at.
     const getButtonSize = () => {
         const sizes = {
             [ButtonSize.xl]: {
-                padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-3xl)',
+                padding: '0 22px',
                 fontSize: 'var(--global-font-size-3)',
-                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+                gap: '10px',
             },
             [ButtonSize.lg]: {
-                padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-2xl)',
+                padding: '0 18px',
                 fontSize: 'var(--global-font-size-3)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
             },
             [ButtonSize.md]: {
-                padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
+                padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
                 fontSize: 'var(--global-font-size-2)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
             },
             [ButtonSize.sm]: {
-                padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
+                padding: '0 14px',
                 fontSize: 'var(--global-font-size-1)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
             },
             [ButtonSize.xs]: {
-                padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+                padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
                 fontSize: 'var(--global-font-size-1)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
             },
             [ButtonSize.xxs]: {
-                padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm) var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+                padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-md)',
                 fontSize: 'var(--global-font-size-0)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
             },

package/dist/stories/Navigation/Drawer/Drawer.js

@@ -7,6 +7,9 @@ import { NavPanel } from '../internal';
 import { getIconComponent } from '../../../utils';
 const EXPANDED_WIDTH = '238px';
 const COLLAPSED_WIDTH = '68px';
+/** Mirrors the horizontal padding `NavPanel` applies around its content. */
+const PANEL_PADDING_X = 'var(--spacing-tokens-size-in-px-spacing-spacing-xl, 16px)';
+const contentWidth = (panelWidth) => `calc(${panelWidth} - 2 * ${PANEL_PADDING_X})`;
 /** Composed from the semantic `shadow-sm` design token. */
 const SHADOW_SM = 'var(--global-shadows-shadow-sm-offset-x) var(--global-shadows-shadow-sm-offset-y) var(--global-shadows-shadow-sm-blur) var(--global-shadows-shadow-sm-spread) var(--global-shadows-shadow-sm-color)';
 /**
@@ -21,6 +24,21 @@ const Shell = styled.aside `
   width: ${({ $collapsed }) => ($collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH)};
   transition: width 0.3s ease-in-out;
 `;
+/**
+ * Holds the body at the width its state will settle at, rather than letting it
+ * fill the shell mid-animation. Without this the expanded layout reflows inside
+ * a shell that is still collapsed — labels squeeze to an ellipsis and the
+ * credits caption wraps down the card — before snapping into place. The panel
+ * clips the overhang (`overflow-x: hidden`) and reveals it as the width catches
+ * up.
+ */
+const Content = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: ${({ $collapsed }) => contentWidth($collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH)};
+`;
 const ToggleButton = styled.button `
   appearance: none;
   position: absolute;
@@ -77,5 +95,5 @@ export const Drawer = ({ navItems, activeKey, collapsed, defaultCollapsed = fals
             setInternalCollapsed(next);
         onToggle?.(next);
     };
-    return (_jsxs(Shell, { "$collapsed": isCollapsed, className: className, style: style, "data-testid": testId, children: [_jsx(NavPanel, { children: _jsx(DrawerBody, { navItems: navItems, activeKey: activeKey, size: drawerSize, credits: credits, creditsLoading: creditsLoading, profile: profile, profileLoading: profileLoading, logo: logo }) }), showToggle && (_jsx(ToggleButton, { type: "button", onClick: handleToggle, "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: _jsx(ToggleIcon, { "$collapsed": isCollapsed, children: getIconComponent('CaretLeft', { size: 16, weight: 'bold' }) }) }))] }));
+    return (_jsxs(Shell, { "$collapsed": isCollapsed, className: className, style: style, "data-testid": testId, children: [_jsx(NavPanel, { children: _jsx(Content, { "$collapsed": isCollapsed, children: _jsx(DrawerBody, { navItems: navItems, activeKey: activeKey, size: drawerSize, credits: credits, creditsLoading: creditsLoading, profile: profile, profileLoading: profileLoading, logo: logo }) }) }), showToggle && (_jsx(ToggleButton, { type: "button", onClick: handleToggle, "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: _jsx(ToggleIcon, { "$collapsed": isCollapsed, children: getIconComponent('CaretLeft', { size: 16, weight: 'bold' }) }) }))] }));
 };

package/dist/stories/Navigation/Drawer/DrawerProfile.d.ts

@@ -3,8 +3,9 @@ import { DrawerProfileProps } from './types';
 /**
  * User profile footer for the {@link Drawer}: avatar plus name and email.
  * Collapses to just the avatar. When `menuItems` are supplied, clicking the
- * profile drops an inline menu directly below the row (e.g. a "Log out"
- * action), styled like the drawer's nav items so it reads as part of the drawer
- * rather than a floating overlay. The profile row itself stays in place.
+ * profile opens a popover menu anchored to the row (e.g. a "Log out" action)
+ * rather than expanding the drawer footer, so the drawer's layout never shifts.
+ * The menu always shows its labels — including when the drawer is collapsed and
+ * the popover opens to the side of the avatar.
  */
 export declare const DrawerProfile: React.FC<DrawerProfileProps>;

package/dist/stories/Navigation/Drawer/DrawerProfile.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { DrawerSize } from './types';
-import { Avatar, AvatarSize, AvatarStyle } from '../../UI';
+import { Avatar, AvatarSize, AvatarStyle, Popover, PopoverVariant, } from '../../UI';
 import { Typography, TypographySize, TypographyWeight } from '../../Typography';
 import { getIconComponent } from '../../../utils';
 const Container = styled.div `
@@ -54,31 +54,31 @@ const Chevron = styled.span `
     transition: none;
   }
 `;
+/** The popover's border sits outside this list, on the surface around it. */
+const POPOVER_BORDER = 2;
 /**
- * Collapsible wrapper for the menu that drops below the profile row. Animates
- * height with the `grid-template-rows: 0fr -> 1fr` trick so it reveals/hides
- * smoothly without measuring the content.
+ * MUI puts a 2px margin on each side of the tooltip surface, which pushed the
+ * menu 2px right of the profile row. Drop the side margins so the two line up;
+ * the bottom margin is the gap to the row, so it stays.
  */
-const Menu = styled.div `
-  display: grid;
-  grid-template-rows: ${({ $open }) => ($open ? '1fr' : '0fr')};
-  transition: grid-template-rows 0.25s ease-in-out;
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
+const MenuPopover = styled(Popover) `
+  && {
+    margin-left: 0;
+    margin-right: 0;
   }
 `;
-const MenuClip = styled.div `
-  overflow: hidden;
-  min-height: 0;
-`;
+/**
+ * Menu surface rendered inside the popover. Owns its own padding — the popover
+ * is handed `padding="0"` — so that pinning its width lines the menu up with
+ * the profile row exactly, with no surface padding left to widen it.
+ */
 const MenuList = styled.div `
   display: flex;
   flex-direction: column;
   gap: var(--spacing-tokens-size-in-px-spacing-spacing-xxs, 2px);
-  padding-top: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
-  margin-top: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
-  border-top: 1px solid var(--color-border-border-subtle);
+  box-sizing: border-box;
+  padding: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
+  min-width: 200px;
 `;
 /** Menu rows reuse the nav-item look so they read as part of the drawer. */
 const MenuItemButton = styled.button `
@@ -90,7 +90,7 @@ const MenuItemButton = styled.button `
   gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
   width: 100%;
   box-sizing: border-box;
-  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'flex-start'};
+  justify-content: flex-start;
   padding: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
   border-radius: var(--spacing-tokens-size-in-px-radius-radius-xs);
   font: inherit;
@@ -113,58 +113,62 @@ const MenuItemButton = styled.button `
 /**
  * User profile footer for the {@link Drawer}: avatar plus name and email.
  * Collapses to just the avatar. When `menuItems` are supplied, clicking the
- * profile drops an inline menu directly below the row (e.g. a "Log out"
- * action), styled like the drawer's nav items so it reads as part of the drawer
- * rather than a floating overlay. The profile row itself stays in place.
+ * profile opens a popover menu anchored to the row (e.g. a "Log out" action)
+ * rather than expanding the drawer footer, so the drawer's layout never shifts.
+ * The menu always shows its labels — including when the drawer is collapsed and
+ * the popover opens to the side of the avatar.
  */
 export const DrawerProfile = ({ size = DrawerSize.Expanded, name, email, avatarImage, avatarText, menuItems, onClick, className, style, testId, }) => {
     const isCollapsed = size === DrawerSize.Collapsed;
     const hasMenu = Boolean(menuItems && menuItems.length > 0);
     const [open, setOpen] = useState(false);
     const containerRef = useRef(null);
-    // Close the inline menu on outside click or Escape.
+    const [menuWidth, setMenuWidth] = useState();
+    // Match the menu to the profile row so the two line up. Only when expanded —
+    // collapsed, the row is just the avatar and the menu sizes to its content.
+    useEffect(() => {
+        if (!open || isCollapsed)
+            return;
+        const width = containerRef.current?.offsetWidth;
+        if (width)
+            setMenuWidth(width - POPOVER_BORDER);
+    }, [open, isCollapsed]);
+    // Outside clicks are handled by the Popover itself; Escape is not.
     useEffect(() => {
         if (!open)
             return;
-        const handlePointer = (event) => {
-            if (!containerRef.current?.contains(event.target)) {
-                setOpen(false);
-            }
-        };
         const handleKey = (event) => {
             if (event.key === 'Escape')
                 setOpen(false);
         };
-        document.addEventListener('mousedown', handlePointer);
         document.addEventListener('keydown', handleKey);
-        return () => {
-            document.removeEventListener('mousedown', handlePointer);
-            document.removeEventListener('keydown', handleKey);
-        };
+        return () => document.removeEventListener('keydown', handleKey);
     }, [open]);
     const clickable = hasMenu || Boolean(onClick);
-    const handleRowClick = () => {
-        if (hasMenu) {
-            setOpen((prev) => !prev);
-        }
-        else {
-            onClick?.();
-        }
-    };
     const handleItemClick = (item) => {
         setOpen(false);
         item.onClick?.();
     };
-    return (_jsxs(Container, { ref: containerRef, className: className, style: style, "data-testid": testId, children: [_jsxs(Row, { "$collapsed": isCollapsed, "$clickable": clickable, "$active": hasMenu && open, onClick: handleRowClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, "aria-expanded": hasMenu ? open : undefined, onKeyDown: clickable
-                    ? (event) => {
-                        if (event.key === 'Enter' || event.key === ' ') {
-                            event.preventDefault();
-                            handleRowClick();
-                        }
-                    }
-                    : undefined, children: [_jsx(Avatar, { size: AvatarSize.sm, border: true, avatarStyle: avatarImage ? AvatarStyle.Picture : AvatarStyle.Letters, image: avatarImage, text: avatarText ?? name }), !isCollapsed && (_jsxs(_Fragment, { children: [_jsxs(TextColumn, { children: [_jsx(TextLine, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-title)", children: name }) }), email && (_jsx(TextLine, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-paragraph)", children: email }) }))] }), hasMenu && (_jsx(Chevron, { "$open": open, children: getIconComponent('CaretDown', { size: 16, weight: 'bold' }) }))] }))] }), hasMenu && (_jsx(Menu, { "$open": open, "aria-hidden": !open, children: _jsx(MenuClip, { children: _jsx(MenuList, { role: "menu", children: menuItems?.map((item, index) => (_jsxs(MenuItemButton, { type: "button", role: "menuitem", tabIndex: open ? 0 : -1, "$destructive": Boolean(item.destructive), "$collapsed": isCollapsed, title: isCollapsed ? item.label : undefined, onClick: () => handleItemClick(item), children: [item.icon &&
-                                    getIconComponent(item.icon, {
-                                        size: 20,
-                                        color: 'currentColor',
-                                    }), !isCollapsed && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "inherit", children: item.label }))] }, index))) }) }) }))] }));
+    const row = (_jsxs(Row, { "$collapsed": isCollapsed, "$clickable": clickable, "$active": hasMenu && open, 
+        // With a menu the Popover owns the click; otherwise fire the row handler.
+        onClick: hasMenu ? undefined : onClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, "aria-haspopup": hasMenu ? 'menu' : undefined, "aria-expanded": hasMenu ? open : undefined, onKeyDown: clickable
+            ? (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    if (hasMenu)
+                        setOpen((prev) => !prev);
+                    else
+                        onClick?.();
+                }
+            }
+            : undefined, children: [_jsx(Avatar, { size: AvatarSize.sm, border: true, avatarStyle: avatarImage ? AvatarStyle.Picture : AvatarStyle.Letters, image: avatarImage, text: avatarText ?? name }), !isCollapsed && (_jsxs(_Fragment, { children: [_jsxs(TextColumn, { children: [_jsx(TextLine, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-title)", children: name }) }), email && (_jsx(TextLine, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-paragraph)", children: email }) }))] }), hasMenu && (_jsx(Chevron, { "$open": open, children: getIconComponent('CaretDown', { size: 16, weight: 'bold' }) }))] }))] }));
+    const menu = (_jsx(MenuList, { role: "menu", style: isCollapsed ? undefined : { width: menuWidth, minWidth: 0 }, children: menuItems?.map((item, index) => (_jsxs(MenuItemButton, { type: "button", role: "menuitem", "$destructive": Boolean(item.destructive), onClick: () => handleItemClick(item), children: [item.icon &&
+                    getIconComponent(item.icon, {
+                        size: 20,
+                        color: 'currentColor',
+                    }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "inherit", children: item.label })] }, index))) }));
+    return (_jsx(Container, { ref: containerRef, className: className, style: style, "data-testid": testId, children: hasMenu ? (_jsx(MenuPopover, { content: menu, variant: PopoverVariant.Light, 
+            // Anchored above the row so the menu never covers the profile; to the
+            // side when collapsed, where there is no room above the avatar.
+            placement: isCollapsed ? 'right-end' : 'top-start', trigger: "click", arrow: false, maxWidth: isCollapsed ? 260 : menuWidth, padding: "0", open: open, onOpenChange: setOpen, children: row })) : (row) }));
 };

package/dist/stories/Navigation/Drawer/types.d.ts

@@ -100,8 +100,8 @@ export interface DrawerProfileProps {
     /** Overrides the initials source (defaults to `name`). */
     avatarText?: string;
     /**
-     * When provided, clicking the profile drops an inline menu with these items
-     * (e.g. a "Log out" action) directly below the profile row instead of firing
+     * When provided, clicking the profile opens a popover menu with these items
+     * (e.g. a "Log out" action) anchored to the profile row instead of firing
      * `onClick`.
      */
     menuItems?: DrawerProfileMenuItem[];

package/dist/stories/Navigation/internal/NavRow.js

@@ -37,10 +37,15 @@ const StyledNavRow = styled.button `
   background-color: ${({ $state }) => background($state)};
   opacity: ${({ $state }) => ($state === NavItemState.Disabled ? 0.5 : 1)};
   cursor: ${({ $state }) => $state === NavItemState.Disabled ? 'not-allowed' : 'pointer'};
+  /*
+   * Padding deliberately does not transition. The icon lands on the same x in
+   * both states, so animating it gained nothing visually — but since the row is
+   * auto height once expanded, growing the padding from 0 pumped every row from
+   * the bare icon height back up to full, shifting the list as it went.
+   */
   transition:
     background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out,
-    padding 0.3s ease-in-out;
+    color 0.2s ease-in-out;
 
   &:hover {
     ${({ $state }) => $state === NavItemState.Inactive

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.4.3",
+  "version": "0.4.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",