feat: item actions

Author: tenphi

.changeset/big-pugs-deny.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Allow to add actions to Item, ItemButton, and ItemBase.

src/components/Item.tsx

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { Item, ItemProps } from 'react-stately';
 
+import { ItemAction } from './actions/ItemAction';
 import { CubeItemBaseProps } from './content/ItemBase/ItemBase';
 
 export interface CubeItemProps<T>
@@ -11,6 +12,11 @@ export interface CubeItemProps<T>
   [key: string]: any;
 }
 
-const _Item = Item as <T>(props: CubeItemProps<T>) => ReactElement;
+const _Item = Object.assign(
+  Item as <T>(props: CubeItemProps<T>) => ReactElement,
+  {
+    Action: ItemAction,
+  },
+);
 
 export { _Item as Item };

src/components/actions/CommandMenu/CommandMenu.stories.tsx

@@ -1,14 +1,19 @@
 import {
   IconArrowBack,
   IconArrowForward,
+  IconBook,
+  IconBulb,
   IconClipboard,
   IconCopy,
   IconCut,
+  IconPlus,
+  IconReload,
   IconSelect,
 } from '@tabler/icons-react';
 import React, { useState } from 'react';
 import { expect, findByRole, userEvent, waitFor, within } from 'storybook/test';
 
+import { ClearIcon, EditIcon } from '../../../icons';
 import { tasty } from '../../../tasty';
 import { Card } from '../../content/Card/Card';
 import { HotKeys } from '../../content/HotKeys';
@@ -23,6 +28,7 @@ import {
   useDialogContainer,
 } from '../../overlays/Dialog';
 import { Button } from '../Button';
+import { ItemAction } from '../ItemAction';
 import { Menu } from '../Menu/Menu';
 import { useAnchoredMenu } from '../use-anchored-menu';
 import { useContextMenu } from '../use-context-menu';
@@ -376,6 +382,107 @@ WithSections.args = {
   width: '20x 50x',
 };
 
+export const ItemsWithActions = (props) => {
+  const handleAction = (key) => {
+    console.log('CommandMenu action:', key);
+  };
+
+  const handleItemAction = (itemKey, actionKey) => {
+    console.log(`Action "${actionKey}" triggered on item "${itemKey}"`);
+  };
+
+  return (
+    <CommandMenu
+      id="command-menu-with-actions"
+      {...props}
+      searchPlaceholder="Search files..."
+      autoFocus={true}
+      width="20x 50x"
+      onAction={handleAction}
+    >
+      <CommandMenu.Item
+        key="file1"
+        icon={<IconBook />}
+        description="PDF document"
+        actions={
+          <>
+            <ItemAction
+              icon={<EditIcon />}
+              aria-label="Edit"
+              onPress={() => handleItemAction('file1', 'edit')}
+            />
+            <ItemAction
+              icon={<ClearIcon />}
+              aria-label="Delete"
+              onPress={() => handleItemAction('file1', 'delete')}
+            />
+          </>
+        }
+      >
+        Document.pdf
+      </CommandMenu.Item>
+      <CommandMenu.Item
+        key="file2"
+        icon={<IconReload />}
+        description="Backup file"
+        actions={
+          <>
+            <ItemAction
+              icon={<EditIcon />}
+              aria-label="Edit"
+              onPress={() => handleItemAction('file2', 'edit')}
+            />
+            <ItemAction
+              icon={<ClearIcon />}
+              aria-label="Delete"
+              onPress={() => handleItemAction('file2', 'delete')}
+            />
+          </>
+        }
+      >
+        Backup.zip
+      </CommandMenu.Item>
+      <CommandMenu.Item
+        key="file3"
+        icon={<IconPlus />}
+        description="New file"
+        actions={
+          <>
+            <ItemAction
+              icon={<EditIcon />}
+              aria-label="Edit"
+              onPress={() => handleItemAction('file3', 'edit')}
+            />
+            <ItemAction
+              icon={<ClearIcon />}
+              aria-label="Delete"
+              onPress={() => handleItemAction('file3', 'delete')}
+            />
+          </>
+        }
+      >
+        Project.doc
+      </CommandMenu.Item>
+      <CommandMenu.Item
+        key="file4"
+        icon={<IconBulb />}
+        description="No actions"
+      >
+        Item without actions
+      </CommandMenu.Item>
+    </CommandMenu>
+  );
+};
+
+ItemsWithActions.parameters = {
+  docs: {
+    description: {
+      story:
+        'Demonstrates CommandMenu.Item with inline actions. Actions are displayed on the right side of each item and inherit the item type through ItemActionProvider context. Search to filter items and hover to see the actions.',
+    },
+  },
+};
+
 export const WithMenuTrigger: StoryFn<CubeCommandMenuProps<any>> = (args) => (
   <CommandMenu.Trigger>
     <Button>Open Command Palette</Button>

src/components/actions/ItemAction/ItemAction.tsx

@@ -3,21 +3,40 @@ import { forwardRef } from 'react';
 
 import { tasty } from '../../../tasty';
 import { Button, CubeButtonProps } from '../Button';
+import { useItemActionContext } from '../ItemActionContext';
 
 export interface CubeItemActionProps extends CubeButtonProps {
   // All props from Button are inherited
 }
 
-export const ItemAction = tasty(Button, {
-  type: 'neutral',
+const StyledButton = tasty(Button, {
   styles: {
+    border: 0,
     height: '($size - 1x)',
     width: '($size - 1x)',
     margin: {
       '': '0 1bw 0 1bw',
       ':last-child & !:first-child': '0 (.5x - 1bw) 0 0',
       '!:last-child & :first-child': '0 0 0 (.5x - 1bw)',
       ':last-child & :first-child': '0 (.5x - 1bw)',
+      context: '0',
     },
   },
 });
+
+export const ItemAction = forwardRef(function ItemAction(
+  props: CubeItemActionProps,
+  ref: FocusableRef<HTMLElement>,
+) {
+  const { type: contextType } = useItemActionContext();
+  const { type = contextType ?? 'neutral', ...rest } = props;
+
+  return (
+    <StyledButton
+      {...rest}
+      ref={ref}
+      mods={{ context: !!contextType }}
+      type={type}
+    />
+  );
+});

src/components/actions/ItemActionContext.tsx

@@ -0,0 +1,33 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+import { CubeItemBaseProps } from '../content/ItemBase';
+
+interface ItemActionContextValue {
+  type?: CubeItemBaseProps['type'];
+}
+
+const ItemActionContext = createContext<ItemActionContextValue | undefined>(
+  undefined,
+);
+
+export interface ItemActionProviderProps {
+  type?: CubeItemBaseProps['type'];
+  children: ReactNode;
+}
+
+export function ItemActionProvider({
+  type,
+  children,
+}: ItemActionProviderProps) {
+  return (
+    <ItemActionContext.Provider
+      value={{ type: type === 'item' ? 'neutral' : type }}
+    >
+      {children}
+    </ItemActionContext.Provider>
+  );
+}
+
+export function useItemActionContext(): ItemActionContextValue {
+  return useContext(ItemActionContext) ?? {};
+}

src/components/actions/ItemButton/ItemButton.docs.mdx

@@ -37,6 +37,12 @@ ItemButton inherits all properties from [ItemBase](/docs/content-itembase--docs)
 - Interactive properties: `hotkeys`, `tooltip`, `isSelected`
 - Styling properties: `size`, `type`, `theme`, `styles`
 
+### Content Properties
+
+#### actions
+- **Type**: `ReactNode`
+- **Description**: Inline action buttons displayed on the right side of the button. Use `ItemButton.Action` for consistent styling. Actions automatically inherit the parent button's `type` prop and the component reserves space to prevent content overlap.
+
 ### Action Properties
 
 #### onPress
@@ -161,6 +167,27 @@ Inherits all modifiers from [ItemBase](/docs/content-itembase--docs) plus:
 </ItemButton>
 ```
 
+### Button with Actions
+
+ItemButton supports inline actions that appear on the right side. Use the `ItemButton.Action` compound component for consistent styling:
+
+```jsx
+<ItemButton 
+  icon={<IconFile />}
+  actions={
+    <>
+      <ItemButton.Action icon={<IconEdit />} aria-label="Edit" onPress={handleEdit} />
+      <ItemButton.Action icon={<IconTrash />} aria-label="Delete" onPress={handleDelete} />
+    </>
+  }
+  onPress={handleOpen}
+>
+  Document with Actions
+</ItemButton>
+```
+
+Actions automatically inherit the parent button's `type` prop and adjust their styling accordingly. The component reserves space for actions to prevent content overlap.
+
 ## Accessibility
 
 ### Keyboard Navigation
@@ -207,13 +234,46 @@ Inherits all modifiers from [ItemBase](/docs/content-itembase--docs) plus:
    </ItemButton>
    ```
 
-4. **Don't**: Use vague or unclear button text
+4. **Do**: Use `ItemButton.Action` for inline actions
+   ```jsx
+   <ItemButton 
+     icon={<IconFile />}
+     actions={
+       <>
+         <ItemButton.Action icon={<IconEdit />} aria-label="Edit" />
+         <ItemButton.Action icon={<IconTrash />} aria-label="Delete" />
+       </>
+     }
+     onPress={handleOpen}
+   >
+     Open Document
+   </ItemButton>
+   ```
+
+5. **Don't**: Use vague or unclear button text
    ```jsx
    {/* Avoid this - unclear what "OK" does */}
    <ItemButton onPress={handleAction}>OK</ItemButton>
    ```
 
-5. **Don't**: Overcrowd buttons with too many visual elements
+6. **Don't**: Add too many actions (limit to 2-3 for clarity)
+   ```jsx
+   {/* Avoid this - too many action buttons */}
+   <ItemButton 
+     actions={
+       <>
+         <ItemButton.Action icon={<IconEdit />} aria-label="Edit" />
+         <ItemButton.Action icon={<IconCopy />} aria-label="Copy" />
+         <ItemButton.Action icon={<IconShare />} aria-label="Share" />
+         <ItemButton.Action icon={<IconTrash />} aria-label="Delete" />
+       </>
+     }
+   >
+     Button with too many actions
+   </ItemButton>
+   ```
+
+7. **Don't**: Overcrowd buttons with too many visual elements
    ```jsx
    {/* Avoid this - too many competing elements */}
    <ItemButton 
@@ -227,7 +287,7 @@ Inherits all modifiers from [ItemBase](/docs/content-itembase--docs) plus:
    </ItemButton>
    ```
 
-6. **Accessibility**: Always ensure buttons have clear, descriptive labels and proper keyboard support
+8. **Accessibility**: Always ensure buttons have clear, descriptive labels, proper keyboard support, and provide `aria-label` for action buttons
 
 ## Integration with Forms
 
@@ -248,6 +308,7 @@ ItemButton integrates seamlessly with forms when using the `buttonType` prop:
 ## Related Components
 
 - [ItemBase](/docs/content-itembase--docs) - The foundational component that ItemButton extends
+- [ItemButton.Action](/docs/actions-itemaction--docs) - Action button component for inline actions (also available as `ItemBase.Action`, `Menu.Item.Action`, etc.)
 - [Button](/docs/actions-button--docs) - Traditional button component for simpler use cases
 - [Link](/docs/navigation-link--docs) - Text link component for navigation
 - [Menu.Item](/docs/actions-menu--docs) - Menu item component that also uses ItemBase