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

Standardize create-flow option steps on one question-and-options layout and Selection sizes.

Browse Source 
Method cards, chips, and the right rail now share the two-column shell; last options clear the footer fade, See all stays under the stack, and the left heading no longer jumps when the list expands.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilalloandCursor committed 2026-10-01 17:18:04 -06:00
1 parent 2fc7fbf818
commit 24a9615c0c
26 files changed
+354 -245
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/cards/CardStack/CardStack.container.tsx
+4 -3
View File
@@ -9,10 +9,11 @@ const DEFAULT_TOGGLE_LABEL = "See all communication approaches";
/**
* Figma: "Utility / CardStack"; canonical code under `cards/`.
* Selectable stack of cards with
* Selectable stack of {@link Selection} options (`size` `m` tiles or `l` rows) 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.
* Create-flow method steps use `layout="singleStack"` (size `l`) in the shared
* question-and-options shell. Expanded default layout still matches Flow —
* Expanded Card Stack (`20768:14820`): 281×142 size-`m` tiles in two columns.
*/
const CardStackContainer = memo<CardStackProps>(
({
app/components/cards/CardStack/CardStack.types.ts
+4 -1
View File
@@ -43,7 +43,10 @@ export interface CardStackProps {
compactDesktopLayout?: "grid" | "flexWrap" | "pyramidFive";
/** Optional title/description lockup size (create-flow passes `md`-matched `L`/`M`). Defaults to `L`. */
headerLockupSize?: HeaderLockupSizeValue;
/** Alignment of the expand/collapse control in `singleStack` layout (Figma right-rail: end). */
/**
* Alignment of the expand/collapse control in `singleStack` layout.
* Figma Flow — Compact Card Stack, Expanded Card Stack, and Right Rail center the control.
*/
toggleAlignment?: "center" | "end";
className?: string;
/** Optional “Add” entry (e.g. custom method card wizard). */
app/components/cards/CardStack/CardStack.view.tsx
+24 -20
View File
@@ -126,11 +126,15 @@ export function CardStackView({
.slice(0, compactRecommendedLimit);
})();
// Single stack: always one column; expand reveals more in same stack (scrollable)
// Single stack: always one column; expand reveals more in the same stack.
// At lg+ the cards scroll inside this column and the See all / Show less
// control stays pinned below (Figma Flow — Right Rail).
if (layout === "singleStack") {
const displayedCards = expanded ? cards : compactCards;
return (
<div className={`flex w-full flex-col gap-6 min-w-0 ${className}`}>
<div
className={`flex w-full min-w-0 flex-col gap-6 lg:h-full lg:max-h-full lg:min-h-0 lg:flex-1 lg:overflow-hidden ${className}`}
>
<CardStackHeaderLockup
title={title}
description={description}
@@ -138,7 +142,7 @@ export function CardStackView({
size={lockupSize}
wrapperClassName="min-w-0 shrink-0"
/>
<div className="flex w-full min-w-0 flex-col gap-2">
<div className="flex w-full min-w-0 flex-col gap-2 lg:min-h-0 lg:flex-1 lg:overflow-y-auto scrollbar-design">
{displayedCards.map((item) => (
<Selection
key={item.id}
@@ -147,7 +151,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="vertical"
size="l"
showInfoIcon={false}
onClick={() => onCardSelect(item.id)}
/>
@@ -158,7 +162,7 @@ export function CardStackView({
<button
type="button"
onClick={onToggleExpand}
className={`text-medium-paragraph text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none cursor-pointer ${
className={`shrink-0 text-medium-paragraph text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none cursor-pointer ${
toggleAlignment === "end" ? "self-end" : "self-center"
}`}
>
@@ -189,7 +193,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
className="min-h-[142px]"
onClick={() => onCardSelect(item.id)}
@@ -206,7 +210,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
@@ -230,7 +234,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
className="min-h-[142px]"
onClick={() => onCardSelect(item.id)}
@@ -254,7 +258,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
@@ -273,7 +277,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
@@ -292,7 +296,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
@@ -308,7 +312,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
@@ -323,7 +327,7 @@ export function CardStackView({
supportText={compactCards[4].supportText}
recommended={compactCards[4].recommended ?? false}
selected={isSelected(compactCards[4].id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(compactCards[4].id)}
@@ -349,7 +353,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
className="min-h-[142px]"
onClick={() => onCardSelect(item.id)}
@@ -370,7 +374,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
@@ -384,7 +388,7 @@ export function CardStackView({
supportText={compactCards[2].supportText}
recommended={compactCards[2].recommended ?? false}
selected={isSelected(compactCards[2].id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(compactCards[2].id)}
@@ -403,7 +407,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
className={FIGMA_CARD_SELECTION_TILE_CLASS}
onClick={() => onCardSelect(item.id)}
@@ -429,7 +433,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
className="h-[142px] min-h-[142px] max-h-[142px] w-full max-w-[281px]"
onClick={() => onCardSelect(item.id)}
@@ -456,7 +460,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="vertical"
size="l"
showInfoIcon={false}
onClick={() => onCardSelect(item.id)}
/>
@@ -482,7 +486,7 @@ export function CardStackView({
supportText={item.supportText}
recommended={item.recommended ?? false}
selected={isSelected(item.id)}
orientation="horizontal"
size="m"
showInfoIcon={false}
onClick={() => onCardSelect(item.id)}
/>