CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Keep See-all method cards at the compact 142px tile height so expanded rows do not stretch with badges and wrapping copy.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-08-21 16:14:27 -06:00
co-authored by Cursor
parent 75ba0a214f
commit ef60175805
6 changed files with 75 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/cards/CardStack/CardStack.container.tsx
+2
View File
@@ -11,6 +11,8 @@ const DEFAULT_TOGGLE_LABEL = "See all communication approaches";
* Figma: "Utility / CardStack"; canonical code under `cards/`.
* Selectable stack of cards with
* an optional "see all"/"show less" expand toggle.
* Expanded default layout matches Flow — Expanded Card Stack (`20768:14820`):
* 281×142 CardSelection tiles in two columns.
*/
const CardStackContainer = memo<CardStackProps>(
({
app/components/cards/CardStack/CardStack.types.ts
+1 -1
View File
@@ -20,7 +20,7 @@ export interface CardStackProps {
showLessLabel?: string;
title?: string;
description?: ReactNode;
/** "default" = compact grid/column + expanded grid; "singleStack" = always one column, expand shows more in same stack */
/** "default" = compact grid/column + expanded 2-col 142px tiles; "singleStack" = always one column, expand shows more in same stack */
layout?: "default" | "singleStack";
/**
* Max recommended cards in compact (non-expanded) mode. Default 5; Figma compact stack uses 3.
app/components/cards/CardStack/CardStack.view.tsx
+52 -26
View File
@@ -6,6 +6,10 @@ import type { HeaderLockupSizeValue } from "../../type/HeaderLockup/HeaderLockup
import Selection from "../Selection";
import type { CardStackViewProps } from "./CardStack.types";
/** Figma Card / CardSelection on Compact + Expanded Card Stack (`281×142`). */
const FIGMA_CARD_SELECTION_TILE_CLASS =
"h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0";
function CardStackHeaderLockup({
title,
description,
@@ -175,24 +179,46 @@ export function CardStackView({
/>
{expanded ? (
<div className="mx-auto grid w-full max-w-[min(100%,860px)] grid-cols-1 gap-x-4 gap-y-6 md:grid-cols-2">
{cards.map((item) => (
<Selection
key={item.id}
id={item.id}
label={item.label}
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="vertical"
showInfoIcon={true}
onClick={() => onCardSelect(item.id)}
/>
))}
{addTile ? (
<div className="min-w-0 md:col-span-2">{addTile}</div>
) : null}
</div>
<>
<div className="flex w-full flex-col gap-2 md:hidden">
{cards.map((item) => (
<Selection
key={item.id}
id={item.id}
label={item.label}
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
showInfoIcon={false}
className="min-h-[142px]"
onClick={() => onCardSelect(item.id)}
/>
))}
{addTile}
</div>
<div className="mx-auto hidden w-full max-w-[min(100%,570px)] flex-wrap justify-center gap-2 md:flex">
{cards.map((item) => (
<Selection
key={item.id}
id={item.id}
label={item.label}
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
showInfoIcon={false}
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
/>
))}
{addTile ? (
<div className="flex w-full min-w-0 shrink-0 justify-center md:flex-[1_1_100%]">
{addTile}
</div>
) : null}
</div>
</>
) : compactDesktopLayout === "pyramidFive" ? (
<>
<div className="flex w-full flex-col gap-2 md:hidden">
@@ -230,7 +256,7 @@ export function CardStackView({
selected={isSelected(item.id)}
orientation="horizontal"
showInfoIcon={false}
className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
/>
))}
@@ -249,7 +275,7 @@ export function CardStackView({
selected={isSelected(item.id)}
orientation="horizontal"
showInfoIcon={false}
className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
/>
))}
@@ -268,7 +294,7 @@ export function CardStackView({
selected={isSelected(item.id)}
orientation="horizontal"
showInfoIcon={false}
className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
/>
))}
@@ -284,7 +310,7 @@ export function CardStackView({
selected={isSelected(item.id)}
orientation="horizontal"
showInfoIcon={false}
className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
/>
))}
@@ -299,7 +325,7 @@ export function CardStackView({
selected={isSelected(compactCards[4].id)}
orientation="horizontal"
showInfoIcon={false}
className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(compactCards[4].id)}
/>
</div>
@@ -346,7 +372,7 @@ export function CardStackView({
selected={isSelected(item.id)}
orientation="horizontal"
showInfoIcon={false}
className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
/>
))}
@@ -360,7 +386,7 @@ export function CardStackView({
selected={isSelected(compactCards[2].id)}
orientation="horizontal"
showInfoIcon={false}
className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(compactCards[2].id)}
/>
</div>
@@ -379,7 +405,7 @@ export function CardStackView({
selected={isSelected(item.id)}
orientation="horizontal"
showInfoIcon={false}
className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
/>
))}
app/components/cards/Selection/Selection.container.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import type { SelectionProps } from "./Selection.types";
/**
* Figma: "Card / CardSelection" — stacked tile e.g. `16775:28762` (recommended + label + supportText).
* `orientation="horizontal"` selects that vertical stack; `"vertical"` is label + optional info icon with tag on the right (CardStack expanded / single-column).
* `orientation="horizontal"` selects that vertical stack; `"vertical"` is label + optional info icon with tag on the right (CardStack `singleStack` / right-rail).
*/
const SelectionContainer = memo<SelectionProps>(
({