refactor(F0Card)!: rename F0CardRow to F0CardHorizontal#4483
Merged
Conversation
Squashes the card-row layout/interaction work from the cocreation branch into one commit on top of main: - restore the opt-in whole-row click target - top-align the avatar so it stays level with the title as the row grows - keep avatar + actions top-aligned; center them on the avatar in standard rows - center the status icon and fix the avatar nudge when stacking - reserve space for the actions so long text can't overrun them - drop the unused compact variant Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Structural orientation-based name; the XxxRow convention across F0 reads as "a row inside an Xxx", whereas this is itself a card laid out as a row. The real differentiator from F0Card is orientation. @experimental, so renamed hard with no deprecated alias. Updates the in-repo consumer F0HILActionConfirmation and a ButtonGroup doc reference. BREAKING CHANGE: F0CardRow / F0CardRowProps are renamed to F0CardHorizontal / F0CardHorizontalProps. Update imports accordingly. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
github-actions
Bot
added
refactor
breaking change
react
Contributor
✅ No New Circular DependenciesNo new circular dependencies detected. Current count: 0 |
Contributor
📦 Alpha Package Version PublishedUse Use |
Contributor
🔍 Visual review for your branch is published 🔍Here are the links to: |
Contributor
The container-query `stack` variant referenced a "Card oneLiner" that never shipped under that name; point it at F0CardHorizontal. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
|
…oup gap removal
ButtonGroup's `gap` defaults to 8 (= gap-md), so passing `gap={GAP}` here is a
no-op. Dropping it removes this branch's dependency on the `gap` prop that
#4459 deletes, so the two PRs no longer conflict at the type level regardless
of merge order. Behaviour is unchanged.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add an MDX doc page (mirrors the F0Alert gold standard) covering anatomy, guidelines and accessibility. The guidelines lead with the decision between F0CardHorizontal and F0Card — framed by the user's intention (scan/act on a list vs read/explore a standalone object) — to disambiguate their overlap. - Disable autodocs (!autodocs) so the MDX is the single docs page; move the prose out of the stories meta into the MDX. - Add two no-sidebar stories (ListOfRows / CardsAsRows) for the visual do/don't contrasting a list of rows against F0Card forced into rows. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
"List rows" / "single-row card" read like a table row or a fused list. Reframe the guidance around a vertical stack of standalone cards (each its own surface and spacing) and add an explicit "not a table row or a divided list" clarifier, plus a light row→card consistency pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Match the Components convention (Card, FileItem, ButtonDropdown). The story
title was "Card Horizontal" (spaced); use "CardHorizontal" so it reads as a
PascalCase sibling of Card. The MDX <Meta of={Stories}/> inherits it.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The MDX prose was reworded earlier, but the argTypes descriptions, per-story comments and a story name still said "row" — and those render in the Controls table and story docs. Reword them all to "card", rename ClickableRow → ClickableCard and the two do/don't helpers (HorizontalCardStack / VerticalCardStack), and drop "row" from the metadata cell + the not-a-table clarifier. No standalone "row"/"rows" left in the docs. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The MDX H1 still rendered "Card Horizontal" (spaced); use "CardHorizontal" so the page title matches the sidebar entry and component name. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The docs commits were hand-edited and never run through oxfmt, leaving the .mdx over the print width. Pure line-reflow, no content changes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…zontal # Conflicts: # packages/react/src/components/F0Card/F0CardHorizontal.tsx # packages/react/src/components/F0Card/__stories__/F0CardHorizontal.stories.tsx # packages/react/src/components/F0Card/components/CardHorizontalActions.tsx
siguenzaraul
approved these changes
Jun 19, 2026
In this Storybook the "Experimental" section, the maturity alert, and the import banner are all driven by the directory a story file lives in (src/experimental/, via titlePrefix) — never by the `experimental` tag (its tagBadges config is inert: the consuming addon isn't installed). So filing F0CardHorizontal as experimental requires physically moving it there. Move the component, its horizontal-only CardHorizontalActions, story, mdx and test from src/components/F0Card to src/experimental/F0CardHorizontal. Shared card parts (CardAvatar/CardAlert/CardActions/types) stay with the vertical F0Card and are imported via @/components/F0Card. Export from the experimental entry (@factorialco/f0-react/experimental) instead of the main entry, and repoint the F0HILActionConfirmation consumer. Storybook now files it under Experimental/CardHorizontal (storyId experimental-cardhorizontal-*, which fires the "Experimental component" alert). Chromatic re-baselines: story IDs card-horizontal-* -> experimental-cardhorizontal-*. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The existing stories all render at a fixed 640px, so the `stackAt` container query never actually triggers and the "Stacking" docs canvas showed the actions inline despite the prose describing them wrapping. Add a `ResponsiveStacking` story that renders the same `stackAt: "md"` card at a ladder of widths (600/520 inline, 440/360 wrapped) so the actions visibly drop onto their own line as the card narrows past the breakpoint, and point the MDX "Responsive stacking" section at it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
sauldom102
approved these changes
Jun 19, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Renames the experimental
F0CardRowtoF0CardHorizontaland folds in the card-row layout fixes, split out of the cocreation PR #4307 so the breaking rename can be reviewed and land on its own. The new name is structural (orientation-based): theXxxRowconvention across F0 reads as "a row inside an Xxx", whereas this is itself a card laid out as a row — the real difference fromF0Cardis orientation.Implementation details
fix(F0CardRow): card-row layout & interaction fixes — restore the opt-in whole-row click target, top-align/center the avatar and trailing actions, fix the status-icon nudge when stacking, reserve space so long text can't overrun the actions, and drop the unused compact variant
refactor(F0Card)!: rename
F0CardRow→F0CardHorizontal(andF0CardRowProps→F0CardHorizontalProps), updating the in-repo consumerF0HILActionConfirmationand aButtonGroupdoc referenceBreaking change & rollout
F0CardRowis@experimental, so it is renamed hard with no deprecated alias.F0CardRow/F0CardRowProps→F0CardHorizontal/F0CardHorizontalProps; consumers update their imports.mainand the duplicated card commits drop out.card-row--*→card-horizontal--*).