Skip to content

Commit b9c8308

Browse files
committed
feat(cards): explain gallery and collection variants
1 parent 38467a4 commit b9c8308

1 file changed

Lines changed: 5 additions & 2 deletions

File tree

CONTRIBUTOR-DOCS/03_project-planning/03_components/card/migration-plan.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,10 @@ React's card implementation is simplified to four patterns, mixed with consumer-
9999

100100
Three concrete SWC components, all extending the already-built `CardBase`:
101101

102-
- **`swc-card`** — regular, collection, and gallery layouts, all driven by slot presence (no explicit layout attribute). Phase 1 handles basic `<img>` content and "cover" fit behavior directly. Once the 2nd-gen `Asset` component ships, documentation updates to recommend it in place of plain `<img>`; no dedicated `swc-asset-card` is planned.
102+
- **`swc-card`** — regular, collection, and gallery layouts, all driven purely by slot presence, with no explicit layout attribute:
103+
- **Collection** — populating the `collection` slot displays it; leaving it empty hides it, the same simple presence rule as any other optional slot.
104+
- **Gallery** — triggered by a populated `preview` slot *and* the absence of **all** of `title`, `description`, `actions`, the default slot, and `footer`. That combination signals the image/asset is the card's only content, so it fills the available space. Any other combination renders the regular layout.
105+
Phase 1 handles basic `<img>` content and "cover" fit behavior directly. Once the 2nd-gen `Asset` component ships, documentation updates to recommend it in place of plain `<img>`; no dedicated `swc-asset-card` is planned.
103106
- **`swc-user-card`** — adds an `avatar` glyph slot; optional preview image, aspect ratio `3/1`.
104107
- **`swc-product-card`** — adds a `thumbnail` glyph slot (expects a logo); optional preview image, aspect ratio `5/1`; footer content alignment forced to `end`.
105108

@@ -146,7 +149,7 @@ Shared slots from `renderCardTemplate()`: `preview`, `title`, `actions`, `descri
146149

147150
| Component | Glyph slot | Preview aspect ratio | Notes |
148151
|---|---|---|---|
149-
| `swc-card` | none | `3/2` default, `1:1` gallery | Enables the `collection` slot: 1–3 images, square aspect ratio. Gallery layout: content area omitted, image fills the available space. `preview` and `collection` are independently optional — a card can render `collection` alone with no larger `preview` image. Current `renderCardTemplate()` already tolerates this (an empty `<slot name="preview">` simply renders nothing); the swc-card styling phase needs to verify the media wrapper's sizing/aspect-ratio rules degrade correctly when only one of the two is populated, rather than assuming both. |
152+
| `swc-card` | none | `3/2` default, `1:1` gallery | Enables the `collection` slot: 1–3 images, square aspect ratio, shown when populated and hidden otherwise. Gallery is triggered by a populated `preview` slot plus the absence of **all** of `title`/`description`/`actions`/default/`footer` — the image becomes the only content and fills the available space. `preview` and `collection` are independently optional — a card can render `collection` alone with no larger `preview` image. Current `renderCardTemplate()` already tolerates this (an empty `<slot name="preview">` simply renders nothing); the swc-card styling phase needs to verify the media wrapper's sizing/aspect-ratio rules degrade correctly when only one of the two is populated, rather than assuming both. |
150153
| `swc-user-card` | `avatar` | `3/1` (optional) | |
151154
| `swc-product-card` | `thumbnail` | `5/1` (optional) | Footer content forced to `end` alignment. |
152155

0 commit comments

Comments
 (0)