[EuiDescriptionList] Add option to `type` prop to support horizontal layouts

[hbharding]

In Observability and other places throughout Kibana, we often use multiple EuiDescriptionLists in the page header to achieve a horizontal layout of key/value pairs, like so (top right of screenshot):

To do so, we use multiple EuiDescriptionList inside an EuiFlexGroup / EuiFlexItem:

- EuiFlexGroup
  - EuiFlexItem
    - EuiDescriptionList
      - EuiDescriptionListTitle
      - EuiDescriptionListDescription
  - EuiFlexItem
      - EuiDescriptionList
        - EuiDescriptionListTitle
        - EuiDescriptionListDescription
  - EuiFlexItem
      - EuiDescriptionList
        - EuiDescriptionListTitle
        - EuiDescriptionListDescription

It feels strange / unsemantic to have to use multiple <dl> tags. Ideally, we could just do something like this:

- EuiDescriptionList type="grid" columns={3} listItems={listItems}

It might be useful to introduce a new option to EuiDescriptionList's type prop that would allow horizontal layouts like the screenshot above. Perhaps there could be a grid option that allows users to specify how many columns to use. If there are more items than columns, the items could wrap onto a new row. Here's a mini-spec visual of how this could work:

Let me know if this is something you'd be in favor of adding to the library and I'd be happy to help out / provide more details.

[miukimiu]

Hi @hbharding,

This layout makes total sense. I'm just not sure about the type="grid". We already have so many types "row", "inline", "column", "responsiveColumn".

Solution 1

We could only add the columns prop because this layout is very similar to type="row".

By default, the columns prop would be set to columns={1}. Consumers then could control the responsiveness with:

 const isMobile = useIsWithinBreakpoints(['xs', 's']);

<EuiDescriptionList listItems={favoriteVideoGames} type="row" columns={isMobile ? 1 : 3} />

Also, the columns prop would only work for types row and column. Also, we would need to think about how would the gutterSize prop affects the vertical and horizontal gutter spaces.

Solution 2

We just add the type="grid" as you suggested and the columns prop. Also, we would need to think about how would the gutterSize prop affects the vertical and horizontal gutter spaces.

Any thoughts on this @constancecchen @chandlerprall?

[cee-chen]

I like the Solution 1 approach (setting the # of columns) that Elizabet outlined and I think I would slightly prefer that over the type="grid" approach - in particular I think that it allows for more user flexibility in regards to mobile responsiveness. I think we should cap it to 4 columns max however (similar to how EuiFlexGrid caps at 4 columns).

Also, we would need to think about how would the gutterSize prop affects the vertical and horizontal gutter spaces.

My preference has always been to have gutterSize affect both vertical and horizontal sizing! :)

[github-actions[bot]]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[github-actions[bot]]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.