feat(ItemBadge): add component

Author: tenphi

src/components/Item.tsx

@@ -2,6 +2,7 @@ import { ReactElement } from 'react';
 import { Item, ItemProps } from 'react-stately';
 
 import { ItemAction } from './actions/ItemAction';
+import { ItemBadge } from './content/ItemBadge';
 import { CubeItemBaseProps } from './content/ItemBase/ItemBase';
 
 export interface CubeItemProps<T>
@@ -16,6 +17,7 @@ const _Item = Object.assign(
   Item as <T>(props: CubeItemProps<T>) => ReactElement,
   {
     Action: ItemAction,
+    Badge: ItemBadge,
   },
 );
 

src/components/actions/ItemAction/ItemAction.tsx

@@ -17,6 +17,7 @@ import {
   DEFAULT_NEUTRAL_STYLES,
   DEFAULT_PRIMARY_STYLES,
   DEFAULT_SECONDARY_STYLES,
+  ITEM_ACTION_BASE_STYLES,
   SPECIAL_CLEAR_STYLES,
   SPECIAL_NEUTRAL_STYLES,
   SPECIAL_PRIMARY_STYLES,
@@ -70,56 +71,11 @@ type ItemActionVariant =
 const ItemActionElement = tasty({
   qa: 'ItemAction',
   styles: {
-    display: 'inline-grid',
-    flow: 'column',
-    placeItems: 'center',
-    placeContent: 'center',
-    gap: '.75x',
-    position: 'relative',
-    margin: {
-      '': '0 1bw 0 1bw',
-      ':last-child & !:first-child': '0 $side-padding 0 0',
-      '!:last-child & :first-child': '0 0 0 $side-padding',
-      ':last-child & :first-child': '0 $side-padding',
-      context: '0',
-    },
-    padding: 0,
+    ...ITEM_ACTION_BASE_STYLES,
     reset: 'button',
     outline: 0,
     outlineOffset: 1,
     cursor: { '': 'pointer', disabled: 'default' },
-    radius: true,
-    transition: 'theme',
-    flexShrink: 0,
-    textDecoration: 'none',
-    boxSizing: 'border-box',
-    whiteSpace: 'nowrap',
-    border: 0,
-    height: '$action-size',
-    width: {
-      '': '$action-size',
-      'with-label': 'auto',
-    },
-    placeSelf: 'center',
-
-    // Size using custom property
-    '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',
-    // Side padding for the button
-    '$side-padding': 'max(min(.5x, (($size - 3x + 2bw) / 2)), 1bw)',
-
-    // Icon styles
-    Icon: {
-      display: 'grid',
-      placeItems: 'center',
-      aspectRatio: '1 / 1',
-      width: '$action-size',
-      opacity: {
-        '': 1,
-        'checkbox & selected': 1,
-        'checkbox & !selected': 0,
-        'checkbox & !selected & hovered': 0.4,
-      },
-    },
   },
   variants: {
     // Default theme

src/components/actions/ItemButton/ItemButton.tsx

@@ -12,6 +12,7 @@ import { useHover } from 'react-aria';
 
 import { Styles, tasty } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
+import { ItemBadge } from '../../content/ItemBadge';
 import { CubeItemBaseProps, ItemBase } from '../../content/ItemBase';
 import { DisplayTransition } from '../../helpers';
 import { CubeItemActionProps, ItemAction } from '../ItemAction';
@@ -209,6 +210,7 @@ const ItemButton = forwardRef(function ItemButton(
 
 const _ItemButton = Object.assign(ItemButton, {
   Action: ItemAction,
+  Badge: ItemBadge,
 });
 
 export { _ItemButton as ItemButton };

src/components/content/ItemBadge/ItemBadge.stories.tsx

@@ -0,0 +1,109 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CheckIcon } from '../../../icons/CheckIcon';
+import { KeyIcon } from '../../../icons/KeyIcon';
+import { ItemBase } from '../ItemBase';
+
+import { ItemBadge } from './ItemBadge';
+
+const meta: Meta<typeof ItemBadge> = {
+  title: 'Content/ItemBadge',
+  component: ItemBadge,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ItemBadge>;
+
+export const Default: Story = {
+  args: {
+    icon: <KeyIcon />,
+    tooltip: 'Information',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    icon: <CheckIcon />,
+    children: 'Success',
+  },
+};
+
+export const Types: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+      <ItemBadge icon={<KeyIcon />} type="primary" tooltip="Primary" />
+      <ItemBadge icon={<KeyIcon />} type="secondary" tooltip="Secondary" />
+      <ItemBadge icon={<KeyIcon />} type="neutral" tooltip="Neutral" />
+      <ItemBadge icon={<KeyIcon />} type="clear" tooltip="Clear" />
+    </div>
+  ),
+};
+
+export const Themes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+      <ItemBadge icon={<KeyIcon />} theme="default" tooltip="Default" />
+      <ItemBadge icon={<KeyIcon />} theme="danger" tooltip="Danger" />
+      <ItemBadge icon={<KeyIcon />} theme="success" tooltip="Success" />
+      <ItemBadge icon={<KeyIcon />} theme="special" tooltip="Special" />
+    </div>
+  ),
+};
+
+export const Loading: Story = {
+  args: {
+    icon: <KeyIcon />,
+    isLoading: true,
+    tooltip: 'Loading...',
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    icon: 'checkbox',
+    isSelected: true,
+    tooltip: 'Selected',
+  },
+};
+
+export const WithItemBase: Story = {
+  render: () => (
+    <ItemBase
+      size="large"
+      actions={
+        <>
+          <ItemBase.Badge icon={<KeyIcon />} tooltip="Primary" />
+          <ItemBase.Badge
+            icon={<CheckIcon />}
+            theme="success"
+            tooltip="Success"
+          />
+        </>
+      }
+    >
+      Item with badges
+    </ItemBase>
+  ),
+};
+
+export const InContext: Story = {
+  render: () => (
+    <ItemBase
+      size="large"
+      type="primary"
+      theme="success"
+      actions={
+        <>
+          <ItemBase.Badge icon={<CheckIcon />} tooltip="Verified" />
+          <ItemBase.Badge icon={<KeyIcon />} tooltip="Primary" />
+        </>
+      }
+    >
+      Item with badges in context
+    </ItemBase>
+  ),
+};