DataViews: support fields whose value occupies two short lines
[Type] Enhancement[Package] DataViews
## What problem does this address?
DataViews lays out a row on the assumption that a field holds a single line of text. Consumers regularly want two short lines instead — a value with a secondary value under it, to raise information density without widening the table. There is currently no supported way to express that, and every approximation of it misaligns against the rest of the row, in three related places.
**1. Primary column: title + a short second line, next to the media thumbnail.**
The primary column stacks the title and the description beside the media. That stack is designed for a title plus an arbitrary amount of description text, and it looks right that way. But the second line is often not a description — it is one more short single-line field (a site URL, an email, a product name, a renewal date). Then the pair reads as misaligned against the thumbnail. Measured on the "Io" row of the [table layout story](https://wordpress.github.io/gutenberg/?path=/story/dataviews-dataviews--layout-table) at default density: the media box is 32px tall and top-aligned with the text stack, while the title + second line pair spans 52px — so the thumbnail's centre sits 10px above the centre of the text it labels. It gets worse the smaller the media is.
<img width="1240" height="250" alt="Image" src="https://github.com/user-attachments/assets/3084e268-d21a-4012-8f07-1abfd40c046c" />
The "Moon" row in the same story is the multi-line case the layout was designed for, and it looks correct. The same shape appears in the [list layout story](https://wordpress.github.io/gutenberg/?path=/story/dataviews-dataviews--layout-list), where the 48px thumbnail is centred against a title line that starts flush at its top.
**2. Non-primary columns with a stacked value.**
The same shape in an ordinary column drifts against the single-line cells beside it. Every table cell wrapper gets `min-height: calc(base * 8)` with `display: flex; align-items: center`, so a single ~20px line picks up ~6px of top offset. A stacked cell overflows that minimum, `align-items: center` stops having any effect, and its first line sits flush at the top of the cell — 6px above every single-line cell in the same row.
<img width="1936" height="396" alt="Image" src="https://github.com/user-attachments/assets/c4d75d1b-23be-4990-8020-466dab6968a8" />
The Storybook fixtures have no field whose value is two short lines, so the "Status" column above was added the way a consumer would: a custom `render` returning a two-line `VStack`, dropped into DataViews' own cell wrapper. Everything else, the 6px included, is DataViews' own CSS — and the linked Calypso PR below measures the same 6px independently, in a real view.
**3. Grid layout: the field label.**
A grid field row is `display: flex; align-items: center`, so it centres its label against the whole value. A two-line value leaves the label floating between the lines instead of aligned to the first — 11px lower, in the [grid layout story](https://wordpress.github.io/gutenberg/?path=/story/dataviews-dataviews--layout-grid) at default density. The "Categories" row above it is an untouched single-line field, where label and value agree:
<img width="588" height="316" alt="Image" src="https://github.com/user-attachments/assets/44cfab4c-5969-4b33-a545-a04908c0a0b4" />
This is not one view's problem. Symptoms 2 and 3 are reproducible in any view that stacks two lines in a field; symptom 1 reproduces in Storybook with the default fixtures. On WordPress.com, symptom 1 affects the sites dashboard and `/me/billing/purchases` (smaller thumbnail, more visible), and symptom 2 affects the **App** column in the billing history table, **Paid until** in the domains table, and **Visibility** / **Plan** in the sites dashboard.
The workarounds available today are all unsatisfying. [Automattic/wp-calypso#113421](https://github.com/Automattic/wp-calypso/pull/113421) addresses symptoms 2 and 3 downstream for one consumer, by giving each stacked value line DataViews' own `dataviews-view-table__cell-content-wrapper` class, dropping the stack's inter-line gap to match the primary column's rhythm, and adding a local `.dataviews-view-grid__field:has(.components-v-stack)` override for the label. It works and row height is unchanged, but it is a consumer re-deriving DataViews' internal row rhythm from the outside: it will silently regress on a package bump, and it has to be repeated in every view that stacks two lines. Symptom 1 has no good downstream answer at all — the options are per-view CSS, or collapsing icon + title + URL into a single custom-rendered field, which takes rendering responsibility back from DataViews and runs against the declarative direction it is heading in.
## What is your proposed solution?
Rather than propose a specific API, this is what we would expect a supported two-line field value to do — the approach is better decided by the DataViews and design folks.
A field whose value occupies two short lines should align with its neighbours the way a single-line one does:
- its first line on the same baseline as the single-line cells beside it;
- in the primary column, the title and second line balanced against the media thumbnail rather than top-aligned to it;
- in the grid layout, the field label aligned to the first line of the value;
- and all of the above holding at every `density` setting, which already varies both media size and gaps.
0 条评论