feat(ui): add F0CardRow component by warcos-fact · Pull Request #4340 · factorialco/f0

warcos-fact · 2026-06-05T09:34:10Z

What

Adds F0CardRow — the horizontal, row-shaped counterpart to F0Card:

Optional avatar on the left (any avatar type: person, company, team, file, flag, icon, emoji, module, alert, date, pulse), rendered at a fixed lg size.
Title + optional description (wraps across lines when long).
Trailing actions: primaryAction, secondaryActions, otherActions (⋯ overflow menu), or an icon-only confirm/reject variant.
Optional alert banner.
stackAt container breakpoint (sm/md/lg/never, default never): below it the actions drop onto their own full-width line (with a footer hairline) and secondary buttons fold into the ⋯ menu; the primary stays pinned.

Includes a unit test suite and autodocs (description + use cases + stories).

Notes

Built on ButtonGroup (feat(ui): add ButtonGroup — a data-driven action bar #4339, now merged). CardRowActions is a thin adapter over ButtonGroup: the primaryAction / secondaryActions / otherActions triplet maps straight through, and ButtonGroup owns the row layout, the width-driven ⋯ overflow, and pinning the primary at the trailing edge. The card layers on only its own concerns:
- stops click propagation so an action never triggers the row's onClick / overlay-link navigation;
- the stacked own-line footer hairline at the container breakpoint (stackAt, a container query — reacts to the card's own width, not the viewport);
- the icon-only confirm/reject (✗ / ✓) variant, mapped to two pinned secondaries.
The actions wrapper takes the remaining row space (flex-1) so ButtonGroup has a bound wider than its content to measure against — a shrink-to-fit container would shed its tail into the ⋯ menu.
The F0HILActionConfirmation migration to F0CardRow and the removal of the experimental F0Card oneLiner variant stay with the cocreation PR (feat(cocreation): co-creation pattern definition #4307), since both originate there. Once this lands, that PR (or a follow-up) can point F0HIL at F0CardRow and drop oneLiner.

Verification

Type-check and the F0Card unit suite (45 tests) pass against the merged ButtonGroup. Driven through Storybook across the row patterns — inline (primary + ⋯ + secondary), confirm/reject, stacked own-line + footer, and genuine width-overflow (a secondary sheds into ⋯ while the primary stays pinned).

🤖 Generated with Claude Code

github-actions · 2026-06-05T09:38:11Z

🔍 Visual review for your branch is published 🔍

Here are the links to:

github-actions · 2026-06-05T09:44:47Z

✅ No New Circular Dependencies

No new circular dependencies detected. Current count: 0

github-actions · 2026-06-05T09:46:17Z

📦 Alpha Package Version Published

Use pnpm i github:factorialco/f0#npm/alpha-pr-4340 to install the package

Use pnpm i github:factorialco/f0#b24f93926a22dc937c0d12f3be535c34c4df7df8 to install this specific commit

github-actions · 2026-06-05T09:48:36Z

✅ No breaking public API changes

No public exports were removed, renamed, or had existing props/types changed in a breaking way compared to main.

Comparing f0, experimental and ai against main. Adding components, types, or optional props is safe. This check is non-blocking.

➕ Additive changes (safe) — 2

f0: F0CardRow, F0CardRowProps

github-actions · 2026-06-05T09:50:05Z

Coverage Report for packages/react

Status	Category	Percentage	Covered / Total
🔵	Lines	53.05%	15409 / 29041
🔵	Statements	52.18%	15989 / 30638
🔵	Functions	45.23%	3468 / 7667
🔵	Branches	46.04%	10945 / 23768

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/react/src/components/F0Card/F0CardRow.tsx	90%	80%	50%	90%	245-266
packages/react/src/components/F0Card/index.tsx	100%	100%	100%	100%
packages/react/src/components/F0Card/components/CardAvatar.tsx	100%	82.75%	100%	100%
packages/react/src/components/F0Card/components/CardRowActions.tsx	93.75%	83.72%	85.71%	93.54%	267-279

Generated in workflow #14361 for commit 346c087 by the Vitest Coverage Report Action

The F0Card oneLiner/horizontal variant and the F0HILActionConfirmation card usage were a stepping stone now superseded by the dedicated F0CardRow component (#4340) and the F0HIL -> F0CardRow update. Revert CardInternal, CardActions, Card.stories and F0HILActionConfirmation to the fork point so this branch carries only its co-creation pattern work and no longer ships the dead variant. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

rubenmoya

LGTM

F0CardRow is the horizontal, row-shaped counterpart to F0Card: an optional avatar on the left, a title with an optional description, and trailing actions on the right. Supports primary / secondary / overflow actions, an icon-only confirm/reject variant, an alert banner, and a `stackAt` container breakpoint that drops the actions onto their own line (folding secondary buttons into a left ⋯ menu) when the card is narrow. Net-new component with a unit test suite and autodocs (description + use cases). The F0HILActionConfirmation migration and removal of the experimental F0Card `oneLiner` variant stay with the cocreation PR. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Drop the ellipsis prop from the title and description Text elements so long content wraps across multiple lines in all cases. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Replace the bespoke overflow/primary-secondary-other machinery in CardRowActions with a thin adapter over the data-driven ButtonGroup (#4339), which now owns the width-driven "⋯" overflow, the primary pinning, and the row/stacked layout. The card keeps its own concerns: stopping click propagation so actions don't trigger the row link, the stacked own-line footer hairline at the container breakpoint, and the confirm/reject icon variant (mapped to two pinned secondaries). The actions wrapper takes the remaining row space (flex-1) so ButtonGroup has a bound wider than its content to measure against; a shrink-to-fit container made it shed its tail into the menu. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…tack The confirm (✓) action now renders as the solid primary instead of a second outline button; reject (✗) stays outline. While inline the pair stays icon-only, but once the row stacks onto its own line the buttons reveal their labels (default "Cancel" / "Confirm", or whatever the caller supplies) — rendered as a CSS-toggled labelled cluster since hideLabel is static and the stack is a container query ButtonGroup can't observe. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The stacked actions wrapper had both `w-full` and the `-mx-4` full-bleed: a negative right margin can't widen a fixed-width box, so the footer hairline clipped ~16px short on the right. Drop `w-full` and let the flex column stretch the wrapper instead, so `-mx-4`/`px-4` bleeds evenly to both card edges. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Add a generic `status` prop (an F0TagStatus) rendered at the trailing edge in place of any actions — the resolved state of a confirm/reject row. It's informational, so no click-stop / z-index (a row-level overlay link stays clickable through it), and the outer flex drops it to its own line when stacked. The accepted/rejected -> positive/critical mapping is left to the caller; Accepted/Rejected stories demonstrate it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Add an `inactive` prop that strikes through and dims the title (lighter foreground) and description, marking the row's subject as void/closed — e.g. a rejected request. Presentational and generic; the Rejected story pairs it with the critical status tag. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Allow `status` to be a coloured icon instead of a tag — a discriminated union of TagStatusProps or { icon, variant, label }. Renders the plain accept/reject glyph (Check / Cross, not the circled variants) at lg size, coloured by variant, with the label exposed via role="img" + aria-label. Accepted/Rejected-icon stories demonstrate it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Drop the status tag variant in favour of the coloured icon: `status` is now just `{ icon, variant, label }`, no longer a tag/icon union. Removes the F0TagStatus path; Accepted/Rejected stories render the Check/Cross glyph. Not a breaking change — F0CardRow has no consumers outside this PR. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

`title` is a required prop, so the `{title && …}` check never short- circuits. Render it unconditionally. Addresses review feedback. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Replace the bespoke div + buttons layout with F0CardRow — the confirm action becomes the primary, cancel becomes a secondary. Third step of the sequence after ButtonGroup (#4339) and F0CardRow (#4340). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…ards Rebased onto main (#4340 F0CardRow / #4341 F0HILActionConfirmation now landed). The welcome footer cards use F0CardRow instead of a hand-rolled button. Also drops the now-unused appendRawMessages mock helper (dead after removing the in-chat resource cards). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

warcos-fact requested review from a team as code owners June 5, 2026 09:34

github-actions Bot added feat react Changes affect packages/react labels Jun 5, 2026

warcos-fact mentioned this pull request Jun 5, 2026

feat(ui): add ButtonGroup primitive #4308

Closed

warcos-fact force-pushed the feat/f0-card-row branch from ca0859b to e1f5777 Compare June 5, 2026 09:42

warcos-fact requested a review from a team as a code owner June 5, 2026 09:42

warcos-fact changed the base branch from cocreation-patterns-definition to main June 5, 2026 09:42

warcos-fact mentioned this pull request Jun 5, 2026

feat(ui): add ButtonGroup — a data-driven action bar #4339

Merged

warcos-fact mentioned this pull request Jun 5, 2026

feat(sds): render F0HILActionConfirmation with F0CardRow #4341

Merged

rubenmoya approved these changes Jun 8, 2026

View reviewed changes

Comment thread packages/react/src/components/F0Card/F0CardRow.tsx Outdated

warcos-fact and others added 5 commits June 8, 2026 12:59

chore(ui): show F0CardRow as a top-level Storybook entry

696ac35

fix(ui): wrap F0CardRow title and description instead of truncating

e9e8a48

Drop the ellipsis prop from the title and description Text elements so long content wraps across multiple lines in all cases. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

docs(ui): update F0CardRow description docs to reflect wrapping

2538139

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

warcos-fact force-pushed the feat/f0-card-row branch from c6c264f to 43cfc49 Compare June 8, 2026 11:04

warcos-fact and others added 6 commits June 8, 2026 13:17

feat(ui): default F0CardRow reject label to "Reject"

fabd05e

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

warcos-fact force-pushed the feat/f0-card-row branch from 1cfbb3f to cbc6451 Compare June 8, 2026 12:43

warcos-fact and others added 2 commits June 8, 2026 14:46

refactor(ui): drop redundant title guard in F0CardRow

27cb23b

`title` is a required prop, so the `{title && …}` check never short- circuits. Render it unconditionally. Addresses review feedback. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Merge branch 'main' into feat/f0-card-row

346c087

warcos-fact requested a review from rubenmoya June 8, 2026 12:52

siguenzaraul approved these changes Jun 8, 2026

View reviewed changes

warcos-fact merged commit 806cd55 into main Jun 8, 2026
24 checks passed

warcos-fact deleted the feat/f0-card-row branch June 8, 2026 13:13

eliseo-juan mentioned this pull request Jun 8, 2026

chore: release main #4361

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(ui): add F0CardRow component#4340

feat(ui): add F0CardRow component#4340
warcos-fact merged 14 commits into
mainfrom
feat/f0-card-row

warcos-fact commented Jun 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

rubenmoya left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

warcos-fact commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Notes

Verification

Uh oh!

github-actions Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 Visual review for your branch is published 🔍

Uh oh!

github-actions Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ No New Circular Dependencies

Uh oh!

github-actions Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Alpha Package Version Published

Uh oh!

github-actions Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ No breaking public API changes

Uh oh!

github-actions Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for packages/react

Uh oh!

rubenmoya left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

warcos-fact commented Jun 5, 2026 •

edited

Loading

github-actions Bot commented Jun 5, 2026 •

edited

Loading

github-actions Bot commented Jun 5, 2026 •

edited

Loading

github-actions Bot commented Jun 5, 2026 •

edited

Loading

github-actions Bot commented Jun 5, 2026 •

edited

Loading

github-actions Bot commented Jun 5, 2026 •

edited

Loading