You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Use `List` as the root container, with `ListRow` and `ListCol` defining each row and column. For table layouts (`as="table"`), add `TableHeader` for a header row. Context from `ListProvider` (provided by `List`) drives spacing, variant, and responsive behavior—see `ListProvider` for hooks and advanced usage.
25
+
Use `List` as the root container, with `ListRow` and `ListCol` defining each row and column. For table layouts (`as="table"`), add `TableHeader` for a header row. `List` wraps its subtree in `ListProvider` so rows, columns, and the header share spacing, variant, and responsive layout context.
Copy file name to clipboardExpand all lines: packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx
+1-2Lines changed: 1 addition & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,8 +32,7 @@ export const parameters = {
32
32
33
33
### Components
34
34
35
-
-`List`: Root list or table wrapper; sets spacing, variant, `as` (`ul` | `ol` | `table`), scrollable layout, and container-query behavior.
36
-
-`ListProvider`: Supplied by `List`; use <LinkToid="Organisms/Lists & Tables/List/ListProvider">ListProvider</LinkTo> for `useListContext` / `useList` when building custom list internals.
35
+
-`List`: Root list or table wrapper; sets spacing, variant, `as` (`ul` | `ol` | `table`), scrollable layout, and container-query behavior. It wraps children in `ListProvider` so `ListRow`, `ListCol`, and `TableHeader` share layout context (`useListContext` for advanced list internals; prefer `List` props over the internal `useList` hook).
37
36
-`ListRow`: One logical row; supports expandable content. See <LinkToid="Organisms/Lists & Tables/List/ListRow">ListRow</LinkTo>.
38
37
-`ListCol`: Column cell with sizing, `type`, and justification. See <LinkToid="Organisms/Lists & Tables/List/ListCol">ListCol</LinkTo>.
39
38
-`TableHeader`: Sticky header row for `as="table"`. See <LinkToid="Organisms/Lists & Tables/List/TableHeader">TableHeader</LinkTo>.
Copy file name to clipboardExpand all lines: packages/styleguide/src/lib/Organisms/Lists & Tables/List/ListRow/ListRow.mdx
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,35 +22,35 @@ export const parameters = {
22
22
23
23
## Usage
24
24
25
-
`ListRow` renders one logical row. It reads spacing, variant, and layout from `List` via `ListProvider`. Compose rows with <LinkToid="Organisms/Lists & Tables/List/ListCol">ListCol</LinkTo> children.
25
+
`ListRow` renders a single row. It receives spacing, variant, and layout from `List`. Compose each row with <LinkToid="Organisms/Lists & Tables/List/ListCol">ListCol</LinkTo> children.
26
26
27
-
For table layouts (`List` with `as="table"`), body rows still use `ListRow`. Header labels belong in <LinkToid="Organisms/Lists & Tables/List/TableHeader">TableHeader</LinkTo> with `ListCol` cells—see <LinkToid="Organisms/Lists & Tables/List/ListCol">ListCol</LinkTo> (Header columns).
27
+
For table layouts (`List` with `as="table"`), the rows still use `ListRow`. However, the header row should use <LinkToid="Organisms/Lists & Tables/List/TableHeader">TableHeader</LinkTo>.
28
28
29
29
### Plain variant styling
30
30
31
-
When the parent `List` uses `variant="plain"`, you can still style individual rows (for example with Emotion `styled`) to emphasize or group items.
31
+
As noted in <LinkToid="Organisms/Lists & Tables/List/List">List</LinkTo>, when the parent `List` uses `variant="plain"`, style individual `ListRow` components using Emotion's`styled` function to emphasize or group items.
32
32
33
33
<Canvasof={ListRowStories.PlainStyled} />
34
34
35
35
## Expandable rows
36
36
37
-
You can define collapsible content by passing an `expanded` prop and a `renderExpanded` callback that returns the expanded region.
37
+
Define collapsible content with an `expanded` prop and a `renderExpanded` callback that returns the expanded region.
38
38
39
39
### Expand on button click
40
40
41
-
The `ListRow` can include`ExpandControl` in a `ListCol` with `type="control"` to toggle expansion. `ExpandControl` rotates its icon based on `expanded`.
41
+
Include`ExpandControl` in a `ListCol` with `type="control"` to toggle expansion. `ExpandControl` rotates its icon based on `expanded`.
0 commit comments