[EuiDescriptionList] Add native support for row dividers, vertical title alignment, and gap control
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
**Requestor**
@elastic/obs-exploration-team. Filed per the EUI team's commitment in https://github.com/elastic/kibana/pull/259428#discussion_r3014525913.
**Problem Statement**
To get the desired visual for `EuiDescriptionList` (`type="column"`, `compressed`) in Kibana's metrics flyout, the consumer applies Emotion `css` overrides to the list root, `titleProps`, and `descriptionProps`. The pattern relies on `:nth-last-child(-n + 2)` and duplicates `columnWidths` with a manual `min-width`, both of which are fragile against internal DOM changes.
**Proposed Solution**
Add first-class support for:
1. Row dividers in `type="column"` lists with the last row auto-un-divided.
2. Vertical alignment of title cells.
3. Padding and gap variants for `compressed` column lists, or documented tokens to use.
4. `columnWidths` behavior strong enough that consumers no longer need a duplicate `min-width` or `align-items: stretch`.
**Use Case**
In Discover, metric flyout overview tab: `src/platform/packages/shared/kbn-unified-chart-section-viewer/src/components/flyout/tabs/overview_tab_metadata.tsx`.
**Value / Impact**
Lets Kibana drop a brittle `css` workaround in favor of supported props. Improves visual consistency across consumers and reduces the risk that a future EUI internal change breaks them silently.
**Urgency**
Not urgent. Kibana issue #260002 was tagged "backlog or maintenance, not blocker for GA". The reason to file now is so #260002 has an upstream link to track against.
**Do alternatives or workarounds exist?**
Yes: the current Emotion `css` overrides produce the correct visual today. They work but rely on internal DOM structure.
**Related code or customizations**
- Consumer: https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-unified-chart-section-viewer/src/components/flyout/tabs/overview_tab_metadata.tsx
- Kibana tracking issue: https://github.com/elastic/kibana/issues/260002
- Originating review thread: https://github.com/elastic/kibana/pull/259428#discussion_r3014525913
**Additional context (Optional)**
The choice of `EuiDescriptionList` over `EuiFlexGroup` was settled on a11y grounds in the PR #259428 thread; this request is purely to add props so consumers can stop overriding.
**Designs or Specs (Optional)**
None. The "after" state matches the current visual exactly; only the implementation moves from consumer `css` to EUI props. Reference screenshots: parent issue #255097.
Contributor guide
Assessment
This issue has not been assessed yet.