Design systemCascader Item
A row in a cascading picker, where choosing a table opens its columns.
import { CascaderItem } from "@/ui";Cascader Item matches the Figma Cascader Component. It is one row of a picker that goes from a source's tables to their columns, like choosing the columns a definition or analysis should use. Stack rows in a list; each row draws its own line underneath.
Tables and columns
Click a table to open its columns. The open table is selected: Primary 50 fill, a 3px blue bar on the left and a medium label. Tick columns from anywhere on the row. The count on each table is how many of its columns are ticked.
{tables.map((t) => (
<CascaderItem
key={t.id}
label={t.label}
logo={t.logo}
count={picked[t.id]?.length || undefined}
selected={t.id === open}
onClick={() => setOpen(t.id)}
/>
))}
{table.columns.map((c) => (
<CascaderItem
key={c.id}
type="column"
label={c.label}
tag={c.id}
info={c.info}
checked={picked.includes(c.id)}
onCheckedChange={(on) => toggle(c.id, on)}
/>
))}History
type="history" shows a clock icon and a time on the right, for recently used tables and columns. Long labels are cut off with an ellipsis.
<CascaderItem type="history" label="Accounts" time="2:01 PM" selected />
<CascaderItem type="history" label="Account ID" tag="AccountId" time="1:47 PM" count={2} />Variants
| Figma property | Prop |
|---|---|
| Type: Table | type="table" (default), ends in a caret |
| Type: Column | type="column", ends in an info icon when info is set |
| Type: History / History (Tag) | type="history" with time, plus tag for the tag version |
| Icon: Source | logo (a 16px image) |
| Icon: Check Box | checked and onCheckedChange |
| Icon: History | Added for type="history" |
| Icon: None | Leave out logo and checked |
| Indicator: Enabled | count |
| State: Rest (Selected) | selected |
Hover looks the same with or without selected, as in Figma.
Anatomy
| Part | Size | Style |
|---|---|---|
| Row | 46px tall, 12px × 16px padding (history 12px) | White, 1px Grey 100 line below |
| Hover | Primary 50 fill | |
| Selected | Primary 50 fill, 3px Primary 500 bar on the left drawn inside the row | |
| Label | 14px / 22px | --color-text-primary; medium when a table or history row is selected |
| Leading icon | 16px, 8px gap | Logo, checkbox or Grey 900 clock |
| Tag | Small Tag in the Column colour | The column's API name |
| Count | 16px tall, 6px sides, 6px radius | Primary 500 with white 12px text |
| Caret / info | 16px, 12px after the count | Grey 300, Grey 600 when selected |
| Time | 12px / 19px | --color-text-secondary |
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
type | "table" | "column" | "history" | "table" | |
label | string | ||
tag | string | Column API name. | |
logo | string | Image URL for the source logo. | |
checked | boolean | Setting it shows a checkbox. | |
onCheckedChange | (checked) => void | ||
count | number | string | ||
info | string | Column description for the info icon. | |
time | string | History rows. | |
selected | boolean | false | The row whose next level is showing. |
onClick | (e) => void | ||
className | string | Other props are passed to the root too. |
Differences from Figma
- Tag and count text is 12px, not 10px.
- The info icon shows the column description as a browser tooltip. Figma doesn't show what it opens.
- Figma's checkbox rows are never ticked. Ticked rows use the Checkbox checked style.
Accessibility
- Rows without a checkbox are buttons. The selected one has
aria-current="true". - In checkbox rows the checkbox is the control: it is named by the label and described by
info. Clicking anywhere else on the row toggles it too. - The info text is also in the page for screen readers, linked with
aria-describedby.
Do and don't
- Do show the source logo on table rows when the picker mixes sources.
- Do use
countto show how many columns are picked in each table, so people can see their picks without opening every table. - Don't use it for a short menu of actions. Use Dropdown Panel.