fix: dialog stories (#81)

lib/components/Avatar/avatarGroup.module.css

@@ -17,6 +17,10 @@
   width: 32px;
 }
 
+.xs[data-count="1"] {
+  width: 20px;
+}
+
 .xs[data-count="2"] * + * {
   margin-left: -8px;
 }
@@ -33,6 +37,10 @@
   width: 42px;
 }
 
+.sm[data-count="1"] {
+  width: 24px;
+}
+
 .sm[data-count="2"] * + * {
   margin-left: -6px;
 }
@@ -49,6 +57,10 @@
   width: 54px;
 }
 
+.md[data-count="1"] {
+  width: 30px;
+}
+
 .md[data-count="2"] * + * {
   margin-left: -6px;
 }
@@ -65,6 +77,10 @@
   width: 66px;
 }
 
+.lg[data-count="1"] {
+  width: 36px;
+}
+
 .lg[data-count="2"] * + * {
   margin-left: -6px;
 }

lib/components/Button/buttonBase.module.css

@@ -7,6 +7,7 @@
   overflow: visible;
 
   background: transparent;
+  text-decoration: none;
 
   /* inherit font & color from ancestor */
   color: inherit;

lib/components/ContextMenu/ContextMenu.tsx

@@ -2,19 +2,26 @@
 import type { DropdownPlacement, MenuItemProps } from '../';
 import { type MenuItemGroups, MenuItems } from '../';
 import { useRootContext } from '../RootProvider';
-import { ContextMenuBase } from './ContextMenuBase';
+import { ContextMenuBase, type ContextMenuSize } from './ContextMenuBase';
 
 export interface ContextMenuProps {
   id: string;
   items: MenuItemProps[];
   placement?: DropdownPlacement;
+  size?: ContextMenuSize;
   groups?: MenuItemGroups;
 }
 
-export const ContextMenu = ({ id = 'context-menu', placement = 'right', groups = {}, items }: ContextMenuProps) => {
+export const ContextMenu = ({
+  id = 'context-menu',
+  placement = 'right',
+  size,
+  groups = {},
+  items,
+}: ContextMenuProps) => {
   const { currentId, toggleId } = useRootContext();
   return (
-    <ContextMenuBase placement={placement} expanded={currentId === id} onToggle={() => toggleId(id)}>
+    <ContextMenuBase size={size} placement={placement} expanded={currentId === id} onToggle={() => toggleId(id)}>
       <MenuItems groups={groups} items={items} />
     </ContextMenuBase>
   );

lib/components/ContextMenu/ContextMenuBase.tsx

@@ -3,14 +3,18 @@ import { DropdownBase, IconButton } from '../';
 import type { DropdownPlacement } from '../';
 import styles from './contextMenuBase.module.css';
 
+export type ContextMenuSize = 'sm' | 'md';
+
 export interface ContextMenuBaseProps {
   placement: DropdownPlacement;
   expanded: boolean;
+  size?: ContextMenuSize;
   onToggle?: () => void;
   children?: ReactNode;
 }
 
 export const ContextMenuBase = ({
+  size = 'sm',
   placement = 'right',
   expanded = false,
   onToggle,
@@ -20,7 +24,7 @@ export const ContextMenuBase = ({
     <div className={styles.toggle} data-theme="neutral">
       <IconButton
         className={styles.button}
-        size="sm"
+        size={size}
         icon="menu-elipsis-horizontal"
         iconSize="md"
         variant="text"