[EuiDescriptionList] Update display to grid for vertical column option with new props #7062

kyrspl · 2023-08-09T17:41:29Z

Summary

This PR fixes issue #7011 and #6856. In addition, the following design decisions are included:

We add a columnGutterSize prop that controls vertical spacing between the 2 columns.
We rename gutterSize to rowGutterSize
We update the title's colors in dark mode for inline lists.
The display is changed to grid for vertical lists. This allows us to easily control both the vertical spacing between columns but also between rows

To do

Update display to grid for vertical lists
Add columnGutterSize prop
Control row-gap using rowGutterSize
Go through checklist below

Design

The idea here is to change the display to grid in order to have more flexible control over the columns and individual cells.
We introduce the columnGap prop to control vertical spacing between the columns.

Furthermore, it would be nice to control row spacing as well. We currently use gutterSize as a prop as well use the boolean compressed. Happy to discuss how we can add some logic around these two.

~~Finally, we're limiting the title's max-width to 380px (note: tbc) for optimal reading/scanning.~~ Removed from PR

General checklist

Checked in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
Props have proper autodocs (using @default if default values are missing) and playground toggles
Added documentation
~~- [ ] Checked Code Sandbox works for any docs examples~~
Added or updated jest and cypress tests
Checked for breaking changes and labeled appropriately
~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
Updated the Figma library counterpart
A changelog entry exists and is marked appropriately

cla-checker-service · 2023-08-09T17:41:34Z

💚 CLA has been signed

kibanamachine · 2023-08-09T18:08:02Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062_buildkite/

kibanamachine · 2023-08-09T18:51:56Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062_buildkite/

kibanamachine · 2023-08-10T14:17:34Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062_buildkite/

kibanamachine · 2023-08-10T14:49:31Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062_buildkite/

src/components/description_list/description_list.styles.ts

src/components/description_list/description_list_types.ts

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

kibanamachine · 2023-08-11T09:26:59Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062_buildkite/

kibanamachine · 2023-08-11T14:40:55Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062_buildkite/

kibanamachine · 2023-08-11T16:00:27Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062_buildkite/

kibanamachine · 2023-08-11T16:36:41Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062_buildkite/

src/components/description_list/description_list_title.styles.ts

kibanamachine · 2023-08-24T08:31:11Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062/

kyrspl · 2023-08-24T08:49:06Z

@cee-chen / @ryankeairns - Issue #7119 should take over the max-width topic.

cee-chen · 2023-08-24T15:36:27Z

Thanks @kyrspl! Can you ping me either on Slack or in this GitHub thread once the max-width CSS has been removed from this PR? I'll re-review at that point.

kibanamachine · 2023-08-24T16:42:15Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062/

upcoming_changelogs/7062.md

cee-chen

🎉 Everything looks great and the code feels super clean to me! Thanks for taking the extra time to have deeper discussions on this Kyriakos, and for tackling #6856 as well!

kibanamachine · 2023-08-25T03:57:42Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062/

kyrspl · 2023-08-25T08:00:16Z

Thanks for your help and guidance @cee-chen!

kibanamachine · 2023-08-25T08:28:15Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062/

kyrspl · 2023-08-25T08:59:31Z

@ryankeairns Up to you for the final review :)

kibanamachine · 2023-08-28T12:24:17Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062/

kibanamachine · 2023-08-28T16:59:56Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_7062/

elasticmachine · 2023-08-28T17:13:25Z

💚 Build Succeeded

Buildkite Build
Commit: a7a5f7c

History

💚 Build #462 succeeded a1ffc4b
💚 Build #449 succeeded 66354b7
💚 Build #448 succeeded 0f4bed3
💚 Build #446 succeeded 4808e81
💚 Build #444 succeeded 024eb73
💚 Build #441 succeeded eae95f4

## PR change summary `v87.2.0`⏩`v88.1.0` ⚠️ The biggest thing to QA in this PR is several **breaking changes** to `EuiDescriptionList`. ### Description list `columnWidths` prop This PR introduces a new `columnWidths` prop and removes several Kibana instances of custom CSS overrides to title/description column widths. The primary motivation behind this is not just to reduce custom CSS, but also because v88.0.0 introduced an underlying CSS change of `column` description lists to using [`display: grid` CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout). The new prop allows us to support existing description list custom widths while not requiring Kibana developers to understand or write grid CSS (except for 1 or two scenarios around `max-width`). ⚠️ **No user-facing UI around column widths should have regressed as a result of these changes. If they have, please let us know in this PR.** ### Description list gutter size changes The prop `gutterSize` has been renamed to `rowGutterSize` and the default size is now `s` instead of `m`. The change to `s` from `m` means there is an **expected** smaller gap between list items (see below screenshots): **Current `EuiDescriptionList` with default `rowGutterSize="s"`** <img width="753" alt="" src="https://github.com/elastic/kibana/assets/934879/c17aef28-ed3b-40c4-84c3-396e788b13bb"> **Prior `EuiDescriptionList` with default `gutterSize="m"`** <img width="721" alt="" src="https://github.com/elastic/kibana/assets/934879/84d5f5a2-8fa6-4f99-9dc0-73fd143aa1e1"> If Kibana teams prefer to keep the previous `m` gutter for their instances of `EuiDescriptionList`, you have a couple of options: 1. Let EUI team know in the PR and we can set usage back to what it was before 2. Set `rowGutterSize="m"` yourselves manually --- ## [`88.1.0`](https://github.com/elastic/eui/tree/v88.1.0) - Added `font.defaultUnits` theme token. EUI component font sizes default to `rem` units - this token allows consumers to configure this to `px` or `em` ([#7133](elastic/eui#7133)) - Updated `EuiDescriptionList` with new `columnWidths` prop ([#7146](elastic/eui#7146)) **Bug fixes** - Fixed `EuiDataGrid`'s keyboard shortcuts popover display ([#7146](elastic/eui#7146)) **CSS-in-JS conversions** - Renamed `useEuiFontSize()`'s `measurement` option to `unit` for clarity ([#7133](elastic/eui#7133)) ## [`88.0.0`](https://github.com/elastic/eui/tree/v88.0.0) - Updated `EuiDescriptionList` with a new `columnGutterSize` prop ([#7062](elastic/eui#7062)) **Deprecations** - Deprecated `EuiSuggest`. We recommend using `EuiSelectable` or `EuiComboBox` instead ([#7122](elastic/eui#7122)) - Deprecated `EuiControlBar`. We recommend using `EuiBottomBar` instead ([#7122](elastic/eui#7122)) - Deprecated `EuiColorStops`. We recommend copying the component to your application if necessary ([#7122](elastic/eui#7122)) - Deprecated `EuiNotificationEvent`. We recommend copying the component to your application if necessary ([#7122](elastic/eui#7122)) **Breaking changes** - Renamed `EuiDescriptionList`'s `gutterSize` prop to `rowGutterSize` ([#7062](elastic/eui#7062)) - `EuiDescriptionList`'s `rowGutterSize` prop now defaults to a size of `s` (was previously `m`) ([#7062](elastic/eui#7062)) **Accessibility** - Fixed the dark mode colors of inline `EuiDescriptionListTitle`s to meet WCAG color contrast requirements ([#7062](elastic/eui#7062)) **CSS-in-JS conversions** - Converted `EuiKeyPadMenuItem` to Emotion; Removed `$euiKeyPadMenuSize` and `$euiKeyPadMenuMarginSize` ([#7118](elastic/eui#7118)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Nikita Indik <nikita.indik@elastic.co>

## PR change summary `v87.2.0`⏩`v88.1.0` ⚠️ The biggest thing to QA in this PR is several **breaking changes** to `EuiDescriptionList`. ### Description list `columnWidths` prop This PR introduces a new `columnWidths` prop and removes several Kibana instances of custom CSS overrides to title/description column widths. The primary motivation behind this is not just to reduce custom CSS, but also because v88.0.0 introduced an underlying CSS change of `column` description lists to using [`display: grid` CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout). The new prop allows us to support existing description list custom widths while not requiring Kibana developers to understand or write grid CSS (except for 1 or two scenarios around `max-width`). ⚠️ **No user-facing UI around column widths should have regressed as a result of these changes. If they have, please let us know in this PR.** ### Description list gutter size changes The prop `gutterSize` has been renamed to `rowGutterSize` and the default size is now `s` instead of `m`. The change to `s` from `m` means there is an **expected** smaller gap between list items (see below screenshots): **Current `EuiDescriptionList` with default `rowGutterSize="s"`** <img width="753" alt="" src="https://github.com/elastic/kibana/assets/934879/c17aef28-ed3b-40c4-84c3-396e788b13bb"> **Prior `EuiDescriptionList` with default `gutterSize="m"`** <img width="721" alt="" src="https://github.com/elastic/kibana/assets/934879/84d5f5a2-8fa6-4f99-9dc0-73fd143aa1e1"> If Kibana teams prefer to keep the previous `m` gutter for their instances of `EuiDescriptionList`, you have a couple of options: 1. Let EUI team know in the PR and we can set usage back to what it was before 2. Set `rowGutterSize="m"` yourselves manually --- ## [`88.1.0`](https://github.com/elastic/eui/tree/v88.1.0) - Added `font.defaultUnits` theme token. EUI component font sizes default to `rem` units - this token allows consumers to configure this to `px` or `em` ([elastic#7133](elastic/eui#7133)) - Updated `EuiDescriptionList` with new `columnWidths` prop ([elastic#7146](elastic/eui#7146)) **Bug fixes** - Fixed `EuiDataGrid`'s keyboard shortcuts popover display ([elastic#7146](elastic/eui#7146)) **CSS-in-JS conversions** - Renamed `useEuiFontSize()`'s `measurement` option to `unit` for clarity ([elastic#7133](elastic/eui#7133)) ## [`88.0.0`](https://github.com/elastic/eui/tree/v88.0.0) - Updated `EuiDescriptionList` with a new `columnGutterSize` prop ([elastic#7062](elastic/eui#7062)) **Deprecations** - Deprecated `EuiSuggest`. We recommend using `EuiSelectable` or `EuiComboBox` instead ([elastic#7122](elastic/eui#7122)) - Deprecated `EuiControlBar`. We recommend using `EuiBottomBar` instead ([elastic#7122](elastic/eui#7122)) - Deprecated `EuiColorStops`. We recommend copying the component to your application if necessary ([elastic#7122](elastic/eui#7122)) - Deprecated `EuiNotificationEvent`. We recommend copying the component to your application if necessary ([elastic#7122](elastic/eui#7122)) **Breaking changes** - Renamed `EuiDescriptionList`'s `gutterSize` prop to `rowGutterSize` ([elastic#7062](elastic/eui#7062)) - `EuiDescriptionList`'s `rowGutterSize` prop now defaults to a size of `s` (was previously `m`) ([elastic#7062](elastic/eui#7062)) **Accessibility** - Fixed the dark mode colors of inline `EuiDescriptionListTitle`s to meet WCAG color contrast requirements ([elastic#7062](elastic/eui#7062)) **CSS-in-JS conversions** - Converted `EuiKeyPadMenuItem` to Emotion; Removed `$euiKeyPadMenuSize` and `$euiKeyPadMenuMarginSize` ([elastic#7118](elastic/eui#7118)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Nikita Indik <nikita.indik@elastic.co>

add display grid

58ab7cc

add eui variables for column gap

1fd6bbd

kyrspl marked this pull request as draft August 9, 2023 18:23

kyrspl changed the title ~~WIP [EuiDescriptionList] Update display to grid for vertical column option with new props~~ DRAFT [EuiDescriptionList] Update display to grid for vertical column option with new props Aug 9, 2023

Merge branch 'main' into descriptionList_update_vertical

040cf19

Merge branch 'main' into descriptionList_update_vertical

9d46054

add total max width

28ef754

cee-chen reviewed Aug 10, 2023

View reviewed changes

src/components/description_list/description_list.styles.ts Outdated Show resolved Hide resolved

cee-chen requested a review from ryankeairns August 10, 2023 16:25

cee-chen reviewed Aug 10, 2023

View reviewed changes

src/components/description_list/description_list.styles.ts Outdated Show resolved Hide resolved

cee-chen reviewed Aug 10, 2023

View reviewed changes

src/components/description_list/description_list_types.ts Outdated Show resolved Hide resolved

kyrspl and others added 2 commits August 11, 2023 10:59

Update src/components/description_list/description_list_types.ts

d64db92

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

Merge branch 'main' into descriptionList_update_vertical

c53c8a8

kyrspl added 2 commits August 11, 2023 15:58

update test for column_gap

9bd8385

add changelog

94c5f68

update documentation

672f564

kyrspl added 2 commits August 11, 2023 18:07

fix typo

0ee59c5

fix typo in test

b25bc8f

kyrspl marked this pull request as ready for review August 11, 2023 16:19

kyrspl changed the title ~~DRAFT [EuiDescriptionList] Update display to grid for vertical column option with new props~~ [EuiDescriptionList] Update display to grid for vertical column option with new props Aug 11, 2023

Merge branch 'main' into descriptionList_update_vertical

64e192c

kyrspl commented Aug 24, 2023

View reviewed changes

src/components/description_list/description_list_title.styles.ts Outdated Show resolved Hide resolved

kyrspl and others added 2 commits August 24, 2023 10:07

Update src/components/description_list/description_list_title.styles.ts

024eb73

removed max-inline-size

4808e81

cee-chen reviewed Aug 25, 2023

View reviewed changes

upcoming_changelogs/7062.md Outdated Show resolved Hide resolved

cee-chen reviewed Aug 25, 2023

View reviewed changes

upcoming_changelogs/7062.md Outdated Show resolved Hide resolved

changelog

0f4bed3

cee-chen approved these changes Aug 25, 2023

View reviewed changes

Merge branch 'main' into descriptionList_update_vertical

66354b7

Merge branch 'main' into descriptionList_update_vertical

a1ffc4b

ryankeairns approved these changes Aug 28, 2023

View reviewed changes

Merge branch 'main' into descriptionList_update_vertical

a7a5f7c

kyrspl enabled auto-merge (squash) August 28, 2023 16:39

kyrspl merged commit 6f03bd9 into elastic:main Aug 28, 2023
7 checks passed

1Copenut mentioned this pull request Aug 28, 2023

Upgrade EUI to v88.1.0 elastic/kibana#165047

Merged

kyrspl deleted the descriptionList_update_vertical branch August 29, 2023 10:27

cee-chen mentioned this pull request Aug 30, 2023

[EuiDescriptionList] Add new columnWidths prop #7146

Merged

7 tasks

cee-chen mentioned this pull request Sep 13, 2023

[EuiDescriptionListTitle] Misc compressed style fixes #7185

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiDescriptionList] Update display to grid for vertical column option with new props #7062

[EuiDescriptionList] Update display to grid for vertical column option with new props #7062

kyrspl commented Aug 9, 2023 •

edited by cee-chen

Loading

cla-checker-service bot commented Aug 9, 2023 •

edited

Loading

kibanamachine commented Aug 9, 2023

kibanamachine commented Aug 9, 2023

kibanamachine commented Aug 10, 2023

kibanamachine commented Aug 10, 2023

kibanamachine commented Aug 11, 2023

kibanamachine commented Aug 11, 2023

kibanamachine commented Aug 11, 2023

kibanamachine commented Aug 11, 2023

kibanamachine commented Aug 24, 2023

kyrspl commented Aug 24, 2023

cee-chen commented Aug 24, 2023

kibanamachine commented Aug 24, 2023

cee-chen left a comment

kibanamachine commented Aug 25, 2023

kyrspl commented Aug 25, 2023

kibanamachine commented Aug 25, 2023

kyrspl commented Aug 25, 2023

kibanamachine commented Aug 28, 2023

kibanamachine commented Aug 28, 2023

elasticmachine commented Aug 28, 2023

[EuiDescriptionList] Update display to grid for vertical column option with new props #7062

[EuiDescriptionList] Update display to grid for vertical column option with new props #7062

Conversation

kyrspl commented Aug 9, 2023 • edited by cee-chen Loading

Summary

To do

Design

General checklist

cla-checker-service bot commented Aug 9, 2023 • edited Loading

kibanamachine commented Aug 9, 2023

kibanamachine commented Aug 9, 2023

kibanamachine commented Aug 10, 2023

kibanamachine commented Aug 10, 2023

kibanamachine commented Aug 11, 2023

kibanamachine commented Aug 11, 2023

kibanamachine commented Aug 11, 2023

kibanamachine commented Aug 11, 2023

kibanamachine commented Aug 24, 2023

kyrspl commented Aug 24, 2023

cee-chen commented Aug 24, 2023

kibanamachine commented Aug 24, 2023

cee-chen left a comment

Choose a reason for hiding this comment

kibanamachine commented Aug 25, 2023

kyrspl commented Aug 25, 2023

kibanamachine commented Aug 25, 2023

kyrspl commented Aug 25, 2023

kibanamachine commented Aug 28, 2023

kibanamachine commented Aug 28, 2023

elasticmachine commented Aug 28, 2023

💚 Build Succeeded

History

kyrspl commented Aug 9, 2023 •

edited by cee-chen

Loading

cla-checker-service bot commented Aug 9, 2023 •

edited

Loading