fix: account menu avatars

.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
   ".": "0.15.1"
-}
+}

lib/components/GlobalMenu/AccountMenu.tsx

@@ -43,6 +43,7 @@ export const AccountMenu = ({
     title: account.name,
     ...(account?.accountNames && {
       avatarGroup: {
+        size: 'sm',
         items: account.accountNames.map((name) => ({
           name,
           type: account.type,
@@ -51,6 +52,7 @@ export const AccountMenu = ({
     }),
     ...(!account?.accountNames && {
       avatar: {
+        size: 'md',
         type: account.type,
         name: account.name,
       },

lib/components/Icon/IconOrAvatar.tsx

@@ -46,10 +46,10 @@ export const IconOrAvatar = ({ size, icon, iconTheme, avatar, avatarGroup }: Ico
   /** Avatar or AvatarGroup */
 
   if (avatar) {
-    return <Avatar {...avatar} size={size as AvatarSize} />;
+    return <Avatar {...avatar} size={avatar.size || size} />;
   }
 
   if (avatarGroup) {
-    return <AvatarGroup {...avatarGroup} size={size as AvatarSize} />;
+    return <AvatarGroup {...avatarGroup} size={avatarGroup.size || (size as AvatarSize)} />;
   }
 };

lib/components/List/ListItemIcon.module.css

@@ -1,38 +1,7 @@
-/* media */
-
-.media {
+.icon {
   flex-shrink: 0;
+  position: relative;
   display: flex;
-  align-items: center;
   justify-content: center;
-  min-width: 1em;
-  height: 1em;
-}
-
-.media {
-  font-size: 1.5rem;
-}
-
-.media[data-size="sm"],
-.media[data-size="md"] {
-  min-width: 2.25rem;
-  height: 2.25rem;
-}
-
-.media[data-size="md"],
-.media[data-size="lg"] {
-  font-size: 1.875rem;
-}
-
-.media[data-size="md"] .icon,
-.media[data-size="lg"] .icon {
-  font-size: 1.75rem;
-}
-
-.media[data-size="xl"] {
-  font-size: 2.25rem;
-}
-
-.media[data-size="xl"] .icon {
-  font-size: 2rem;
+  align-items: center;
 }

lib/components/List/ListItemIcon.tsx

@@ -1,15 +1,13 @@
-import { type ReactNode, isValidElement } from 'react';
-import { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize } from '../Avatar';
-import { Icon, type IconName, type IconProps, type IconSize } from '../Icon';
+import type { ReactNode } from 'react';
+import { IconOrAvatar, type IconOrAvatarProps } from '../';
+import styles from './listItemIcon.module.css';
+
+import { Icon, type IconSize } from '../Icon';
 
 export type ListItemIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
-export interface ListItemIconProps {
+export interface ListItemIconProps extends IconOrAvatarProps {
   loading?: boolean;
-  size?: ListItemIconSize;
-  icon?: IconProps | IconName | ReactNode;
-  avatar?: AvatarProps;
-  avatarGroup?: AvatarGroupProps;
   children?: ReactNode;
 }
 
@@ -22,25 +20,9 @@ export const ListItemIcon = ({ loading, size = 'sm', icon, avatar, avatarGroup,
     return <Icon name="x-mark" size={size as IconSize} loading={true} />;
   }
 
-  /** Icon can be custom, a string or an Icon object. */
-
-  if (icon) {
-    if (isValidElement(icon)) {
-      return icon;
-    }
-
-    const applicableIcon = typeof icon === 'string' ? ({ name: icon } as IconProps) : (icon as IconProps);
-
-    return <Icon {...applicableIcon} size={size as IconSize} />;
-  }
-
-  /** Avatar or AvatarGroup */
-
-  if (avatar) {
-    return <Avatar {...avatar} size={size as AvatarSize} />;
-  }
-
-  if (avatarGroup) {
-    return <AvatarGroup {...avatarGroup} size={size as AvatarSize} />;
-  }
+  return (
+    <span className={styles.icon}>
+      {children || <IconOrAvatar size={size} icon={icon} avatar={avatar} avatarGroup={avatarGroup} />}
+    </span>
+  );
 };

lib/components/Menu/Patterns.stories.ts → lib/components/Menu/Examples.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Menu } from './Menu';
 
 const meta = {
-  title: 'Menu/Patterns',
+  title: 'Menu/Examples',
   component: Menu,
   //  tags: ["autodocs"],
   parameters: {},
@@ -102,6 +102,7 @@ export const PersonInboxMenu = {
 
 export const CompanyMenu: Story = {
   args: {
+    theme: 'subtle',
     color: 'company',
     defaultIconTheme: 'default',
     groups: {},

lib/components/Menu/Menu.stories.ts

@@ -13,6 +13,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    theme: 'subtle',
     items: [
       {
         id: '1',
@@ -36,6 +37,7 @@ export const Default: Story = {
 
 export const CreatingHiearchy: Story = {
   args: {
+    theme: 'subtle',
     defaultIconTheme: 'default',
     groups: {
       shortcuts: {

lib/components/Menu/Patterns.mdx

@@ -1,10 +1,10 @@
 import { Meta, Controls, Primary, Canvas } from "@storybook/blocks";
-import * as Patterns from "./Patterns.stories";
+import * as Examples from "./Examples.stories";
 import * as MenuStories from "./Menu.stories";
 import * as GlobalMenuStories from "../GlobalMenu/GlobalMenu.stories";
 import * as AccountMenuStories from "../GlobalMenu/AccountMenu.stories";
 
-<Meta of={Patterns} />
+<Meta title="Menu/Patterns" />
 
 # Menu patterns
 
@@ -32,16 +32,16 @@ Separate by content and avatar. Tie things together with color.
 
 ### Personal inbox:
 
-<Canvas of={Patterns.PersonInboxMenu} />
+<Canvas of={Examples.PersonInboxMenu} />
 
 ### Personal settings:
 
-<Canvas of={Patterns.NeutralPersonMenu} />
+<Canvas of={Examples.NeutralPersonMenu} />
 
 ### Company inbox:
 
-<Canvas of={Patterns.CompanyInboxMenu} />
+<Canvas of={Examples.CompanyInboxMenu} />
 
 ### Company settings:
 
-<Canvas of={Patterns.NeutralCompanyMenu} />
+<Canvas of={Examples.NeutralCompanyMenu} />

lib/components/Menu/menuItemIcon.module.css

@@ -1,4 +1,5 @@
 .icon {
+  flex-shrink: 0;
   position: relative;
   display: flex;
   justify-content: center;

release-please-config.json

@@ -32,4 +32,4 @@
     }
   ],
   "$schema": "https://raw.githubusercontent.com/googleapis/release-please/main/schemas/config.json"
-}
+}