elastic / elastic/eui

[EuiDescriptionList] Add native support for row dividers, vertical title alignment, and gap control

Open
#9,633 1 comment 0 reactions 0 assignees View on GitHub
request
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.