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.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', 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_example.js b/src-docs/src/views/description_list/description_list_example.js index db1ad0111c2..c846252972d 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,27 @@ 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 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{' '} + columnGutterSize prop. This will not affect + inline or row types. +

+ ), snippet: descriptionListStylingSnippet, demo: , 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 dd3d85c6abe..6b3f16194fa 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', @@ -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,11 +51,20 @@ export default () => { }, ]; - const [gutterSelected, setGutterSelected] = useState('m'); + const [rowGutterSize, setRowGutterSize] = useState('m'); - const gutterOnChange = (id) => { - setGutterSelected(id); - }; + const columnGutterSizeOptions = [ + { + id: 's', + label: 'Small', + }, + { + id: 'm', + label: 'Medium', + }, + ]; + + const [columnGutterSize, setColumnGutterSize] = useState('m'); const [compressed, setCompressed] = useState(true); @@ -78,7 +83,7 @@ export default () => { legend="Toggle for the EuiDescription align prop" options={alignToggleButtons} idSelected={alignSelected} - onChange={(id) => alignOnChange(id)} + onChange={(id) => setAlignSelected(id)} /> @@ -87,10 +92,22 @@ export default () => {

Row gutter sizes

gutterOnChange(id)} + legend="Toggle for the EuiDescription rowGutterSize prop" + options={rowGutterSizeOptions} + idSelected={rowGutterSize} + onChange={(id) => setRowGutterSize(id)} + /> + + + + +

Column gap sizes

+ + setColumnGutterSize(id)} /> @@ -112,7 +129,7 @@ export default () => { listItems={favoriteVideoGames} align={alignSelected} compressed={compressed} - gutterSize={gutterSelected} + rowGutterSize={rowGutterSize} /> @@ -122,7 +139,8 @@ export default () => { type="column" align={alignSelected} compressed={compressed} - gutterSize={gutterSelected} + rowGutterSize={rowGutterSize} + columnGutterSize={columnGutterSize} /> 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.
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..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/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: ( 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..41349b81774 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
@@ -67,6 +67,20 @@ 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 s is rendered 1`] = `
`; @@ -94,7 +108,7 @@ exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = ` data-type="row" >
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
@@ -143,7 +157,7 @@ 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,7 +200,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = ` exports[`EuiDescriptionList props type column is rendered 1`] = `
`; @@ -198,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/__snapshots__/description_list_description.test.tsx.snap b/src/components/description_list/__snapshots__/description_list_description.test.tsx.snap index a7798409ead..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 @@ -20,7 +20,7 @@ exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variat exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variations type column is rendered 1`] = `
`; @@ -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 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 4e93841489d..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) => { - // Flex display for column and responsive column - const columnDisplay = ` - display: flex; - align-items: baseline; - flex-wrap: wrap; - `; - return { euiDescriptionList: css``, @@ -25,15 +18,26 @@ 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` + column-gap: ${euiThemeContext.euiTheme.size.s}; + `, + m: css` + 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.test.tsx b/src/components/description_list/description_list.test.tsx index 577ac7f27c3..5c9b9a59335 100644 --- a/src/components/description_list/description_list.test.tsx +++ b/src/components/description_list/description_list.test.tsx @@ -11,8 +11,20 @@ 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, ALIGNMENTS, GUTTER_SIZES } from './description_list_types'; +import { + TYPES, + ALIGNMENTS, + ROW_GUTTER_SIZES, + COLUMN_GUTTER_SIZES, +} from './description_list_types'; describe('EuiDescriptionList', () => { shouldRenderCustomStyles( @@ -90,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', () => { @@ -112,10 +146,25 @@ describe('EuiDescriptionList', () => { }); describe('gutter', () => { - GUTTER_SIZES.forEach((gutter) => { + ROW_GUTTER_SIZES.forEach((gutter) => { test(`${gutter} is rendered`, () => { const { container } = render( - + + ); + + expect(container.firstChild).toMatchSnapshot(); + }); + }); + }); + + describe('column gap', () => { + 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 6f2d65a7e8a..75862b8a883 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -6,20 +6,17 @@ * 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'; - -import { EuiDescriptionListDescription } from './description_list_description'; +import { useEuiTheme, useIsWithinBreakpoints } from '../../services'; import { CommonProps } from '../common'; -import { useEuiTheme } from '../../services'; -import { euiDescriptionListStyles } from './description_list.styles'; - 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 @@ -32,14 +29,30 @@ export const EuiDescriptionList: FunctionComponent< listItems, textStyle = 'normal', titleProps, - type = 'row', - gutterSize = 'm', + type: _type = 'row', + rowGutterSize = 's', + columnGutterSize = '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 cssStyles = [styles.euiDescriptionList, styles[type], styles[align]]; + const cssStyles = [ + styles.euiDescriptionList, + styles[type], + styles[align], + type === 'column' && styles.rowGap[rowGutterSize], + type === 'column' && styles.columnGap[columnGutterSize], + ]; const classes = classNames('euiDescriptionList', className); @@ -66,9 +79,9 @@ 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..b2440347f72 100644 --- a/src/components/description_list/description_list_context.tsx +++ b/src/components/description_list/description_list_context.tsx @@ -7,17 +7,24 @@ */ import { createContext } from 'react'; -import { EuiDescriptionListProps } from './description_list_types'; +import { + EuiDescriptionListProps, + EuiDescriptionListChildTypes, +} from './description_list_types'; type EuiDescriptionListContextValues = Required< - Pick -> & { compressed?: EuiDescriptionListProps['compressed'] }; + Pick & { + type: EuiDescriptionListChildTypes; + } +> & { + compressed?: EuiDescriptionListProps['compressed']; +}; export const contextDefaults: EuiDescriptionListContextValues = { type: 'row', textStyle: 'normal', align: 'left', - gutterSize: 'm', + rowGutterSize: 's', }; 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..4edf530a278 100644 --- a/src/components/description_list/description_list_description.styles.ts +++ b/src/components/description_list/description_list_description.styles.ts @@ -7,43 +7,19 @@ */ 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'; export const euiDescriptionListDescriptionStyles = ( euiThemeContext: UseEuiTheme ) => { - const { euiTheme } = euiThemeContext; - - const columnDisplay = ` - ${logicalCSS('width', '50%')} - ${logicalCSS('padding-left', euiTheme.size.s)} - `; - return { euiDescriptionList__description: css``, // Types row: css``, - column: css` - ${columnDisplay} - `, - responsiveColumn: css` - ${euiMaxBreakpoint(euiThemeContext, 'm')} { - ${logicalCSS('width', '100%')} - padding: 0; - } - ${euiMinBreakpoint(euiThemeContext, 'm')} { - ${columnDisplay} - } - `, + column: css``, inline: css` display: inline; `, @@ -75,17 +51,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.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( = ({ 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); @@ -40,15 +41,10 @@ export const EuiDescriptionListDescription: FunctionComponent< ? [styles.inlineStyles.compressed] : [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 f114157c2a8..7f6647c1ec7 100644 --- a/src/components/description_list/description_list_title.styles.ts +++ b/src/components/description_list/description_list_title.styles.ts @@ -11,20 +11,14 @@ import { euiFontSize, euiTextBreakWord, logicalTextAlignCSS, - euiMaxBreakpoint, - euiMinBreakpoint, logicalCSS, } from '../../global_styling'; -import { tint, UseEuiTheme } from '../../services'; +import { UseEuiTheme } from '../../services'; import { euiTitle } from '../title/title.styles'; export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme, colorMode } = euiThemeContext; - const columnDisplay = ` - ${logicalCSS('width', '50%')} - ${logicalCSS('padding-right', euiTheme.size.s)} - `; return { euiDescriptionList__title: css` ${euiTextBreakWord()} @@ -32,28 +26,19 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { // Types row: css``, - column: css` - ${columnDisplay} - `, - responsiveColumn: css` - ${euiMaxBreakpoint(euiThemeContext, 'm')} { - ${logicalCSS('width', '100%')} - padding: 0; - } - ${euiMinBreakpoint(euiThemeContext, 'm')} { - ${columnDisplay} - } - `, + column: css``, inline: css` display: inline; border-radius: ${euiTheme.border.radius.small}; font-weight: ${euiTheme.font.weight.medium}; background-color: ${colorMode === 'DARK' - ? tint(euiTheme.colors.lightestShade, 0.5) + ? euiTheme.colors.lightShade : euiTheme.colors.lightestShade}; ${logicalCSS('margin-vertical', '0')} ${logicalCSS('margin-horizontal', euiTheme.size.xs)} + ${colorMode === 'DARK' && `color: ${euiTheme.colors.title};`} + /* Make sure the first
doesn't get a margin */ &:first-of-type { ${logicalCSS('margin-left', '0')} diff --git a/src/components/description_list/description_list_title.test.tsx b/src/components/description_list/description_list_title.test.tsx index aaee95637f0..27f37c1c897 100644 --- a/src/components/description_list/description_list_title.test.tsx +++ b/src/components/description_list/description_list_title.test.tsx @@ -12,7 +12,7 @@ import { requiredProps } from '../../test/required_props'; import { render } from '../../test/rtl'; import { EuiDescriptionListTitle } from './description_list_title'; -import { TYPES } from './description_list_types'; +import { CHILD_TYPES } from './description_list_types'; import { EuiDescriptionListContext, contextDefaults, @@ -33,7 +33,7 @@ describe('EuiDescriptionListTitle', () => { describe('EuiDescriptionListTitle prop variations', () => { describe('type', () => { - TYPES.forEach((type) => { + CHILD_TYPES.forEach((type) => { test(`${type} is rendered`, () => { const { container } = render( = ({ children, className, ...rest }) => { - const { type, textStyle, compressed, align, gutterSize } = useContext( + const { type, textStyle, compressed, align, rowGutterSize } = useContext( EuiDescriptionListContext ); @@ -38,9 +40,11 @@ export const EuiDescriptionListTitle: FunctionComponent< conditionalStyles = compressed ? [styles.inlineStyles.compressed] : [styles.inlineStyles.normal]; + conditionalStyles.push(styles[rowGutterSize]); + break; + case 'row': + conditionalStyles.push(styles[rowGutterSize]); break; - - case 'responsiveColumn': case 'column': if (align === 'center') { conditionalStyles.push(styles.right); @@ -51,7 +55,6 @@ export const EuiDescriptionListTitle: FunctionComponent< const cssStyles = [ styles.euiDescriptionList__title, styles[type], - styles[gutterSize], ...conditionalStyles, ]; diff --git a/src/components/description_list/description_list_types.ts b/src/components/description_list/description_list_types.ts index 3a196919c23..0f5ad635f35 100644 --- a/src/components/description_list/description_list_types.ts +++ b/src/components/description_list/description_list_types.ts @@ -40,12 +40,21 @@ export interface EuiDescriptionListProps { */ descriptionProps?: HTMLAttributes & CommonProps; /** - * Vertical spacing added between `EuiDescriptionList` elements + * Allows customizing the vertical spacing between rows. */ - gutterSize?: EuiDescriptionListGutterSizes; + rowGutterSize?: EuiDescriptionListGutterSizes; + /** + * Allows customizing the horizontal spacing between columns. + * + * Only applies to `column` and `responsiveColumn` types. + */ + columnGutterSize?: EuiDescriptionListColumnGapSizes; } -export const TYPES = ['row', 'inline', 'column', 'responsiveColumn'] as const; +export const CHILD_TYPES = ['row', 'inline', 'column'] as const; +export type EuiDescriptionListChildTypes = (typeof CHILD_TYPES)[number]; + +export const TYPES = [...CHILD_TYPES, 'responsiveColumn'] as const; export type EuiDescriptionListType = (typeof TYPES)[number]; export const ALIGNMENTS = ['center', 'left'] as const; @@ -54,5 +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_GUTTER_SIZES = ['s', 'm'] as const; +export type EuiDescriptionListColumnGapSizes = + (typeof COLUMN_GUTTER_SIZES)[number]; diff --git a/upcoming_changelogs/7062.md b/upcoming_changelogs/7062.md new file mode 100644 index 00000000000..73700f0a68a --- /dev/null +++ b/upcoming_changelogs/7062.md @@ -0,0 +1,10 @@ +- Updated `EuiDescriptionList` with a new `columnGutterSize` prop + +**Breaking changes** + +- Renamed `EuiDescriptionList`'s `gutterSize` prop to `rowGutterSize` +- `EuiDescriptionList`'s `rowGutterSize` prop now defaults to a size of `s` (was previously `m`) + +**Accessibility** + +- Fixed the dark mode colors of inline `EuiDescriptionListTitle`s to meet WCAG color contrast requirements