From 588257611d550e5a9116ce58647f3922bc4df006 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Fri, 12 Jun 2026 08:52:58 +1000 Subject: [PATCH] feat: horizontal card styling follow up (#10181) * feat: horizontal card styling follow up * fix lint --- .../ai/exports/HorizontalCard.ts | 1 + .../@react-spectrum/ai/src/HorizontalCard.tsx | 79 +++++++++++-------- .../ai/stories/HorizontalCard.stories.tsx | 40 +++++++++- yarn.lock | 22 +----- 4 files changed, 82 insertions(+), 60 deletions(-) diff --git a/packages/@react-spectrum/ai/exports/HorizontalCard.ts b/packages/@react-spectrum/ai/exports/HorizontalCard.ts index f67371b1f56..07442cb6638 100644 --- a/packages/@react-spectrum/ai/exports/HorizontalCard.ts +++ b/packages/@react-spectrum/ai/exports/HorizontalCard.ts @@ -1 +1,2 @@ export {BasicHorizontalCard, HorizontalCard, CardPreview} from '../src/HorizontalCard'; +export type {CardProps, BasicCardProps} from '../src/HorizontalCard'; diff --git a/packages/@react-spectrum/ai/src/HorizontalCard.tsx b/packages/@react-spectrum/ai/src/HorizontalCard.tsx index 34c9607792c..b56af6bcc1f 100644 --- a/packages/@react-spectrum/ai/src/HorizontalCard.tsx +++ b/packages/@react-spectrum/ai/src/HorizontalCard.tsx @@ -75,13 +75,22 @@ export interface CardProps extends Omit< * * @default 'primary' */ - variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet'; + variant?: 'primary' | 'secondary' | 'tertiary'; /** * Spectrum-defined styles, returned by the `style()` macro. */ styles?: StyleString; } +export interface BasicCardProps extends Omit { + /** + * The visual style of the Card. + * + * @default 'primary' + */ + variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet'; +} + const borderRadius = { default: 'lg', size: { @@ -93,7 +102,7 @@ const borderRadius = { // Figma missing a lot of combinations of variant, tshirt, density // Quiet Basic cards? -// Does Basic not participate in selection? +// Does Basic not participate in selection? (It does, but it's denoted by the border...) // Why is there a flipped horizontal card? // Max width on contents for horizontal cards? Doesn't appear to be one that includes the preview because the preview can have any ratio and that // causes the width grow. @@ -112,18 +121,20 @@ let card = style({ variant: { primary: 'elevated', secondary: 'layer-1', - basic: 'layer-2' + tertiary: 'layer-2' + }, + isBasic: { + variant: { + primary: 'layer-2', + secondary: 'layer-1', + tertiary: 'layer-2', + quiet: 'layer-2' + } }, forcedColors: 'ButtonFace' } }, - backgroundColor: { - default: '--s2-container-bg', - variant: { - tertiary: 'transparent', - quiet: 'transparent' - } - }, + backgroundColor: '--s2-container-bg', // TODO: No box shadow for basic, secondary, dark // also none for basic tertiary boxShadow: { @@ -172,7 +183,16 @@ let card = style({ XL: 240 } }, - isBasic: 68, + isBasic: { + default: 68, + size: { + XS: 52, + S: 60, + M: 68, + L: 76, + XL: 80 + } + }, isCardView: 'full', [onlyPreview]: 68 }, @@ -218,22 +238,19 @@ let card = style({ [onlyPreview]: 0 } }, + alignItems: { + isBasic: 'center' + }, '--card-padding-y': { type: 'paddingTop', value: { - default: '--card-spacing', - variant: { - quiet: 0 - } + default: '--card-spacing' } }, '--card-padding-x': { type: 'paddingStart', value: { - default: '--card-spacing', - variant: { - quiet: 0 - } + default: '--card-spacing' } }, paddingY: '--card-padding-y', @@ -439,7 +456,10 @@ const actionButtonSize = { } as const; const Card = forwardRef(function Card( - props: CardProps & {isBasic?: boolean}, + props: Omit & { + isBasic?: boolean; + variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet'; + }, ref: DOMRef ) { let {ElementType} = useContext(InternalCardViewContext); @@ -689,10 +709,6 @@ const collection = style({ const collectionImage = style({ width: 'full', - aspectRatio: { - default: 'square', - ':nth-last-child(4):first-child': '3/2' - }, gridColumnEnd: { ':nth-last-child(4):first-child': 'span 3' }, @@ -731,7 +747,7 @@ export const HorizontalCard = forwardRef(function HorizontalCard( ) { let {size = 'M'} = props; return ( - + {composeRenderProps(props.children, children => ( ) { let {size = 'M'} = props; return ( - + {composeRenderProps(props.children, children => ( = { export default meta; -type Story = StoryObj; +type Story = StoryObj; +type BasicStory = StoryObj; export const Horizontal: Story = { render: args => ( @@ -109,6 +114,27 @@ export const Horizontal: Story = { + + ) +}; + +export const Basic: BasicStory = { + render: args => ( +
- ) + ), + argTypes: { + variant: { + control: 'radio', + options: ['primary', 'secondary', 'tertiary', 'quiet'] + } + } }; export const AIAttachmentList: Story = { diff --git a/yarn.lock b/yarn.lock index e460585af96..56aa899f231 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10672,27 +10672,7 @@ __metadata: languageName: node linkType: hard -"@testing-library/react@npm:^16.0.0": - version: 16.2.0 - resolution: "@testing-library/react@npm:16.2.0" - dependencies: - "@babel/runtime": "npm:^7.12.5" - peerDependencies: - "@testing-library/dom": ^10.0.0 - "@types/react": ^18.0.0 || ^19.0.0 - "@types/react-dom": ^18.0.0 || ^19.0.0 - react: ^18.0.0 || ^19.0.0 - react-dom: ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - "@types/react-dom": - optional: true - checksum: 10c0/7adaedaf237002b42e04a6261d2756074a19cbca0f0c79ba375660f618e123c0ee56256ced00aeb0bb7225ba1a8a81b92b692cca053521a21bb92a8cace1e4c6 - languageName: node - linkType: hard - -"@testing-library/react@npm:^16.3.0": +"@testing-library/react@npm:^16.0.0, @testing-library/react@npm:^16.3.0": version: 16.3.2 resolution: "@testing-library/react@npm:16.3.2" dependencies: