From 58ab7ccda7acb1b406f14e203e1b05769c0efcbc Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Wed, 9 Aug 2023 17:13:54 +0200 Subject: [PATCH 01/40] add display grid --- .../description_list.styles.ts | 23 +++++++++++++++---- .../description_list/description_list.tsx | 10 ++++++-- .../description_list_context.tsx | 6 ++++- .../description_list_description.styles.ts | 3 +-- .../description_list_title.styles.ts | 15 ++---------- .../description_list_types.ts | 4 ++++ 6 files changed, 39 insertions(+), 22 deletions(-) diff --git a/src/components/description_list/description_list.styles.ts b/src/components/description_list/description_list.styles.ts index 4e93841489d..bc96e2637af 100644 --- a/src/components/description_list/description_list.styles.ts +++ b/src/components/description_list/description_list.styles.ts @@ -7,15 +7,20 @@ */ import { css } from '@emotion/react'; -import { logicalTextAlignCSS, euiMinBreakpoint } from '../../global_styling'; +import { + logicalTextAlignCSS, + euiMaxBreakpoint, + euiMinBreakpoint, +} from '../../global_styling'; import { UseEuiTheme } from '../../services'; export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { - // Flex display for column and responsive column + // Grid display for column and responsive column const columnDisplay = ` - display: flex; + display: grid; + grid-template-columns: fit-content(360px) 1fr; + row-gap: ${euiThemeContext.euiTheme.size.s}; align-items: baseline; - flex-wrap: wrap; `; return { @@ -29,6 +34,9 @@ export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { `, // Responsive columns behave as a row on breakpoints xs-s responsiveColumn: css` + ${euiMaxBreakpoint(euiThemeContext, 'm')} { + grid-template-columns: 1fr; + } ${euiMinBreakpoint(euiThemeContext, 'm')} { ${columnDisplay} } @@ -41,5 +49,12 @@ export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { left: css` ${logicalTextAlignCSS('left')} `, + // Column gap + s: css` + column-gap: 16px; + `, + m: css` + column-gap: 32px; + `, }; }; diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx index 6f2d65a7e8a..a881be9d5a6 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -34,12 +34,18 @@ export const EuiDescriptionList: FunctionComponent< titleProps, type = 'row', gutterSize = 'm', + columnGap = 's', ...rest }) => { const euiTheme = useEuiTheme(); const styles = euiDescriptionListStyles(euiTheme); - const cssStyles = [styles.euiDescriptionList, styles[type], styles[align]]; + const cssStyles = [ + styles.euiDescriptionList, + styles[type], + styles[align], + styles[columnGap], + ]; const classes = classNames('euiDescriptionList', className); @@ -66,7 +72,7 @@ export const EuiDescriptionList: FunctionComponent< return (
{childrenOrListItems} diff --git a/src/components/description_list/description_list_context.tsx b/src/components/description_list/description_list_context.tsx index 5b8d3636373..60dbf37debc 100644 --- a/src/components/description_list/description_list_context.tsx +++ b/src/components/description_list/description_list_context.tsx @@ -11,13 +11,17 @@ import { EuiDescriptionListProps } from './description_list_types'; type EuiDescriptionListContextValues = Required< Pick -> & { compressed?: EuiDescriptionListProps['compressed'] }; +> & { + compressed?: EuiDescriptionListProps['compressed']; + columnGap?: EuiDescriptionListProps['columnGap']; +}; export const contextDefaults: EuiDescriptionListContextValues = { type: 'row', textStyle: 'normal', align: 'left', gutterSize: 'm', + columnGap: 'm', }; export const EuiDescriptionListContext = diff --git a/src/components/description_list/description_list_description.styles.ts b/src/components/description_list/description_list_description.styles.ts index 5847b7e86d5..3177bfc0012 100644 --- a/src/components/description_list/description_list_description.styles.ts +++ b/src/components/description_list/description_list_description.styles.ts @@ -23,8 +23,7 @@ export const euiDescriptionListDescriptionStyles = ( const { euiTheme } = euiThemeContext; const columnDisplay = ` - ${logicalCSS('width', '50%')} - ${logicalCSS('padding-left', euiTheme.size.s)} + `; return { diff --git a/src/components/description_list/description_list_title.styles.ts b/src/components/description_list/description_list_title.styles.ts index f114157c2a8..80e72c15453 100644 --- a/src/components/description_list/description_list_title.styles.ts +++ b/src/components/description_list/description_list_title.styles.ts @@ -11,8 +11,6 @@ import { euiFontSize, euiTextBreakWord, logicalTextAlignCSS, - euiMaxBreakpoint, - euiMinBreakpoint, logicalCSS, } from '../../global_styling'; import { tint, UseEuiTheme } from '../../services'; @@ -22,8 +20,7 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme, colorMode } = euiThemeContext; const columnDisplay = ` - ${logicalCSS('width', '50%')} - ${logicalCSS('padding-right', euiTheme.size.s)} + `; return { euiDescriptionList__title: css` @@ -35,15 +32,7 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { column: css` ${columnDisplay} `, - responsiveColumn: css` - ${euiMaxBreakpoint(euiThemeContext, 'm')} { - ${logicalCSS('width', '100%')} - padding: 0; - } - ${euiMinBreakpoint(euiThemeContext, 'm')} { - ${columnDisplay} - } - `, + responsiveColumn: css``, inline: css` display: inline; border-radius: ${euiTheme.border.radius.small}; diff --git a/src/components/description_list/description_list_types.ts b/src/components/description_list/description_list_types.ts index 3a196919c23..5f9bf6967fe 100644 --- a/src/components/description_list/description_list_types.ts +++ b/src/components/description_list/description_list_types.ts @@ -43,6 +43,10 @@ export interface EuiDescriptionListProps { * Vertical spacing added between `EuiDescriptionList` elements */ gutterSize?: EuiDescriptionListGutterSizes; + /** + * Horizontal spacing added between `EuiDescriptionList` elements + */ + columnGap?: EuiDescriptionListGutterSizes; } export const TYPES = ['row', 'inline', 'column', 'responsiveColumn'] as const; From 1fd6bbd256de72b49fb3fd8204edab5706869bd1 Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Wed, 9 Aug 2023 19:42:08 +0200 Subject: [PATCH 02/40] add eui variables for column gap --- src/components/description_list/description_list.styles.ts | 4 ++-- src/components/description_list/description_list.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/description_list/description_list.styles.ts b/src/components/description_list/description_list.styles.ts index bc96e2637af..ef47f282fed 100644 --- a/src/components/description_list/description_list.styles.ts +++ b/src/components/description_list/description_list.styles.ts @@ -51,10 +51,10 @@ export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { `, // Column gap s: css` - column-gap: 16px; + column-gap: ${euiThemeContext.euiTheme.size.base}; `, m: css` - column-gap: 32px; + column-gap: ${euiThemeContext.euiTheme.size.xxl}; `, }; }; diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx index a881be9d5a6..4194d29cd05 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -33,7 +33,7 @@ export const EuiDescriptionList: FunctionComponent< textStyle = 'normal', titleProps, type = 'row', - gutterSize = 'm', + gutterSize = 's', columnGap = 's', ...rest }) => { From 28ef754c13ed1607ec896ff823f3506773147553 Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Thu, 10 Aug 2023 16:26:06 +0200 Subject: [PATCH 03/40] add total max width --- .../description_list.styles.ts | 30 ++++++++++++------- .../description_list/description_list.tsx | 3 +- .../description_list_types.ts | 5 +++- 3 files changed, 26 insertions(+), 12 deletions(-) diff --git a/src/components/description_list/description_list.styles.ts b/src/components/description_list/description_list.styles.ts index ef47f282fed..206529c9303 100644 --- a/src/components/description_list/description_list.styles.ts +++ b/src/components/description_list/description_list.styles.ts @@ -15,11 +15,12 @@ import { import { UseEuiTheme } from '../../services'; export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { + const TITLE_MAX_WIDTH = '380px'; + // Grid display for column and responsive column const columnDisplay = ` display: grid; - grid-template-columns: fit-content(360px) 1fr; - row-gap: ${euiThemeContext.euiTheme.size.s}; + grid-template-columns: fit-content(${TITLE_MAX_WIDTH}) 1fr; align-items: baseline; `; @@ -41,7 +42,23 @@ export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { ${columnDisplay} } `, - + // Handles row-gap according to row gutter size + rowGap: { + s: css` + row-gap: ${euiThemeContext.euiTheme.size.s}; + `, + m: css` + row-gap: ${euiThemeContext.euiTheme.size.m}; + `, + }, + columnGap: { + s: css` + column-gap: ${euiThemeContext.euiTheme.size.s}; + `, + m: css` + column-gap: ${euiThemeContext.euiTheme.size.xl}; + `, + }, // Alignment center: css` ${logicalTextAlignCSS('center')} @@ -49,12 +66,5 @@ export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { left: css` ${logicalTextAlignCSS('left')} `, - // Column gap - s: css` - column-gap: ${euiThemeContext.euiTheme.size.base}; - `, - m: css` - column-gap: ${euiThemeContext.euiTheme.size.xxl}; - `, }; }; diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx index 4194d29cd05..6aca2d0dab9 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -43,8 +43,9 @@ export const EuiDescriptionList: FunctionComponent< const cssStyles = [ styles.euiDescriptionList, styles[type], + styles.rowGap[gutterSize], + styles.columnGap[columnGap], styles[align], - styles[columnGap], ]; const classes = classNames('euiDescriptionList', className); diff --git a/src/components/description_list/description_list_types.ts b/src/components/description_list/description_list_types.ts index 5f9bf6967fe..29dfbe376f4 100644 --- a/src/components/description_list/description_list_types.ts +++ b/src/components/description_list/description_list_types.ts @@ -46,7 +46,7 @@ export interface EuiDescriptionListProps { /** * Horizontal spacing added between `EuiDescriptionList` elements */ - columnGap?: EuiDescriptionListGutterSizes; + columnGap?: EuiDescriptionListColumnGapSizes; } export const TYPES = ['row', 'inline', 'column', 'responsiveColumn'] as const; @@ -60,3 +60,6 @@ export type EuiDescriptionListTextStyle = (typeof TEXT_STYLES)[number]; export const GUTTER_SIZES = ['s', 'm'] as const; export type EuiDescriptionListGutterSizes = (typeof GUTTER_SIZES)[number]; + +export const COLUMN_GAP_SIZES = ['s', 'm'] as const; +export type EuiDescriptionListColumnGapSizes = (typeof GUTTER_SIZES)[number]; From d64db9241405fb79f2632709d8b9f94e94759a2d Mon Sep 17 00:00:00 2001 From: Kyriakos Spiliotopoulos <92029479+kyrspl@users.noreply.github.com> Date: Fri, 11 Aug 2023 10:59:22 +0200 Subject: [PATCH 04/40] Update src/components/description_list/description_list_types.ts Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --- src/components/description_list/description_list_types.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/description_list/description_list_types.ts b/src/components/description_list/description_list_types.ts index 29dfbe376f4..ef1a9c6e7d5 100644 --- a/src/components/description_list/description_list_types.ts +++ b/src/components/description_list/description_list_types.ts @@ -44,7 +44,8 @@ export interface EuiDescriptionListProps { */ gutterSize?: EuiDescriptionListGutterSizes; /** - * Horizontal spacing added between `EuiDescriptionList` elements + * Only applies to `column`/`responsiveColumn` description lists. + * Allows customizing the horizontal gap between columns. */ columnGap?: EuiDescriptionListColumnGapSizes; } From 9bd838564d109de9e521febbca04461823be8017 Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Fri, 11 Aug 2023 15:50:59 +0200 Subject: [PATCH 05/40] update test for column_gap --- .../description_list.test.tsx.snap | 58 ++++++++++++------- .../description_list.test.tsx | 19 +++++- .../description_list_types.ts | 3 +- 3 files changed, 56 insertions(+), 24 deletions(-) diff --git a/src/components/description_list/__snapshots__/description_list.test.tsx.snap b/src/components/description_list/__snapshots__/description_list.test.tsx.snap index eeef5c707ac..cf7b6a4dba4 100644 --- a/src/components/description_list/__snapshots__/description_list.test.tsx.snap +++ b/src/components/description_list/__snapshots__/description_list.test.tsx.snap @@ -2,11 +2,11 @@ exports[` 1`] = `
Title 1
@@ -16,7 +16,7 @@ exports[` 1`] = ` Description 1
Title 2 @@ -30,7 +30,7 @@ exports[` 1`] = `
Title 3
@@ -45,7 +45,7 @@ exports[` 1`] = ` exports[`EuiDescriptionList is rendered 1`] = `
@@ -55,46 +55,60 @@ exports[`EuiDescriptionList is rendered 1`] = ` exports[`EuiDescriptionList props align center is rendered 1`] = `
`; exports[`EuiDescriptionList props align left is rendered 1`] = `
+`; + +exports[`EuiDescriptionList props column gap m is rendered 1`] = ` +
+`; + +exports[`EuiDescriptionList props column gap s is rendered 1`] = ` +
`; exports[`EuiDescriptionList props compressed is rendered 1`] = `
`; exports[`EuiDescriptionList props gutter m is rendered 1`] = `
`; exports[`EuiDescriptionList props gutter s is rendered 1`] = `
`; exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
Title 1
@@ -106,7 +120,7 @@ exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = ` Description 1
Title 2 @@ -122,7 +136,7 @@ exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
Title 3
@@ -138,12 +152,12 @@ exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = ` exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
Title 1 @@ -155,7 +169,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
@@ -171,7 +185,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
Title 3 @@ -186,28 +200,28 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = ` exports[`EuiDescriptionList props type column is rendered 1`] = `
`; exports[`EuiDescriptionList props type inline is rendered 1`] = `
`; exports[`EuiDescriptionList props type responsiveColumn is rendered 1`] = `
`; exports[`EuiDescriptionList props type row is rendered 1`] = `
`; diff --git a/src/components/description_list/description_list.test.tsx b/src/components/description_list/description_list.test.tsx index 577ac7f27c3..23cd12f1258 100644 --- a/src/components/description_list/description_list.test.tsx +++ b/src/components/description_list/description_list.test.tsx @@ -12,7 +12,12 @@ import { render } from '../../test/rtl'; import { shouldRenderCustomStyles } from '../../test/internal'; import { EuiDescriptionList } from './description_list'; -import { TYPES, ALIGNMENTS, GUTTER_SIZES } from './description_list_types'; +import { + TYPES, + ALIGNMENTS, + GUTTER_SIZES, + COLUMN_GAP_SIZES, +} from './description_list_types'; describe('EuiDescriptionList', () => { shouldRenderCustomStyles( @@ -122,5 +127,17 @@ describe('EuiDescriptionList', () => { }); }); }); + + describe('column gap', () => { + COLUMN_GAP_SIZES.forEach((column_gap) => { + test(`${column_gap} is rendered`, () => { + const { container } = render( + + ); + + expect(container.firstChild).toMatchSnapshot(); + }); + }); + }); }); }); diff --git a/src/components/description_list/description_list_types.ts b/src/components/description_list/description_list_types.ts index ef1a9c6e7d5..b921d307478 100644 --- a/src/components/description_list/description_list_types.ts +++ b/src/components/description_list/description_list_types.ts @@ -63,4 +63,5 @@ export const GUTTER_SIZES = ['s', 'm'] as const; export type EuiDescriptionListGutterSizes = (typeof GUTTER_SIZES)[number]; export const COLUMN_GAP_SIZES = ['s', 'm'] as const; -export type EuiDescriptionListColumnGapSizes = (typeof GUTTER_SIZES)[number]; +export type EuiDescriptionListColumnGapSizes = + (typeof COLUMN_GAP_SIZES)[number]; From 94c5f68fe2f14305fce574b8b42e94c16cc43765 Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Fri, 11 Aug 2023 16:14:30 +0200 Subject: [PATCH 06/40] add changelog --- upcoming_changelogs/7062.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 upcoming_changelogs/7062.md diff --git a/upcoming_changelogs/7062.md b/upcoming_changelogs/7062.md new file mode 100644 index 00000000000..77de087b1a7 --- /dev/null +++ b/upcoming_changelogs/7062.md @@ -0,0 +1 @@ +- Updated `euiDescriptionList` with new `columnGap` prop \ No newline at end of file From 672f564b9ca2badab34ed295c3f81070acb63485 Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Fri, 11 Aug 2023 17:35:27 +0200 Subject: [PATCH 07/40] update documentation --- .../description_list_example.js | 27 ++++++++++++----- .../description_list_styling.js | 30 +++++++++++++++++++ 2 files changed, 50 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/description_list/description_list_example.js b/src-docs/src/views/description_list/description_list_example.js index db1ad0111c2..0e3afa117ed 100644 --- a/src-docs/src/views/description_list/description_list_example.js +++ b/src-docs/src/views/description_list/description_list_example.js @@ -239,13 +239,26 @@ export const DescriptionListExample = { }, ], text: ( -

- Using the align and compressed{' '} - props you can further tailor the look of a description list. This - works with column and inline types. You can also adjust the{' '} - gutterSize prop to increase and decrease vertical - spacing between EuiDescriptionList elements. -

+ <> +

Alignment & Compression

+

+ Utilize the align and + compressed props to refine the presentation of + your description list. These are compatible with both column and + inline types. +

+

Vertical spacing

+

+ Modify the gutterSize prop to control the + vertical spacing between EuiDescriptionList{' '} + elements. +

+

Horizontal spacing

+

+ Adjust the spacing between the title and description with the{' '} + columnGap prop. +

+ ), snippet: descriptionListStylingSnippet, demo: , diff --git a/src-docs/src/views/description_list/description_list_styling.js b/src-docs/src/views/description_list/description_list_styling.js index dd3d85c6abe..9935585bb0c 100644 --- a/src-docs/src/views/description_list/description_list_styling.js +++ b/src-docs/src/views/description_list/description_list_styling.js @@ -61,6 +61,23 @@ export default () => { setGutterSelected(id); }; + const columnGapToggleButtons = [ + { + id: 's', + label: 'Small', + }, + { + id: 'm', + label: 'Medium', + }, + ]; + + const [columnGapSelected, setColumnGapSelected] = useState('m'); + + const columnGapOnChange = (id) => { + setColumnGapSelected(id); + }; + const [compressed, setCompressed] = useState(true); const compressedOnChange = () => { @@ -94,6 +111,18 @@ export default () => { /> + + +

Column gap sizes

+ + columnGapOnChange(id)} + /> + +

Compressed

@@ -123,6 +152,7 @@ export default () => { align={alignSelected} compressed={compressed} gutterSize={gutterSelected} + columnGap={columnGapSelected} /> From 0ee59c541727ef44ba7df96d5049bb760a856cf5 Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Fri, 11 Aug 2023 18:07:46 +0200 Subject: [PATCH 08/40] fix typo --- src-docs/src/views/description_list/description_list_column.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/description_list/description_list_column.js b/src-docs/src/views/description_list/description_list_column.js index a6b7577c696..76a224376bf 100644 --- a/src-docs/src/views/description_list/description_list_column.js +++ b/src-docs/src/views/description_list/description_list_column.js @@ -10,7 +10,7 @@ const favoriteVideoGames = [ { title: 'TIE Fighter', description: - 'The sequel to XWING, join the dark side and fly for the Emporer.', + 'The sequel to XWING, join the dark side and fly for the Emperor.', }, { title: 'Quake 2', From b25bc8f9670ca871fd78259f335575a1fa0e2fc8 Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Fri, 11 Aug 2023 18:10:05 +0200 Subject: [PATCH 09/40] fix typo in test --- src/components/description_list/description_list.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/description_list/description_list.test.tsx b/src/components/description_list/description_list.test.tsx index 23cd12f1258..3271bc354a0 100644 --- a/src/components/description_list/description_list.test.tsx +++ b/src/components/description_list/description_list.test.tsx @@ -116,7 +116,7 @@ describe('EuiDescriptionList', () => { }); }); - describe('gutter', () => { + describe('gutter size', () => { GUTTER_SIZES.forEach((gutter) => { test(`${gutter} is rendered`, () => { const { container } = render( From c0c9e1fb0f2f5e8bee2c8c0afc95d81603017f8d Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Mon, 14 Aug 2023 15:09:12 +0200 Subject: [PATCH 10/40] update test desc --- src/components/description_list/description_list.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/description_list/description_list.test.tsx b/src/components/description_list/description_list.test.tsx index 3271bc354a0..23cd12f1258 100644 --- a/src/components/description_list/description_list.test.tsx +++ b/src/components/description_list/description_list.test.tsx @@ -116,7 +116,7 @@ describe('EuiDescriptionList', () => { }); }); - describe('gutter size', () => { + describe('gutter', () => { GUTTER_SIZES.forEach((gutter) => { test(`${gutter} is rendered`, () => { const { container } = render( From 3896845adc5f8d826495b7a14158b42a54ad70f0 Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Mon, 14 Aug 2023 15:37:53 +0200 Subject: [PATCH 11/40] update keyboard snapshot --- .../controls/__snapshots__/keyboard_shortcuts.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap index 41f69315338..735c738cf5f 100644 --- a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap @@ -84,7 +84,7 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key >
Date: Tue, 15 Aug 2023 18:17:45 +0200 Subject: [PATCH 12/40] fix typos --- src-docs/src/views/description_list/description_list_classes.js | 2 +- .../description_list/description_list_column_responsive.js | 2 +- src-docs/src/views/description_list/description_list_inline.js | 2 +- src-docs/src/views/description_list/description_list_styling.js | 2 +- src-docs/src/views/description_list/playground.js | 2 +- src-docs/src/views/text/text.js | 2 +- src-docs/src/views/text/text_small.js | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/description_list/description_list_classes.js b/src-docs/src/views/description_list/description_list_classes.js index 8684c6c5ad9..a39dea0ae63 100644 --- a/src-docs/src/views/description_list/description_list_classes.js +++ b/src-docs/src/views/description_list/description_list_classes.js @@ -10,7 +10,7 @@ const favoriteVideoGames = [ { title: 'TIE Fighter', description: - 'The sequel to XWING, join the dark side and fly for the Emporer.', + 'The sequel to XWING, join the dark side and fly for the Emperor.', }, { title: 'Quake 2', diff --git a/src-docs/src/views/description_list/description_list_column_responsive.js b/src-docs/src/views/description_list/description_list_column_responsive.js index 9c597603a2d..07e3e91d6b9 100644 --- a/src-docs/src/views/description_list/description_list_column_responsive.js +++ b/src-docs/src/views/description_list/description_list_column_responsive.js @@ -10,7 +10,7 @@ const favoriteVideoGames = [ { title: 'TIE Fighter', description: - 'The sequel to XWING, join the dark side and fly for the Emporer.', + 'The sequel to XWING, join the dark side and fly for the Emperor.', }, { title: 'Quake 2', diff --git a/src-docs/src/views/description_list/description_list_inline.js b/src-docs/src/views/description_list/description_list_inline.js index 86863eba673..32cea09cf26 100644 --- a/src-docs/src/views/description_list/description_list_inline.js +++ b/src-docs/src/views/description_list/description_list_inline.js @@ -10,7 +10,7 @@ const favoriteVideoGames = [ { title: 'TIE Fighter', description: - 'The sequel to XWING, join the dark side and fly for the Emporer.', + 'The sequel to XWING, join the dark side and fly for the Emperor.', }, { title: 'Quake 2', diff --git a/src-docs/src/views/description_list/description_list_styling.js b/src-docs/src/views/description_list/description_list_styling.js index 9935585bb0c..a3b366dbdc2 100644 --- a/src-docs/src/views/description_list/description_list_styling.js +++ b/src-docs/src/views/description_list/description_list_styling.js @@ -19,7 +19,7 @@ export default () => { { title: 'TIE Fighter', description: - 'The sequel to XWING, join the dark side and fly for the Emporer.', + 'The sequel to XWING, join the dark side and fly for the Emperor.', }, { title: 'Quake 2', diff --git a/src-docs/src/views/description_list/playground.js b/src-docs/src/views/description_list/playground.js index 66dbc9c43a1..521dbac181d 100644 --- a/src-docs/src/views/description_list/playground.js +++ b/src-docs/src/views/description_list/playground.js @@ -18,7 +18,7 @@ export const descriptionListConfig = () => { { title: 'TIE Fighter', description: - 'The sequel to XWING, join the dark side and fly for the Emporer.', + 'The sequel to XWING, join the dark side and fly for the Emperor.', }, ]`; propsToUse.listItems = { diff --git a/src-docs/src/views/text/text.js b/src-docs/src/views/text/text.js index 9082ff8ed4a..525336a4638 100644 --- a/src-docs/src/views/text/text.js +++ b/src-docs/src/views/text/text.js @@ -169,7 +169,7 @@ export default () => (
The opening music alone evokes such strong memories.
TIE Fighter
- The sequel to XWING, join the dark side and fly for the Emporer. + The sequel to XWING, join the dark side and fly for the Emperor.
Quake 2
The game that made me drop out of college.
diff --git a/src-docs/src/views/text/text_small.js b/src-docs/src/views/text/text_small.js index f79fbccae7f..cef8a9283fc 100644 --- a/src-docs/src/views/text/text_small.js +++ b/src-docs/src/views/text/text_small.js @@ -94,7 +94,7 @@ const exampleText = (
The Elder Scrolls: Morrowind
The opening music alone evokes such strong memories.
TIE Fighter
-
The sequel to XWING, join the dark side and fly for the Emporer.
+
The sequel to XWING, join the dark side and fly for the Emperor.
Quake 2
The game that made me drop out of college.
From 8a5981261b3ce2459f68250cb7cb223f875d165e Mon Sep 17 00:00:00 2001 From: Kyriakos Spiliotopoulos <92029479+kyrspl@users.noreply.github.com> Date: Tue, 15 Aug 2023 20:07:35 +0200 Subject: [PATCH 13/40] Update src-docs/src/views/description_list/description_list_example.js Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --- src-docs/src/views/description_list/description_list_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/description_list/description_list_example.js b/src-docs/src/views/description_list/description_list_example.js index 0e3afa117ed..655e5ad3a25 100644 --- a/src-docs/src/views/description_list/description_list_example.js +++ b/src-docs/src/views/description_list/description_list_example.js @@ -256,7 +256,7 @@ export const DescriptionListExample = {

Horizontal spacing

Adjust the spacing between the title and description with the{' '} - columnGap prop. + columnGap prop. This will not affect inline or row types.

), From db9e57ae36c5d1628544d325537c4a27412107a9 Mon Sep 17 00:00:00 2001 From: Kyriakos Spiliotopoulos <92029479+kyrspl@users.noreply.github.com> Date: Tue, 15 Aug 2023 20:07:42 +0200 Subject: [PATCH 14/40] Update src-docs/src/views/description_list/description_list_example.js Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --- src-docs/src/views/description_list/description_list_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/description_list/description_list_example.js b/src-docs/src/views/description_list/description_list_example.js index 655e5ad3a25..02b0dff13ad 100644 --- a/src-docs/src/views/description_list/description_list_example.js +++ b/src-docs/src/views/description_list/description_list_example.js @@ -251,7 +251,7 @@ export const DescriptionListExample = {

Modify the gutterSize prop to control the vertical spacing between EuiDescriptionList{' '} - elements. + elements. This will not affect inline list types.

Horizontal spacing

From dde01e8ac655aac451ef7807a2b6cb5821094863 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 15 Aug 2023 13:09:35 -0700 Subject: [PATCH 15/40] [PR feedback] Conditionally render CSS that only applies to `display: grid` types --- .../description_list.test.tsx.snap | 30 +++++++++---------- .../description_list/description_list.tsx | 6 ++-- 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/components/description_list/__snapshots__/description_list.test.tsx.snap b/src/components/description_list/__snapshots__/description_list.test.tsx.snap index cf7b6a4dba4..c9591627cb2 100644 --- a/src/components/description_list/__snapshots__/description_list.test.tsx.snap +++ b/src/components/description_list/__snapshots__/description_list.test.tsx.snap @@ -2,7 +2,7 @@ exports[` 1`] = `

@@ -55,56 +55,56 @@ exports[`EuiDescriptionList is rendered 1`] = ` exports[`EuiDescriptionList props align center is rendered 1`] = `
`; exports[`EuiDescriptionList props align left is rendered 1`] = `
`; exports[`EuiDescriptionList props column gap m is rendered 1`] = `
`; exports[`EuiDescriptionList props column gap s is rendered 1`] = `
`; exports[`EuiDescriptionList props compressed is rendered 1`] = `
`; exports[`EuiDescriptionList props gutter m is rendered 1`] = `
`; exports[`EuiDescriptionList props gutter s is rendered 1`] = `
`; exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
`; exports[`EuiDescriptionList props type inline is rendered 1`] = `
`; exports[`EuiDescriptionList props type responsiveColumn is rendered 1`] = `
`; exports[`EuiDescriptionList props type row is rendered 1`] = `
`; diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx index 6aca2d0dab9..2c5b3843934 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -40,12 +40,14 @@ export const EuiDescriptionList: FunctionComponent< const euiTheme = useEuiTheme(); const styles = euiDescriptionListStyles(euiTheme); + const isColumnDisplay = type === 'column' || type === 'responsiveColumn'; + const cssStyles = [ styles.euiDescriptionList, styles[type], - styles.rowGap[gutterSize], - styles.columnGap[columnGap], styles[align], + isColumnDisplay && styles.rowGap[gutterSize], + isColumnDisplay && styles.columnGap[columnGap], ]; const classes = classNames('euiDescriptionList', className); From f8faa78a36e44e52e167964f175ab2deabba852e Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 15 Aug 2023 13:11:22 -0700 Subject: [PATCH 16/40] [PR feedback] Remove unnecessary mobile breakpoint CSS - it's not doing anything, as `display: grid` is not set and the child components already default to a responsive/stacked display --- .../description_list/description_list.styles.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/description_list/description_list.styles.ts b/src/components/description_list/description_list.styles.ts index 206529c9303..ba91f8eae66 100644 --- a/src/components/description_list/description_list.styles.ts +++ b/src/components/description_list/description_list.styles.ts @@ -7,11 +7,7 @@ */ import { css } from '@emotion/react'; -import { - logicalTextAlignCSS, - euiMaxBreakpoint, - euiMinBreakpoint, -} from '../../global_styling'; +import { logicalTextAlignCSS, euiMinBreakpoint } from '../../global_styling'; import { UseEuiTheme } from '../../services'; export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { @@ -35,9 +31,6 @@ export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { `, // Responsive columns behave as a row on breakpoints xs-s responsiveColumn: css` - ${euiMaxBreakpoint(euiThemeContext, 'm')} { - grid-template-columns: 1fr; - } ${euiMinBreakpoint(euiThemeContext, 'm')} { ${columnDisplay} } From c11b79fedbb6e6817b33b2a8978e9d1215bf59cf Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 15 Aug 2023 13:13:27 -0700 Subject: [PATCH 17/40] [PR feedback] Remove `row-gap` CSS - this is already being handled by each individual child title/description component's `margin-top` CSS - adding it for column displays simply incorrectly doubles the spacing --- .../__snapshots__/description_list.test.tsx.snap | 4 ++-- .../description_list/description_list.styles.ts | 9 --------- src/components/description_list/description_list.tsx | 1 - 3 files changed, 2 insertions(+), 12 deletions(-) diff --git a/src/components/description_list/__snapshots__/description_list.test.tsx.snap b/src/components/description_list/__snapshots__/description_list.test.tsx.snap index c9591627cb2..cb4c4d352cb 100644 --- a/src/components/description_list/__snapshots__/description_list.test.tsx.snap +++ b/src/components/description_list/__snapshots__/description_list.test.tsx.snap @@ -200,7 +200,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = ` exports[`EuiDescriptionList props type column is rendered 1`] = `
`; @@ -214,7 +214,7 @@ exports[`EuiDescriptionList props type inline is rendered 1`] = ` exports[`EuiDescriptionList props type responsiveColumn is rendered 1`] = `
`; diff --git a/src/components/description_list/description_list.styles.ts b/src/components/description_list/description_list.styles.ts index ba91f8eae66..4405d1ff658 100644 --- a/src/components/description_list/description_list.styles.ts +++ b/src/components/description_list/description_list.styles.ts @@ -35,15 +35,6 @@ export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { ${columnDisplay} } `, - // Handles row-gap according to row gutter size - rowGap: { - s: css` - row-gap: ${euiThemeContext.euiTheme.size.s}; - `, - m: css` - row-gap: ${euiThemeContext.euiTheme.size.m}; - `, - }, columnGap: { s: css` column-gap: ${euiThemeContext.euiTheme.size.s}; diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx index 2c5b3843934..a7ac24c1ef0 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -46,7 +46,6 @@ export const EuiDescriptionList: FunctionComponent< styles.euiDescriptionList, styles[type], styles[align], - isColumnDisplay && styles.rowGap[gutterSize], isColumnDisplay && styles.columnGap[columnGap], ]; From 2bd11eeb7dc1678355a7ae84a2c830edc841e985 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 15 Aug 2023 13:18:48 -0700 Subject: [PATCH 18/40] [PR feedback] Remove `columnGap` from context - no child components are using it, so it isn't necessary to pass via context --- src/components/description_list/description_list.tsx | 2 +- src/components/description_list/description_list_context.tsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx index a7ac24c1ef0..b82d2fff74d 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -74,7 +74,7 @@ export const EuiDescriptionList: FunctionComponent< return (
{childrenOrListItems} diff --git a/src/components/description_list/description_list_context.tsx b/src/components/description_list/description_list_context.tsx index 60dbf37debc..86cebbfe62a 100644 --- a/src/components/description_list/description_list_context.tsx +++ b/src/components/description_list/description_list_context.tsx @@ -13,7 +13,6 @@ type EuiDescriptionListContextValues = Required< Pick > & { compressed?: EuiDescriptionListProps['compressed']; - columnGap?: EuiDescriptionListProps['columnGap']; }; export const contextDefaults: EuiDescriptionListContextValues = { @@ -21,7 +20,6 @@ export const contextDefaults: EuiDescriptionListContextValues = { textStyle: 'normal', align: 'left', gutterSize: 'm', - columnGap: 'm', }; export const EuiDescriptionListContext = From d35e84e7e4c141818559d5429fcff75e37f97139 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 15 Aug 2023 13:18:59 -0700 Subject: [PATCH 19/40] prettier lint fix --- .../src/views/description_list/description_list_example.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/description_list/description_list_example.js b/src-docs/src/views/description_list/description_list_example.js index 02b0dff13ad..99267b328b5 100644 --- a/src-docs/src/views/description_list/description_list_example.js +++ b/src-docs/src/views/description_list/description_list_example.js @@ -256,7 +256,8 @@ export const DescriptionListExample = {

Horizontal spacing

Adjust the spacing between the title and description with the{' '} - columnGap prop. This will not affect inline or row types. + columnGap prop. This will not affect inline or + row types.

), From 1028d810ccb41c839da5e61b70754d4e0b88b836 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 15 Aug 2023 14:27:43 -0700 Subject: [PATCH 20/40] Update downstream snapshots --- .../controls/__snapshots__/keyboard_shortcuts.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap index 735c738cf5f..5a393332c54 100644 --- a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap @@ -84,7 +84,7 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key >
Date: Mon, 21 Aug 2023 16:35:06 +0200 Subject: [PATCH 21/40] refactor final --- .../keyboard_shortcuts.test.tsx.snap | 50 +++++++++---------- .../description_list.test.tsx.snap | 22 ++++---- ...description_list_description.test.tsx.snap | 4 +- .../description_list_title.test.tsx.snap | 16 +++--- .../description_list.styles.ts | 12 +++-- .../description_list/description_list.tsx | 3 +- .../description_list_context.tsx | 2 + .../description_list_description.styles.ts | 16 +----- .../description_list_description.tsx | 10 ++-- .../description_list_title.styles.ts | 8 ++- .../description_list_title.tsx | 10 ++-- 11 files changed, 77 insertions(+), 76 deletions(-) diff --git a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap index 5a393332c54..a920547560e 100644 --- a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap @@ -84,83 +84,83 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key >
Up arrow
Move one cell up
Down arrow
Move one cell down
Right arrow
Move one cell right
Left arrow
Move one cell left
Home
Move to the first cell of the current row
End
Move to the last cell of the current row
Ctrl @@ -171,12 +171,12 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key
Move to the first cell of the current page
Ctrl @@ -187,55 +187,55 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key
Move to the last cell of the current page
Page Up
Go to the last row of the previous page
Page Down
Go to the first row of the next page
Enter
Open cell details and actions
Escape
Close cell details and actions
diff --git a/src/components/description_list/__snapshots__/description_list.test.tsx.snap b/src/components/description_list/__snapshots__/description_list.test.tsx.snap index cb4c4d352cb..92b86dad7bd 100644 --- a/src/components/description_list/__snapshots__/description_list.test.tsx.snap +++ b/src/components/description_list/__snapshots__/description_list.test.tsx.snap @@ -6,7 +6,7 @@ exports[` 1`] = ` data-type="row" >
Title 1
@@ -16,7 +16,7 @@ exports[` 1`] = ` Description 1
Title 2 @@ -30,7 +30,7 @@ exports[` 1`] = `
Title 3
@@ -108,7 +108,7 @@ exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = ` data-type="row" >
Title 1
@@ -120,7 +120,7 @@ exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = ` Description 1
Title 2 @@ -136,7 +136,7 @@ exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
Title 3
@@ -157,7 +157,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = ` >
Title 1 @@ -169,7 +169,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
@@ -185,7 +185,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
Title 3 @@ -200,7 +200,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = ` exports[`EuiDescriptionList props type column is rendered 1`] = `
`; @@ -214,7 +214,7 @@ exports[`EuiDescriptionList props type inline is rendered 1`] = ` exports[`EuiDescriptionList props type responsiveColumn is rendered 1`] = `
`; diff --git a/src/components/description_list/__snapshots__/description_list_description.test.tsx.snap b/src/components/description_list/__snapshots__/description_list_description.test.tsx.snap index a7798409ead..1d2d0bb2905 100644 --- a/src/components/description_list/__snapshots__/description_list_description.test.tsx.snap +++ b/src/components/description_list/__snapshots__/description_list_description.test.tsx.snap @@ -20,7 +20,7 @@ exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variat exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variations type column is rendered 1`] = `
`; @@ -32,7 +32,7 @@ exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variat exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variations type responsiveColumn is rendered 1`] = `
`; diff --git a/src/components/description_list/__snapshots__/description_list_title.test.tsx.snap b/src/components/description_list/__snapshots__/description_list_title.test.tsx.snap index 9e7d4b0ce99..715729ac070 100644 --- a/src/components/description_list/__snapshots__/description_list_title.test.tsx.snap +++ b/src/components/description_list/__snapshots__/description_list_title.test.tsx.snap @@ -2,50 +2,50 @@ exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations align center alignment is rendered 1`] = `
`; exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations compressed is rendered 1`] = `
`; exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations text styles reversed text is rendered 1`] = `
`; exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type column is rendered 1`] = `
`; exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type inline is rendered 1`] = `
`; exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type responsiveColumn is rendered 1`] = `
`; exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type row is rendered 1`] = `
`; exports[`EuiDescriptionListTitle is rendered 1`] = `
Content diff --git a/src/components/description_list/description_list.styles.ts b/src/components/description_list/description_list.styles.ts index 4405d1ff658..055980dc548 100644 --- a/src/components/description_list/description_list.styles.ts +++ b/src/components/description_list/description_list.styles.ts @@ -11,12 +11,10 @@ import { logicalTextAlignCSS, euiMinBreakpoint } from '../../global_styling'; import { UseEuiTheme } from '../../services'; export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { - const TITLE_MAX_WIDTH = '380px'; - // Grid display for column and responsive column const columnDisplay = ` display: grid; - grid-template-columns: fit-content(${TITLE_MAX_WIDTH}) 1fr; + grid-template-columns: minmax(auto, max-content) minmax(auto, max-content); align-items: baseline; `; @@ -43,6 +41,14 @@ export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { column-gap: ${euiThemeContext.euiTheme.size.xl}; `, }, + rowGap: { + s: css` + row-gap: ${euiThemeContext.euiTheme.size.s}; + `, + m: css` + row-gap: ${euiThemeContext.euiTheme.size.m}; + `, + }, // Alignment center: css` ${logicalTextAlignCSS('center')} diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx index b82d2fff74d..2c5b3843934 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -46,6 +46,7 @@ export const EuiDescriptionList: FunctionComponent< styles.euiDescriptionList, styles[type], styles[align], + isColumnDisplay && styles.rowGap[gutterSize], isColumnDisplay && styles.columnGap[columnGap], ]; @@ -74,7 +75,7 @@ export const EuiDescriptionList: FunctionComponent< return (
{childrenOrListItems} diff --git a/src/components/description_list/description_list_context.tsx b/src/components/description_list/description_list_context.tsx index 86cebbfe62a..60dbf37debc 100644 --- a/src/components/description_list/description_list_context.tsx +++ b/src/components/description_list/description_list_context.tsx @@ -13,6 +13,7 @@ type EuiDescriptionListContextValues = Required< Pick > & { compressed?: EuiDescriptionListProps['compressed']; + columnGap?: EuiDescriptionListProps['columnGap']; }; export const contextDefaults: EuiDescriptionListContextValues = { @@ -20,6 +21,7 @@ export const contextDefaults: EuiDescriptionListContextValues = { textStyle: 'normal', align: 'left', gutterSize: 'm', + columnGap: 'm', }; export const EuiDescriptionListContext = diff --git a/src/components/description_list/description_list_description.styles.ts b/src/components/description_list/description_list_description.styles.ts index 3177bfc0012..1604e120049 100644 --- a/src/components/description_list/description_list_description.styles.ts +++ b/src/components/description_list/description_list_description.styles.ts @@ -20,10 +20,10 @@ import { euiTitle } from '../title/title.styles'; export const euiDescriptionListDescriptionStyles = ( euiThemeContext: UseEuiTheme ) => { - const { euiTheme } = euiThemeContext; + const TEXT_MAX_WIDTH = '55ch'; const columnDisplay = ` - + max-inline-size = ${TEXT_MAX_WIDTH}; `; return { @@ -74,17 +74,5 @@ export const euiDescriptionListDescriptionStyles = ( left: css` ${logicalTextAlignCSS('left')} `, - - // Gutter - s: css` - &:not(:first-of-type) { - ${logicalCSS('margin-top', euiTheme.size.s)} - } - `, - m: css` - &:not(:first-of-type) { - ${logicalCSS('margin-top', euiTheme.size.base)} - } - `, }; }; diff --git a/src/components/description_list/description_list_description.tsx b/src/components/description_list/description_list_description.tsx index af815ac83f1..399fed41699 100644 --- a/src/components/description_list/description_list_description.tsx +++ b/src/components/description_list/description_list_description.tsx @@ -9,7 +9,7 @@ import React, { HTMLAttributes, FunctionComponent, useContext } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../common'; -import { useEuiTheme, useIsWithinMinBreakpoint } from '../../services'; +import { useEuiTheme } from '../../services'; import { euiDescriptionListDescriptionStyles } from './description_list_description.styles'; import { EuiDescriptionListContext } from './description_list_context'; @@ -21,10 +21,9 @@ export interface EuiDescriptionListDescriptionProps export const EuiDescriptionListDescription: FunctionComponent< EuiDescriptionListDescriptionProps > = ({ children, className, ...rest }) => { - const { type, textStyle, compressed, align, gutterSize } = useContext( + const { type, textStyle, compressed, align } = useContext( EuiDescriptionListContext ); - const showResponsiveColumns = useIsWithinMinBreakpoint('m'); const theme = useEuiTheme(); const styles = euiDescriptionListDescriptionStyles(theme); @@ -41,14 +40,11 @@ export const EuiDescriptionListDescription: FunctionComponent< : [styles.inlineStyles.normal]; break; - case 'responsiveColumn': case 'column': if (align === 'center') { conditionalStyles.push(styles.left); } - if (type === 'column' || showResponsiveColumns) { - conditionalStyles.push(styles[gutterSize]); - } + break; } diff --git a/src/components/description_list/description_list_title.styles.ts b/src/components/description_list/description_list_title.styles.ts index 80e72c15453..6e736805938 100644 --- a/src/components/description_list/description_list_title.styles.ts +++ b/src/components/description_list/description_list_title.styles.ts @@ -19,8 +19,10 @@ import { euiTitle } from '../title/title.styles'; export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme, colorMode } = euiThemeContext; + const TEXT_MAX_WIDTH = '55ch'; + const columnDisplay = ` - + max-inline-size = ${TEXT_MAX_WIDTH}; `; return { euiDescriptionList__title: css` @@ -32,7 +34,9 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { column: css` ${columnDisplay} `, - responsiveColumn: css``, + responsiveColumn: css` + ${columnDisplay} + `, inline: css` display: inline; border-radius: ${euiTheme.border.radius.small}; diff --git a/src/components/description_list/description_list_title.tsx b/src/components/description_list/description_list_title.tsx index 9c557ea99ab..90367f5497c 100644 --- a/src/components/description_list/description_list_title.tsx +++ b/src/components/description_list/description_list_title.tsx @@ -9,7 +9,7 @@ import React, { HTMLAttributes, FunctionComponent, useContext } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../common'; -import { useEuiTheme } from '../../services'; +import { useEuiTheme, useIsWithinBreakpoints } from '../../services'; import { euiDescriptionListTitleStyles } from './description_list_title.styles'; import { EuiDescriptionListContext } from './description_list_context'; @@ -24,6 +24,7 @@ export const EuiDescriptionListTitle: FunctionComponent< const { type, textStyle, compressed, align, gutterSize } = useContext( EuiDescriptionListContext ); + const showResponsiveColumns = useIsWithinBreakpoints(['xs', 's']); const theme = useEuiTheme(); const styles = euiDescriptionListTitleStyles(theme); @@ -38,9 +39,13 @@ export const EuiDescriptionListTitle: FunctionComponent< conditionalStyles = compressed ? [styles.inlineStyles.compressed] : [styles.inlineStyles.normal]; + conditionalStyles.push(styles[gutterSize]); + break; + case 'row': + conditionalStyles.push(styles[gutterSize]); break; - case 'responsiveColumn': + showResponsiveColumns && conditionalStyles.push(styles[gutterSize]); case 'column': if (align === 'center') { conditionalStyles.push(styles.right); @@ -51,7 +56,6 @@ export const EuiDescriptionListTitle: FunctionComponent< const cssStyles = [ styles.euiDescriptionList__title, styles[type], - styles[gutterSize], ...conditionalStyles, ]; From fc12fe6880c14e60d54d2594df07751270aaeb76 Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Mon, 21 Aug 2023 16:48:49 +0200 Subject: [PATCH 22/40] update context --- src/components/description_list/description_list.tsx | 2 +- src/components/description_list/description_list_context.tsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx index 2c5b3843934..09b2efb9337 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -75,7 +75,7 @@ export const EuiDescriptionList: FunctionComponent< return (
{childrenOrListItems} diff --git a/src/components/description_list/description_list_context.tsx b/src/components/description_list/description_list_context.tsx index 60dbf37debc..86cebbfe62a 100644 --- a/src/components/description_list/description_list_context.tsx +++ b/src/components/description_list/description_list_context.tsx @@ -13,7 +13,6 @@ type EuiDescriptionListContextValues = Required< Pick > & { compressed?: EuiDescriptionListProps['compressed']; - columnGap?: EuiDescriptionListProps['columnGap']; }; export const contextDefaults: EuiDescriptionListContextValues = { @@ -21,7 +20,6 @@ export const contextDefaults: EuiDescriptionListContextValues = { textStyle: 'normal', align: 'left', gutterSize: 'm', - columnGap: 'm', }; export const EuiDescriptionListContext = From 4ec06df2aa83b8c3418576181c7d00c9254140a6 Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Mon, 21 Aug 2023 17:17:54 +0200 Subject: [PATCH 23/40] update tests --- .../description_list/description_list_context.tsx | 2 +- upcoming_changelogs/7062.md | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/description_list/description_list_context.tsx b/src/components/description_list/description_list_context.tsx index 86cebbfe62a..258c765d940 100644 --- a/src/components/description_list/description_list_context.tsx +++ b/src/components/description_list/description_list_context.tsx @@ -19,7 +19,7 @@ export const contextDefaults: EuiDescriptionListContextValues = { type: 'row', textStyle: 'normal', align: 'left', - gutterSize: 'm', + gutterSize: 's', }; export const EuiDescriptionListContext = diff --git a/upcoming_changelogs/7062.md b/upcoming_changelogs/7062.md index 77de087b1a7..fee0fda9234 100644 --- a/upcoming_changelogs/7062.md +++ b/upcoming_changelogs/7062.md @@ -1 +1,5 @@ -- Updated `euiDescriptionList` with new `columnGap` prop \ No newline at end of file +- Updated `euiDescriptionList` with new `columnGap` prop + +**Breaking changes** + +- `max-inline-size` of both `title` and `description` applied \ No newline at end of file From 56a791dd11cbc117a7d93f7e829f7a76d32e528e Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Tue, 22 Aug 2023 11:32:16 +0200 Subject: [PATCH 24/40] update tests --- .../description_list_title.test.tsx.snap | 12 ++++++------ .../description_list_title.styles.ts | 4 +++- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/description_list/__snapshots__/description_list_title.test.tsx.snap b/src/components/description_list/__snapshots__/description_list_title.test.tsx.snap index 715729ac070..58cdcfdc398 100644 --- a/src/components/description_list/__snapshots__/description_list_title.test.tsx.snap +++ b/src/components/description_list/__snapshots__/description_list_title.test.tsx.snap @@ -2,19 +2,19 @@ exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations align center alignment is rendered 1`] = `
`; exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations compressed is rendered 1`] = `
`; exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations text styles reversed text is rendered 1`] = `
`; @@ -26,7 +26,7 @@ exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type co exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type inline is rendered 1`] = `
`; @@ -38,14 +38,14 @@ exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type re exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type row is rendered 1`] = `
`; exports[`EuiDescriptionListTitle is rendered 1`] = `
Content diff --git a/src/components/description_list/description_list_title.styles.ts b/src/components/description_list/description_list_title.styles.ts index 6e736805938..d2ae36a43e1 100644 --- a/src/components/description_list/description_list_title.styles.ts +++ b/src/components/description_list/description_list_title.styles.ts @@ -42,11 +42,13 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { border-radius: ${euiTheme.border.radius.small}; font-weight: ${euiTheme.font.weight.medium}; background-color: ${colorMode === 'DARK' - ? tint(euiTheme.colors.lightestShade, 0.5) + ? euiTheme.colors.fullShade : euiTheme.colors.lightestShade}; ${logicalCSS('margin-vertical', '0')} ${logicalCSS('margin-horizontal', euiTheme.size.xs)} + ${colorMode === 'DARK' && `color: ${euiTheme.colors.text};`} + /* Make sure the first
doesn't get a margin */ &:first-of-type { ${logicalCSS('margin-left', '0')} From 521b4d7ca2efd1b3fcc7ffccbc57af111f83a85a Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 22 Aug 2023 10:47:01 -0700 Subject: [PATCH 25/40] Fix lint complaint --- .../description_list/description_list_title.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/description_list/description_list_title.styles.ts b/src/components/description_list/description_list_title.styles.ts index d2ae36a43e1..0d6a2fe4e28 100644 --- a/src/components/description_list/description_list_title.styles.ts +++ b/src/components/description_list/description_list_title.styles.ts @@ -13,7 +13,7 @@ import { logicalTextAlignCSS, logicalCSS, } from '../../global_styling'; -import { tint, UseEuiTheme } from '../../services'; +import { UseEuiTheme } from '../../services'; import { euiTitle } from '../title/title.styles'; export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { From a78ec7a55dad038b81db35671f4b71a8432b5108 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 22 Aug 2023 10:55:58 -0700 Subject: [PATCH 26/40] CSS cleanup - fix missing `max-inline-size` - needed to use `:` and not a `=` - move max-width const outside of fn (micro-perf) - remove `column-display` const, just repeat the logic since it's one line and the important information is already a const --- .../description_list_description.styles.ts | 12 ++++-------- .../description_list_title.styles.ts | 11 ++++------- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/src/components/description_list/description_list_description.styles.ts b/src/components/description_list/description_list_description.styles.ts index 1604e120049..b48b036e059 100644 --- a/src/components/description_list/description_list_description.styles.ts +++ b/src/components/description_list/description_list_description.styles.ts @@ -17,22 +17,18 @@ import { import { UseEuiTheme } from '../../services'; import { euiTitle } from '../title/title.styles'; +const COLUMN_MAX_WIDTH = '55ch'; // Is this intentional? I was under the impression we were only setting a max-width on titles + export const euiDescriptionListDescriptionStyles = ( euiThemeContext: UseEuiTheme ) => { - const TEXT_MAX_WIDTH = '55ch'; - - const columnDisplay = ` - max-inline-size = ${TEXT_MAX_WIDTH}; - `; - return { euiDescriptionList__description: css``, // Types row: css``, column: css` - ${columnDisplay} + max-inline-size: ${COLUMN_MAX_WIDTH}; `, responsiveColumn: css` ${euiMaxBreakpoint(euiThemeContext, 'm')} { @@ -40,7 +36,7 @@ export const euiDescriptionListDescriptionStyles = ( padding: 0; } ${euiMinBreakpoint(euiThemeContext, 'm')} { - ${columnDisplay} + max-inline-size: ${COLUMN_MAX_WIDTH}; } `, inline: css` diff --git a/src/components/description_list/description_list_title.styles.ts b/src/components/description_list/description_list_title.styles.ts index 0d6a2fe4e28..72504174cc7 100644 --- a/src/components/description_list/description_list_title.styles.ts +++ b/src/components/description_list/description_list_title.styles.ts @@ -16,14 +16,11 @@ import { import { UseEuiTheme } from '../../services'; import { euiTitle } from '../title/title.styles'; +const COLUMN_MAX_WIDTH = '55ch'; + export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme, colorMode } = euiThemeContext; - const TEXT_MAX_WIDTH = '55ch'; - - const columnDisplay = ` - max-inline-size = ${TEXT_MAX_WIDTH}; - `; return { euiDescriptionList__title: css` ${euiTextBreakWord()} @@ -32,10 +29,10 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { // Types row: css``, column: css` - ${columnDisplay} + max-inline-size: ${COLUMN_MAX_WIDTH}; `, responsiveColumn: css` - ${columnDisplay} + max-inline-size: ${COLUMN_MAX_WIDTH}; `, inline: css` display: inline; From 3e1ad21b8a515e36c694ee7ece89cf664ffa5cd2 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 22 Aug 2023 12:38:48 -0700 Subject: [PATCH 27/40] [REFACTOR] Remove `responsiveColumn` CSS entirely, and instead use JS breakpoint logic to determine whether type is a row or a column - since that is basically the logic that's happening, and we're repeating CSS a lot by handling it there instead of in JS + opinionated - reorder imports by most to least generic --- .../description_list.test.tsx.snap | 11 +++++-- .../description_list.styles.ts | 19 +++--------- .../description_list.test.tsx | 31 ++++++++++++++++++- .../description_list/description_list.tsx | 23 +++++++++----- 4 files changed, 58 insertions(+), 26 deletions(-) diff --git a/src/components/description_list/__snapshots__/description_list.test.tsx.snap b/src/components/description_list/__snapshots__/description_list.test.tsx.snap index 92b86dad7bd..a46e12f70de 100644 --- a/src/components/description_list/__snapshots__/description_list.test.tsx.snap +++ b/src/components/description_list/__snapshots__/description_list.test.tsx.snap @@ -212,9 +212,16 @@ exports[`EuiDescriptionList props type inline is rendered 1`] = ` /> `; -exports[`EuiDescriptionList props type responsiveColumn is rendered 1`] = ` +exports[`EuiDescriptionList props type responsiveColumn renders a column when the current window is above the responsive breakpoints 1`] = `
+`; + +exports[`EuiDescriptionList props type responsiveColumn renders a row when the current window is within the responsive breakpoints 1`] = ` +
`; diff --git a/src/components/description_list/description_list.styles.ts b/src/components/description_list/description_list.styles.ts index 055980dc548..a29b3c9d23f 100644 --- a/src/components/description_list/description_list.styles.ts +++ b/src/components/description_list/description_list.styles.ts @@ -7,17 +7,10 @@ */ import { css } from '@emotion/react'; -import { logicalTextAlignCSS, euiMinBreakpoint } from '../../global_styling'; +import { logicalTextAlignCSS } from '../../global_styling'; import { UseEuiTheme } from '../../services'; export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { - // Grid display for column and responsive column - const columnDisplay = ` - display: grid; - grid-template-columns: minmax(auto, max-content) minmax(auto, max-content); - align-items: baseline; - `; - return { euiDescriptionList: css``, @@ -25,13 +18,9 @@ export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => { row: css``, inline: css``, column: css` - ${columnDisplay} - `, - // Responsive columns behave as a row on breakpoints xs-s - responsiveColumn: css` - ${euiMinBreakpoint(euiThemeContext, 'm')} { - ${columnDisplay} - } + display: grid; + grid-template-columns: minmax(auto, max-content) minmax(auto, max-content); + align-items: baseline; `, columnGap: { s: css` diff --git a/src/components/description_list/description_list.test.tsx b/src/components/description_list/description_list.test.tsx index 23cd12f1258..8cf5ee87cb0 100644 --- a/src/components/description_list/description_list.test.tsx +++ b/src/components/description_list/description_list.test.tsx @@ -11,6 +11,13 @@ import { requiredProps } from '../../test/required_props'; import { render } from '../../test/rtl'; import { shouldRenderCustomStyles } from '../../test/internal'; +jest.mock('../../services', () => ({ + ...jest.requireActual('../../services'), + useIsWithinBreakpoints: jest.fn(), +})); +import * as services from '../../services'; +const mockUseIsWithinBreakpoints = services.useIsWithinBreakpoints as jest.Mock; + import { EuiDescriptionList } from './description_list'; import { TYPES, @@ -95,13 +102,35 @@ describe('EuiDescriptionList', () => { }); describe('type', () => { - TYPES.forEach((type) => { + TYPES.filter((type) => type !== 'responsiveColumn').forEach((type) => { test(`${type} is rendered`, () => { const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); }); + + describe('responsiveColumn', () => { + it('renders a row when the current window is within the responsive breakpoints', () => { + mockUseIsWithinBreakpoints.mockReturnValue(true); + const { container } = render( + + ); + + expect(container.firstElementChild!.className).toContain('row'); + expect(container.firstChild).toMatchSnapshot(); + }); + + it('renders a column when the current window is above the responsive breakpoints', () => { + mockUseIsWithinBreakpoints.mockReturnValue(false); + const { container } = render( + + ); + + expect(container.firstElementChild!.className).toContain('column'); + expect(container.firstChild).toMatchSnapshot(); + }); + }); }); describe('align', () => { diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx index 09b2efb9337..284517cb27e 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { HTMLAttributes, FunctionComponent } from 'react'; +import React, { HTMLAttributes, FunctionComponent, useMemo } from 'react'; import classNames from 'classnames'; import { EuiDescriptionListTitle } from './description_list_title'; @@ -14,7 +14,7 @@ import { EuiDescriptionListTitle } from './description_list_title'; import { EuiDescriptionListDescription } from './description_list_description'; import { CommonProps } from '../common'; -import { useEuiTheme } from '../../services'; +import { useEuiTheme, useIsWithinBreakpoints } from '../../services'; import { euiDescriptionListStyles } from './description_list.styles'; import { EuiDescriptionListProps } from './description_list_types'; @@ -32,22 +32,29 @@ export const EuiDescriptionList: FunctionComponent< listItems, textStyle = 'normal', titleProps, - type = 'row', + type: _type = 'row', gutterSize = 's', columnGap = 's', ...rest }) => { + const showResponsiveColumns = useIsWithinBreakpoints(['xs', 's']); + const type = useMemo(() => { + if (_type === 'responsiveColumn') { + return showResponsiveColumns ? 'row' : 'column'; + } else { + return _type; + } + }, [_type, showResponsiveColumns]); + const euiTheme = useEuiTheme(); const styles = euiDescriptionListStyles(euiTheme); - const isColumnDisplay = type === 'column' || type === 'responsiveColumn'; - const cssStyles = [ styles.euiDescriptionList, styles[type], styles[align], - isColumnDisplay && styles.rowGap[gutterSize], - isColumnDisplay && styles.columnGap[columnGap], + type === 'column' && styles.rowGap[gutterSize], + type === 'column' && styles.columnGap[columnGap], ]; const classes = classNames('euiDescriptionList', className); @@ -77,7 +84,7 @@ export const EuiDescriptionList: FunctionComponent< -
+
{childrenOrListItems}
From 0f462d5f48406f6ae9472ccc5c6232d7de9645fc Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 22 Aug 2023 12:41:20 -0700 Subject: [PATCH 28/40] [REFACTOR] Remove `responsiveColumns` CSS & logic from child components - the logic should simply be inherited from the parent description list --- .../description_list_description.styles.ts | 17 +---------------- .../description_list_title.styles.ts | 3 --- .../description_list/description_list_title.tsx | 5 +---- 3 files changed, 2 insertions(+), 23 deletions(-) diff --git a/src/components/description_list/description_list_description.styles.ts b/src/components/description_list/description_list_description.styles.ts index b48b036e059..45b19826af3 100644 --- a/src/components/description_list/description_list_description.styles.ts +++ b/src/components/description_list/description_list_description.styles.ts @@ -7,13 +7,7 @@ */ import { css } from '@emotion/react'; -import { - euiFontSize, - euiMaxBreakpoint, - euiMinBreakpoint, - logicalTextAlignCSS, - logicalCSS, -} from '../../global_styling'; +import { euiFontSize, logicalTextAlignCSS } from '../../global_styling'; import { UseEuiTheme } from '../../services'; import { euiTitle } from '../title/title.styles'; @@ -30,15 +24,6 @@ export const euiDescriptionListDescriptionStyles = ( column: css` max-inline-size: ${COLUMN_MAX_WIDTH}; `, - responsiveColumn: css` - ${euiMaxBreakpoint(euiThemeContext, 'm')} { - ${logicalCSS('width', '100%')} - padding: 0; - } - ${euiMinBreakpoint(euiThemeContext, 'm')} { - max-inline-size: ${COLUMN_MAX_WIDTH}; - } - `, inline: css` display: inline; `, diff --git a/src/components/description_list/description_list_title.styles.ts b/src/components/description_list/description_list_title.styles.ts index 72504174cc7..844e5881916 100644 --- a/src/components/description_list/description_list_title.styles.ts +++ b/src/components/description_list/description_list_title.styles.ts @@ -31,9 +31,6 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { column: css` max-inline-size: ${COLUMN_MAX_WIDTH}; `, - responsiveColumn: css` - max-inline-size: ${COLUMN_MAX_WIDTH}; - `, inline: css` display: inline; border-radius: ${euiTheme.border.radius.small}; diff --git a/src/components/description_list/description_list_title.tsx b/src/components/description_list/description_list_title.tsx index 90367f5497c..14814a27e18 100644 --- a/src/components/description_list/description_list_title.tsx +++ b/src/components/description_list/description_list_title.tsx @@ -9,7 +9,7 @@ import React, { HTMLAttributes, FunctionComponent, useContext } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../common'; -import { useEuiTheme, useIsWithinBreakpoints } from '../../services'; +import { useEuiTheme } from '../../services'; import { euiDescriptionListTitleStyles } from './description_list_title.styles'; import { EuiDescriptionListContext } from './description_list_context'; @@ -24,7 +24,6 @@ export const EuiDescriptionListTitle: FunctionComponent< const { type, textStyle, compressed, align, gutterSize } = useContext( EuiDescriptionListContext ); - const showResponsiveColumns = useIsWithinBreakpoints(['xs', 's']); const theme = useEuiTheme(); const styles = euiDescriptionListTitleStyles(theme); @@ -44,8 +43,6 @@ export const EuiDescriptionListTitle: FunctionComponent< case 'row': conditionalStyles.push(styles[gutterSize]); break; - case 'responsiveColumn': - showResponsiveColumns && conditionalStyles.push(styles[gutterSize]); case 'column': if (align === 'center') { conditionalStyles.push(styles.right); From 7388ea2c3424e9644567f7d4fe7a163309a7ebd5 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 22 Aug 2023 12:42:59 -0700 Subject: [PATCH 29/40] [refactor] update child types and tests - context should use types minus `responsiveColumn` --- .../description_list_description.test.tsx.snap | 6 ------ .../__snapshots__/description_list_title.test.tsx.snap | 6 ------ .../description_list/description_list_context.tsx | 9 +++++++-- .../description_list_description.test.tsx | 4 ++-- .../description_list/description_list_title.test.tsx | 4 ++-- .../description_list/description_list_types.ts | 5 ++++- 6 files changed, 15 insertions(+), 19 deletions(-) diff --git a/src/components/description_list/__snapshots__/description_list_description.test.tsx.snap b/src/components/description_list/__snapshots__/description_list_description.test.tsx.snap index 1d2d0bb2905..c3dfbdd845e 100644 --- a/src/components/description_list/__snapshots__/description_list_description.test.tsx.snap +++ b/src/components/description_list/__snapshots__/description_list_description.test.tsx.snap @@ -30,12 +30,6 @@ exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variat /> `; -exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variations type responsiveColumn is rendered 1`] = ` -
-`; - exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variations type row is rendered 1`] = `
`; -exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type responsiveColumn is rendered 1`] = ` -
-`; - exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type row is rendered 1`] = `
+ Pick & { + type: EuiDescriptionListChildTypes; + } > & { compressed?: EuiDescriptionListProps['compressed']; }; diff --git a/src/components/description_list/description_list_description.test.tsx b/src/components/description_list/description_list_description.test.tsx index 1e4988debab..5f46c2a2175 100644 --- a/src/components/description_list/description_list_description.test.tsx +++ b/src/components/description_list/description_list_description.test.tsx @@ -12,7 +12,7 @@ import { requiredProps } from '../../test/required_props'; import { render } from '../../test/rtl'; import { EuiDescriptionListDescription } from './description_list_description'; -import { TYPES } from './description_list_types'; +import { CHILD_TYPES } from './description_list_types'; import { EuiDescriptionListContext, contextDefaults, @@ -33,7 +33,7 @@ describe('EuiDescriptionListDescription', () => { describe('EuiDescriptionListDescription prop variations', () => { describe('type', () => { - TYPES.forEach((type) => { + CHILD_TYPES.forEach((type) => { test(`${type} is rendered`, () => { const { container } = render( { describe('EuiDescriptionListTitle prop variations', () => { describe('type', () => { - TYPES.forEach((type) => { + CHILD_TYPES.forEach((type) => { test(`${type} is rendered`, () => { const { container } = render( Date: Tue, 22 Aug 2023 12:43:41 -0700 Subject: [PATCH 30/40] misc newline nits - reorder imports - prefer ordering most generic to most specific, and using newlines to group --- src/components/description_list/description_list.tsx | 11 ++++------- .../description_list/description_list_description.tsx | 6 +++--- .../description_list/description_list_title.tsx | 4 +++- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx index 284517cb27e..e596da33019 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -9,17 +9,14 @@ import React, { HTMLAttributes, FunctionComponent, useMemo } from 'react'; import classNames from 'classnames'; -import { EuiDescriptionListTitle } from './description_list_title'; - -import { EuiDescriptionListDescription } from './description_list_description'; -import { CommonProps } from '../common'; - import { useEuiTheme, useIsWithinBreakpoints } from '../../services'; -import { euiDescriptionListStyles } from './description_list.styles'; +import { CommonProps } from '../common'; import { EuiDescriptionListProps } from './description_list_types'; - import { EuiDescriptionListContext } from './description_list_context'; +import { EuiDescriptionListTitle } from './description_list_title'; +import { EuiDescriptionListDescription } from './description_list_description'; +import { euiDescriptionListStyles } from './description_list.styles'; export const EuiDescriptionList: FunctionComponent< CommonProps & HTMLAttributes & EuiDescriptionListProps diff --git a/src/components/description_list/description_list_description.tsx b/src/components/description_list/description_list_description.tsx index 399fed41699..e39881d1978 100644 --- a/src/components/description_list/description_list_description.tsx +++ b/src/components/description_list/description_list_description.tsx @@ -8,10 +8,12 @@ import React, { HTMLAttributes, FunctionComponent, useContext } from 'react'; import classNames from 'classnames'; + import { CommonProps } from '../common'; import { useEuiTheme } from '../../services'; -import { euiDescriptionListDescriptionStyles } from './description_list_description.styles'; + import { EuiDescriptionListContext } from './description_list_context'; +import { euiDescriptionListDescriptionStyles } from './description_list_description.styles'; // Export required for correct inference by HOCs export interface EuiDescriptionListDescriptionProps @@ -39,12 +41,10 @@ export const EuiDescriptionListDescription: FunctionComponent< ? [styles.inlineStyles.compressed] : [styles.inlineStyles.normal]; break; - case 'column': if (align === 'center') { conditionalStyles.push(styles.left); } - break; } diff --git a/src/components/description_list/description_list_title.tsx b/src/components/description_list/description_list_title.tsx index 14814a27e18..8dc03193835 100644 --- a/src/components/description_list/description_list_title.tsx +++ b/src/components/description_list/description_list_title.tsx @@ -8,10 +8,12 @@ import React, { HTMLAttributes, FunctionComponent, useContext } from 'react'; import classNames from 'classnames'; + import { CommonProps } from '../common'; import { useEuiTheme } from '../../services'; -import { euiDescriptionListTitleStyles } from './description_list_title.styles'; + import { EuiDescriptionListContext } from './description_list_context'; +import { euiDescriptionListTitleStyles } from './description_list_title.styles'; // Export required for correct inference by HOCs export interface EuiDescriptionListTitleProps From 95641d0078bd01c5d4138c6f4ed95c5afe638337 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 22 Aug 2023 12:58:41 -0700 Subject: [PATCH 31/40] Fix row/column gap tests - props weren't doing anything without the correct type + fix variable to use camelCasing and not snake_casing --- .../__snapshots__/description_list.test.tsx.snap | 16 ++++++++-------- .../description_list/description_list.test.tsx | 8 ++++---- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/description_list/__snapshots__/description_list.test.tsx.snap b/src/components/description_list/__snapshots__/description_list.test.tsx.snap index a46e12f70de..41349b81774 100644 --- a/src/components/description_list/__snapshots__/description_list.test.tsx.snap +++ b/src/components/description_list/__snapshots__/description_list.test.tsx.snap @@ -69,15 +69,15 @@ exports[`EuiDescriptionList props align left is rendered 1`] = ` exports[`EuiDescriptionList props column gap m is rendered 1`] = `
`; exports[`EuiDescriptionList props column gap s is rendered 1`] = `
`; @@ -90,15 +90,15 @@ exports[`EuiDescriptionList props compressed is rendered 1`] = ` exports[`EuiDescriptionList props gutter m is rendered 1`] = `
`; exports[`EuiDescriptionList props gutter s is rendered 1`] = `
`; diff --git a/src/components/description_list/description_list.test.tsx b/src/components/description_list/description_list.test.tsx index 8cf5ee87cb0..b9b4c4c8bcd 100644 --- a/src/components/description_list/description_list.test.tsx +++ b/src/components/description_list/description_list.test.tsx @@ -149,7 +149,7 @@ describe('EuiDescriptionList', () => { GUTTER_SIZES.forEach((gutter) => { test(`${gutter} is rendered`, () => { const { container } = render( - + ); expect(container.firstChild).toMatchSnapshot(); @@ -158,10 +158,10 @@ describe('EuiDescriptionList', () => { }); describe('column gap', () => { - COLUMN_GAP_SIZES.forEach((column_gap) => { - test(`${column_gap} is rendered`, () => { + COLUMN_GAP_SIZES.forEach((columnGap) => { + test(`${columnGap} is rendered`, () => { const { container } = render( - + ); expect(container.firstChild).toMatchSnapshot(); From 06ba99a70374e92c084c3e6834f806c05b4d765e Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 22 Aug 2023 13:13:52 -0700 Subject: [PATCH 32/40] [BREAKING CHANGE] Prop renames - todo: remaining changelog items --- .../description_list.test.tsx | 17 ++++++++++------- .../description_list/description_list.tsx | 10 +++++----- .../description_list_context.tsx | 4 ++-- .../description_list_title.tsx | 6 +++--- .../description_list_types.ts | 19 ++++++++++--------- upcoming_changelogs/7062.md | 4 ++-- 6 files changed, 32 insertions(+), 28 deletions(-) diff --git a/src/components/description_list/description_list.test.tsx b/src/components/description_list/description_list.test.tsx index b9b4c4c8bcd..5c9b9a59335 100644 --- a/src/components/description_list/description_list.test.tsx +++ b/src/components/description_list/description_list.test.tsx @@ -22,8 +22,8 @@ import { EuiDescriptionList } from './description_list'; import { TYPES, ALIGNMENTS, - GUTTER_SIZES, - COLUMN_GAP_SIZES, + ROW_GUTTER_SIZES, + COLUMN_GUTTER_SIZES, } from './description_list_types'; describe('EuiDescriptionList', () => { @@ -146,10 +146,10 @@ describe('EuiDescriptionList', () => { }); describe('gutter', () => { - GUTTER_SIZES.forEach((gutter) => { + ROW_GUTTER_SIZES.forEach((gutter) => { test(`${gutter} is rendered`, () => { const { container } = render( - + ); expect(container.firstChild).toMatchSnapshot(); @@ -158,10 +158,13 @@ describe('EuiDescriptionList', () => { }); describe('column gap', () => { - COLUMN_GAP_SIZES.forEach((columnGap) => { - test(`${columnGap} is rendered`, () => { + COLUMN_GUTTER_SIZES.forEach((columnGutterSize) => { + test(`${columnGutterSize} is rendered`, () => { const { container } = render( - + ); expect(container.firstChild).toMatchSnapshot(); diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx index e596da33019..75862b8a883 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -30,8 +30,8 @@ export const EuiDescriptionList: FunctionComponent< textStyle = 'normal', titleProps, type: _type = 'row', - gutterSize = 's', - columnGap = 's', + rowGutterSize = 's', + columnGutterSize = 's', ...rest }) => { const showResponsiveColumns = useIsWithinBreakpoints(['xs', 's']); @@ -50,8 +50,8 @@ export const EuiDescriptionList: FunctionComponent< styles.euiDescriptionList, styles[type], styles[align], - type === 'column' && styles.rowGap[gutterSize], - type === 'column' && styles.columnGap[columnGap], + type === 'column' && styles.rowGap[rowGutterSize], + type === 'column' && styles.columnGap[columnGutterSize], ]; const classes = classNames('euiDescriptionList', className); @@ -79,7 +79,7 @@ export const EuiDescriptionList: FunctionComponent< return (
{childrenOrListItems} diff --git a/src/components/description_list/description_list_context.tsx b/src/components/description_list/description_list_context.tsx index 5af145d8e4e..b2440347f72 100644 --- a/src/components/description_list/description_list_context.tsx +++ b/src/components/description_list/description_list_context.tsx @@ -13,7 +13,7 @@ import { } from './description_list_types'; type EuiDescriptionListContextValues = Required< - Pick & { + Pick & { type: EuiDescriptionListChildTypes; } > & { @@ -24,7 +24,7 @@ export const contextDefaults: EuiDescriptionListContextValues = { type: 'row', textStyle: 'normal', align: 'left', - gutterSize: 's', + rowGutterSize: 's', }; export const EuiDescriptionListContext = diff --git a/src/components/description_list/description_list_title.tsx b/src/components/description_list/description_list_title.tsx index 8dc03193835..877bdab3b03 100644 --- a/src/components/description_list/description_list_title.tsx +++ b/src/components/description_list/description_list_title.tsx @@ -23,7 +23,7 @@ export interface EuiDescriptionListTitleProps export const EuiDescriptionListTitle: FunctionComponent< EuiDescriptionListTitleProps > = ({ children, className, ...rest }) => { - const { type, textStyle, compressed, align, gutterSize } = useContext( + const { type, textStyle, compressed, align, rowGutterSize } = useContext( EuiDescriptionListContext ); @@ -40,10 +40,10 @@ export const EuiDescriptionListTitle: FunctionComponent< conditionalStyles = compressed ? [styles.inlineStyles.compressed] : [styles.inlineStyles.normal]; - conditionalStyles.push(styles[gutterSize]); + conditionalStyles.push(styles[rowGutterSize]); break; case 'row': - conditionalStyles.push(styles[gutterSize]); + conditionalStyles.push(styles[rowGutterSize]); break; case 'column': if (align === 'center') { diff --git a/src/components/description_list/description_list_types.ts b/src/components/description_list/description_list_types.ts index aa047eeba7f..0f5ad635f35 100644 --- a/src/components/description_list/description_list_types.ts +++ b/src/components/description_list/description_list_types.ts @@ -40,14 +40,15 @@ export interface EuiDescriptionListProps { */ descriptionProps?: HTMLAttributes & CommonProps; /** - * Vertical spacing added between `EuiDescriptionList` elements + * Allows customizing the vertical spacing between rows. */ - gutterSize?: EuiDescriptionListGutterSizes; + rowGutterSize?: EuiDescriptionListGutterSizes; /** - * Only applies to `column`/`responsiveColumn` description lists. - * Allows customizing the horizontal gap between columns. + * Allows customizing the horizontal spacing between columns. + * + * Only applies to `column` and `responsiveColumn` types. */ - columnGap?: EuiDescriptionListColumnGapSizes; + columnGutterSize?: EuiDescriptionListColumnGapSizes; } export const CHILD_TYPES = ['row', 'inline', 'column'] as const; @@ -62,9 +63,9 @@ export type EuiDescriptionListAlignment = (typeof ALIGNMENTS)[number]; export const TEXT_STYLES = ['normal', 'reverse'] as const; export type EuiDescriptionListTextStyle = (typeof TEXT_STYLES)[number]; -export const GUTTER_SIZES = ['s', 'm'] as const; -export type EuiDescriptionListGutterSizes = (typeof GUTTER_SIZES)[number]; +export const ROW_GUTTER_SIZES = ['s', 'm'] as const; +export type EuiDescriptionListGutterSizes = (typeof ROW_GUTTER_SIZES)[number]; -export const COLUMN_GAP_SIZES = ['s', 'm'] as const; +export const COLUMN_GUTTER_SIZES = ['s', 'm'] as const; export type EuiDescriptionListColumnGapSizes = - (typeof COLUMN_GAP_SIZES)[number]; + (typeof COLUMN_GUTTER_SIZES)[number]; diff --git a/upcoming_changelogs/7062.md b/upcoming_changelogs/7062.md index fee0fda9234..d075a9bb40c 100644 --- a/upcoming_changelogs/7062.md +++ b/upcoming_changelogs/7062.md @@ -1,5 +1,5 @@ -- Updated `euiDescriptionList` with new `columnGap` prop +- Updated `EuiDescriptionList` with a new `columnGutterSize` prop **Breaking changes** -- `max-inline-size` of both `title` and `description` applied \ No newline at end of file +- Renamed `EuiDescriptionList`'s `gutterSize` prop to `rowGutterSize` From 3e4d1f12019fd829b4b972948aefa7d12eff695b Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 22 Aug 2023 13:14:54 -0700 Subject: [PATCH 33/40] Update datagrid usage - since `s` is the new row gutter size default, no need to specify it --- src/components/datagrid/controls/keyboard_shortcuts.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/datagrid/controls/keyboard_shortcuts.tsx b/src/components/datagrid/controls/keyboard_shortcuts.tsx index 9d01a3ceb79..c6b374dfcac 100644 --- a/src/components/datagrid/controls/keyboard_shortcuts.tsx +++ b/src/components/datagrid/controls/keyboard_shortcuts.tsx @@ -53,7 +53,6 @@ export const useDataGridKeyboardShortcuts = (): { type="column" align="center" compressed - gutterSize="s" listItems={[ { title: ( From 5710c75cce93f40eeb8299357f5d1b04443007f3 Mon Sep 17 00:00:00 2001 From: Kyriakos Spiliotopoulos <92029479+kyrspl@users.noreply.github.com> Date: Wed, 23 Aug 2023 17:21:13 +0200 Subject: [PATCH 34/40] Update src/components/description_list/description_list_title.styles.ts --- .../description_list/description_list_title.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/description_list/description_list_title.styles.ts b/src/components/description_list/description_list_title.styles.ts index 844e5881916..9fa2bcc4789 100644 --- a/src/components/description_list/description_list_title.styles.ts +++ b/src/components/description_list/description_list_title.styles.ts @@ -41,7 +41,7 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { ${logicalCSS('margin-vertical', '0')} ${logicalCSS('margin-horizontal', euiTheme.size.xs)} - ${colorMode === 'DARK' && `color: ${euiTheme.colors.text};`} + ${colorMode === 'DARK' && `color: ${euiTheme.colors.title};`} /* Make sure the first
doesn't get a margin */ &:first-of-type { From 2b6a0cb1088c43ed17f329c4747a1e3021cd792d Mon Sep 17 00:00:00 2001 From: Kyriakos Spiliotopoulos <92029479+kyrspl@users.noreply.github.com> Date: Wed, 23 Aug 2023 19:17:19 +0200 Subject: [PATCH 35/40] Update src/components/description_list/description_list_title.styles.ts --- .../description_list/description_list_title.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/description_list/description_list_title.styles.ts b/src/components/description_list/description_list_title.styles.ts index 9fa2bcc4789..701285faaa2 100644 --- a/src/components/description_list/description_list_title.styles.ts +++ b/src/components/description_list/description_list_title.styles.ts @@ -36,7 +36,7 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { border-radius: ${euiTheme.border.radius.small}; font-weight: ${euiTheme.font.weight.medium}; background-color: ${colorMode === 'DARK' - ? euiTheme.colors.fullShade + ? euiTheme.colors.lightShade : euiTheme.colors.lightestShade}; ${logicalCSS('margin-vertical', '0')} ${logicalCSS('margin-horizontal', euiTheme.size.xs)} From 3f49cad817d1412bd7fa58d44deaac3482fcb04d Mon Sep 17 00:00:00 2001 From: Kyriakos Spiliotopoulos <92029479+kyrspl@users.noreply.github.com> Date: Wed, 23 Aug 2023 19:17:41 +0200 Subject: [PATCH 36/40] Update upcoming_changelogs/7062.md Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --- upcoming_changelogs/7062.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/upcoming_changelogs/7062.md b/upcoming_changelogs/7062.md index d075a9bb40c..010bd7449b5 100644 --- a/upcoming_changelogs/7062.md +++ b/upcoming_changelogs/7062.md @@ -3,3 +3,6 @@ **Breaking changes** - Renamed `EuiDescriptionList`'s `gutterSize` prop to `rowGutterSize` +- `EuiDescriptionList`'s `rowGutterSize` prop now defaults to a size of `s` (was previously `m`) +- `EuiDescriptionList` now applies a max width to both titles and descriptions. If necessary, this can be overridden with custom CSS. +- Inline `EuiDescriptionList` title colors have been tweaked slightly From eae95f4e9651e18ad966c5bb06ed2b49e94f509d Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 23 Aug 2023 16:00:46 -0700 Subject: [PATCH 37/40] [docs] Fix prop names + clean up var names and callbacks --- .../description_list_example.js | 6 +-- .../description_list_styling.js | 44 +++++++------------ 2 files changed, 19 insertions(+), 31 deletions(-) diff --git a/src-docs/src/views/description_list/description_list_example.js b/src-docs/src/views/description_list/description_list_example.js index 99267b328b5..c846252972d 100644 --- a/src-docs/src/views/description_list/description_list_example.js +++ b/src-docs/src/views/description_list/description_list_example.js @@ -249,15 +249,15 @@ export const DescriptionListExample = {

Vertical spacing

- Modify the gutterSize prop to control the + Modify the rowGutterSize prop to control the vertical spacing between EuiDescriptionList{' '} elements. This will not affect inline list types.

Horizontal spacing

Adjust the spacing between the title and description with the{' '} - columnGap prop. This will not affect inline or - row types. + columnGutterSize prop. This will not affect + inline or row types.

), diff --git a/src-docs/src/views/description_list/description_list_styling.js b/src-docs/src/views/description_list/description_list_styling.js index a3b366dbdc2..6b3f16194fa 100644 --- a/src-docs/src/views/description_list/description_list_styling.js +++ b/src-docs/src/views/description_list/description_list_styling.js @@ -40,11 +40,7 @@ export default () => { const [alignSelected, setAlignSelected] = useState('center'); - const alignOnChange = (id) => { - setAlignSelected(id); - }; - - const gutterToggleButtons = [ + const rowGutterSizeOptions = [ { id: 's', label: 'Small', @@ -55,13 +51,9 @@ export default () => { }, ]; - const [gutterSelected, setGutterSelected] = useState('m'); - - const gutterOnChange = (id) => { - setGutterSelected(id); - }; + const [rowGutterSize, setRowGutterSize] = useState('m'); - const columnGapToggleButtons = [ + const columnGutterSizeOptions = [ { id: 's', label: 'Small', @@ -72,11 +64,7 @@ export default () => { }, ]; - const [columnGapSelected, setColumnGapSelected] = useState('m'); - - const columnGapOnChange = (id) => { - setColumnGapSelected(id); - }; + const [columnGutterSize, setColumnGutterSize] = useState('m'); const [compressed, setCompressed] = useState(true); @@ -95,7 +83,7 @@ export default () => { legend="Toggle for the EuiDescription align prop" options={alignToggleButtons} idSelected={alignSelected} - onChange={(id) => alignOnChange(id)} + onChange={(id) => setAlignSelected(id)} /> @@ -104,10 +92,10 @@ export default () => {

Row gutter sizes

gutterOnChange(id)} + legend="Toggle for the EuiDescription rowGutterSize prop" + options={rowGutterSizeOptions} + idSelected={rowGutterSize} + onChange={(id) => setRowGutterSize(id)} /> @@ -116,10 +104,10 @@ export default () => {

Column gap sizes

columnGapOnChange(id)} + legend="Toggle for the EuiDescription columnGutterSize prop" + options={columnGutterSizeOptions} + idSelected={columnGutterSize} + onChange={(id) => setColumnGutterSize(id)} /> @@ -141,7 +129,7 @@ export default () => { listItems={favoriteVideoGames} align={alignSelected} compressed={compressed} - gutterSize={gutterSelected} + rowGutterSize={rowGutterSize} /> @@ -151,8 +139,8 @@ export default () => { type="column" align={alignSelected} compressed={compressed} - gutterSize={gutterSelected} - columnGap={columnGapSelected} + rowGutterSize={rowGutterSize} + columnGutterSize={columnGutterSize} /> From 024eb73daec5a2b8d1fe9b73c44e00c2ebafa2e0 Mon Sep 17 00:00:00 2001 From: Kyriakos Spiliotopoulos <92029479+kyrspl@users.noreply.github.com> Date: Thu, 24 Aug 2023 10:07:03 +0200 Subject: [PATCH 38/40] Update src/components/description_list/description_list_title.styles.ts --- .../description_list/description_list_title.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/description_list/description_list_title.styles.ts b/src/components/description_list/description_list_title.styles.ts index 701285faaa2..9a8da0a17e2 100644 --- a/src/components/description_list/description_list_title.styles.ts +++ b/src/components/description_list/description_list_title.styles.ts @@ -41,7 +41,7 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { ${logicalCSS('margin-vertical', '0')} ${logicalCSS('margin-horizontal', euiTheme.size.xs)} - ${colorMode === 'DARK' && `color: ${euiTheme.colors.title};`} + ${colorMode === 'DARK' && `color: ${euiTheme.colors.title};`} /* Make sure the first
doesn't get a margin */ &:first-of-type { From 4808e8159b0f0706714477122de4612352e95f94 Mon Sep 17 00:00:00 2001 From: Kyriakos Date: Thu, 24 Aug 2023 10:20:27 +0200 Subject: [PATCH 39/40] removed max-inline-size --- .../description_list/description_list_description.styles.ts | 6 +----- .../description_list/description_list_title.styles.ts | 6 +----- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/src/components/description_list/description_list_description.styles.ts b/src/components/description_list/description_list_description.styles.ts index 45b19826af3..4edf530a278 100644 --- a/src/components/description_list/description_list_description.styles.ts +++ b/src/components/description_list/description_list_description.styles.ts @@ -11,8 +11,6 @@ import { euiFontSize, logicalTextAlignCSS } from '../../global_styling'; import { UseEuiTheme } from '../../services'; import { euiTitle } from '../title/title.styles'; -const COLUMN_MAX_WIDTH = '55ch'; // Is this intentional? I was under the impression we were only setting a max-width on titles - export const euiDescriptionListDescriptionStyles = ( euiThemeContext: UseEuiTheme ) => { @@ -21,9 +19,7 @@ export const euiDescriptionListDescriptionStyles = ( // Types row: css``, - column: css` - max-inline-size: ${COLUMN_MAX_WIDTH}; - `, + column: css``, inline: css` display: inline; `, diff --git a/src/components/description_list/description_list_title.styles.ts b/src/components/description_list/description_list_title.styles.ts index 9a8da0a17e2..7f6647c1ec7 100644 --- a/src/components/description_list/description_list_title.styles.ts +++ b/src/components/description_list/description_list_title.styles.ts @@ -16,8 +16,6 @@ import { import { UseEuiTheme } from '../../services'; import { euiTitle } from '../title/title.styles'; -const COLUMN_MAX_WIDTH = '55ch'; - export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme, colorMode } = euiThemeContext; @@ -28,9 +26,7 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { // Types row: css``, - column: css` - max-inline-size: ${COLUMN_MAX_WIDTH}; - `, + column: css``, inline: css` display: inline; border-radius: ${euiTheme.border.radius.small}; From 0f4bed3b1d6a19d1ed7cae3af3a37db6542fab7b Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Thu, 24 Aug 2023 20:33:36 -0700 Subject: [PATCH 40/40] changelog --- upcoming_changelogs/7062.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/upcoming_changelogs/7062.md b/upcoming_changelogs/7062.md index 010bd7449b5..73700f0a68a 100644 --- a/upcoming_changelogs/7062.md +++ b/upcoming_changelogs/7062.md @@ -4,5 +4,7 @@ - Renamed `EuiDescriptionList`'s `gutterSize` prop to `rowGutterSize` - `EuiDescriptionList`'s `rowGutterSize` prop now defaults to a size of `s` (was previously `m`) -- `EuiDescriptionList` now applies a max width to both titles and descriptions. If necessary, this can be overridden with custom CSS. -- Inline `EuiDescriptionList` title colors have been tweaked slightly + +**Accessibility** + +- Fixed the dark mode colors of inline `EuiDescriptionListTitle`s to meet WCAG color contrast requirements