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 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.
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.
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 at default density. The "Categories" row above it is an untouched single-line field, where label and value agree:
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.
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 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.
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)withdisplay: flex; align-items: center, so a single ~20px line picks up ~6px of top offset. A stacked cell overflows that minimum,align-items: centerstops 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.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 at default density. The "Categories" row above it is an untouched single-line field, where label and value agree: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:
densitysetting, which already varies both media size and gaps.