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

[IzumiSy]

Summary

Add an optional variant prop to ActionItem so that dangerous actions (e.g. "Delete") can be styled with destructive (red) text color in the ActionPanel.

Usage

<ActionPanel
  title="Actions"
  actions={[
    {
      key: "delete",
      label: "Delete Result",
      icon: <Trash2Icon />,
      variant: "destructive",
      onClick: handleDelete,
    },
  ]}
/>

Notes

Non-breaking: variant is optional and defaults to "default" (existing behavior unchanged)

[pkg-pr-new]

Open in StackBlitz

pnpm add https://pkg.pr.new/tailor-platform/app-shell/@tailor-platform/app-shell@f605fc6

pnpm add https://pkg.pr.new/tailor-platform/app-shell/@tailor-platform/app-shell-sdk-plugin@f605fc6

pnpm add https://pkg.pr.new/tailor-platform/app-shell/@tailor-platform/app-shell-vite-plugin@f605fc6

commit: f605fc6

[erickteowarang]

If you click on the whole row, does it trigger the event? As in is it basically acting as a button now?

[IzumiSy]

If you click on the whole row, does it trigger the event? As in is it basically acting as a button now?

Yes. No change from the current behaviour of ActionPanel component.

[erickteowarang]

Ah yeap, I checked the code and I can see it's semantically correct (it's a <button />)

I feel like we should enforce that if you add a "destructive" variant, it should require a confirmation modal to make sure. Doesn't have to be in this PR