feat(LayerCard): Add actions prop and LayerCard.Action component

[mattrothenberg]

Summary

Adds first-class support for header actions in LayerCard.Secondary:

• actions prop - Slot for buttons, menus, and other action elements
• LayerCard.Action - Pre-configured icon button that enforces consistent sizing (sm) and shape (square)
• render prop - Escape hatch for custom elements like links

Changes

• LayerCard.Secondary now has consistent min-h-10 (40px) height whether actions are present or not
• Header layout uses flexbox with justify-between for title/children on left, actions on right

Usage

// Simple action
<LayerCard.Secondary
  actions={<LayerCard.Action icon={PlusIcon} label="Add" onClick={handleAdd} />}
>
  Domains
</LayerCard.Secondary>

// Multiple actions with overflow menu
<LayerCard.Secondary
  actions={
    <>
      <LayerCard.Action icon={StarIcon} label="Star" />
      <LayerCard.Action icon={PlusIcon} label="Add" variant="secondary" />
      <DropdownMenu>
        <DropdownMenu.Trigger>
          <LayerCard.Action icon={DotsThreeIcon} label="More actions" />
        </DropdownMenu.Trigger>
        <DropdownMenu.Content>
          <DropdownMenu.Item>Edit</DropdownMenu.Item>
          <DropdownMenu.Item>Delete</DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu>
    </>
  }
>
  Domains
  <Badge variant="neutral">3</Badge>
</LayerCard.Secondary>

// Link action (render prop)
<LayerCard.Action
  icon={ArrowRightIcon}
  label="View details"
  render={(props) => <Link to="/details" {...props} />}
/>

Questions for reviewers

1. Is min-h-10 (40px) the right height? It accommodates sm buttons with some breathing room
2. Should we enforce sm buttons another way, or is documentation + LayerCard.Action sufficient?
3. Any concerns about the render prop pattern for links?

---

• Reviews
• bonk has reviewed the change
• automated review not possible because: design discussion needed
• Tests
• Tests included/updated
• Additional testing not necessary because: existing component, no logic changes

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@406

commit: df0a359

[github-actions]

Docs Preview

View docs preview

Commit: 53f0de6

[github-actions]

Visual Regression Report — 15 changed, 21 unchanged

15 screenshot(s) with visual changes:

Button / Loading State

7 px (0.01%) changed

Before	After	Diff

Dialog / Dialog Basic

199 px (0.2%) changed

Before	After	Diff

Dialog / Dialog Alert

744 px (0.73%) changed

Before	After	Diff

Dialog / Dialog With Select

225 px (0.22%) changed

Before	After	Diff

Dialog / Dialog With Combobox

130 px (0.13%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

244 px (0.24%) changed

Before	After	Diff

Select / Select With Field

861 px (0.73%) changed

Before	After	Diff

Select / Select With Tooltip

350 px (0.34%) changed

Before	After	Diff

Select / Select Custom Rendering

621 px (0.61%) changed

Before	After	Diff

Select / Select Loading

1,461 px (0.68%) changed

Before	After	Diff

Select / Select Multiple

556 px (0.55%) changed

Before	After	Diff

Select / Select Disabled Options

840 px (0.83%) changed

Before	After	Diff

Select / Select Grouped With Disabled

842 px (0.83%) changed

Before	After	Diff

Select / Select Long List

976 px (0.82%) changed

Before	After	Diff

Select (Open)

198 px (0%) changed

Before	After	Diff

21 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Button / Title
• Dialog / Dialog With Actions
• Dialog / Dialog Confirmation
• Dialog (Open)
• Select / Select Basic
• Select / Select Without Label
• Select / Select Placeholder
• Select / Select Complex
• Select / Select Disabled Items
• Select / Select Grouped

---

Generated by Kumo Visual Regression