feat(action-panel): add variant prop to ActionItem for destructive styling (#301)

Author: IzumiSy

.changeset/red-actions-glow.md

@@ -0,0 +1,5 @@
+---
+"@tailor-platform/app-shell": patch
+---
+
+Add optional `variant` prop to `ActionItem` for the `ActionPanel` component. Use `variant: "destructive"` to style dangerous actions (e.g., delete) with red text and hover background.

docs/components/action-panel.md

@@ -47,14 +47,15 @@ import { ActionPanel } from "@tailor-platform/app-shell";
 
 ### ActionItem
 
-| Property   | Type                          | Default      | Description                                       |
-| ---------- | ----------------------------- | ------------ | ------------------------------------------------- |
-| `key`      | `string`                      | **Required** | Unique key for stable rendering                   |
-| `label`    | `string`                      | **Required** | Action label shown to users                       |
-| `icon`     | `ReactNode`                   | **Required** | Icon rendered in a fixed 16px slot                |
-| `onClick`  | `() => void \| Promise<void>` | -            | Click handler for the action                      |
-| `disabled` | `boolean`                     | `false`      | Disables interaction and applies disabled styling |
-| `loading`  | `boolean`                     | `false`      | Shows spinner, disables interaction, sets busy UI |
+| Property   | Type                          | Default      | Description                                                           |
+| ---------- | ----------------------------- | ------------ | --------------------------------------------------------------------- |
+| `key`      | `string`                      | **Required** | Unique key for stable rendering                                       |
+| `label`    | `string`                      | **Required** | Action label shown to users                                           |
+| `icon`     | `ReactNode`                   | **Required** | Icon rendered in a fixed 16px slot                                    |
+| `onClick`  | `() => void \| Promise<void>` | -            | Click handler for the action                                          |
+| `disabled` | `boolean`                     | `false`      | Disables interaction and applies disabled styling                     |
+| `loading`  | `boolean`                     | `false`      | Shows spinner, disables interaction, sets busy UI                     |
+| `variant`  | `"default" \| "destructive"`  | `"default"`  | Visual variant; use `"destructive"` for dangerous actions like delete |
 
 ## Behavior
 

examples/nextjs-app/src/modules/pages/action-panel-demo.tsx

@@ -3,6 +3,7 @@ import {
   Receipt as ReceiptIcon,
   FileText as FileTextIcon,
   ExternalLink as ExternalLinkIcon,
+  Trash2 as Trash2Icon,
 } from "lucide-react";
 
 const ActionPanelDemoPage = () => {
@@ -49,6 +50,15 @@ const ActionPanelDemoPage = () => {
             icon: <ExternalLinkIcon size={16} />,
             onClick: () => navigate("/custom-page/purchase-order-demo"),
           },
+          {
+            key: "delete-result",
+            label: "Delete Result",
+            icon: <Trash2Icon size={16} />,
+            variant: "destructive",
+            onClick: () => {
+              toast("Delete result clicked");
+            },
+          },
         ]}
       />
     </div>

packages/core/src/components/action-panel/ActionPanel.tsx

@@ -43,10 +43,13 @@ const actionRowBaseClasses = cn(
 const actionRowInteractiveClasses =
   "astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus-visible:ring-2 astw:focus-visible:ring-ring astw:focus-visible:ring-offset-2";
 
+const actionRowDestructiveClasses =
+  "astw:text-destructive astw:hover:bg-destructive/10 astw:hover:text-destructive";
+
 const actionRowDisabledClasses = "astw:pointer-events-none astw:opacity-50";
 
 function ActionRow({ action }: { action: ActionItem }) {
-  const { key, label, icon, onClick, disabled, loading } = action;
+  const { key, label, icon, onClick, disabled, loading, variant } = action;
   const isDisabled = Boolean(disabled) || Boolean(loading);
 
   const content = (
@@ -61,6 +64,7 @@ function ActionRow({ action }: { action: ActionItem }) {
   const rowClasses = cn(
     actionRowBaseClasses,
     isDisabled ? actionRowDisabledClasses : actionRowInteractiveClasses,
+    variant === "destructive" && !isDisabled && actionRowDestructiveClasses,
   );
 
   return (

packages/core/src/components/action-panel/types.ts

@@ -21,6 +21,8 @@ export interface ActionItem {
   disabled?: boolean;
   /** When true, show loading indicator in the row and make it non-interactive */
   loading?: boolean;
+  /** Visual variant. Use "destructive" for dangerous actions like delete. */
+  variant?: "default" | "destructive";
 }
 
 // ============================================================================