From 6018d7ed633b4efebbe615bed1ca20d94d858ea3 Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Fri, 26 Aug 2022 13:34:54 -0400 Subject: [PATCH] [EuiDescriptionList] New `gutterSize` prop (#6175) * Add gap prop to EuiDescriptionList type * Revert styling changes * Created gutterSize prop for EuiDescriptionList by utiilizing margins for the Title and Description based on the size passed into the component * Added documentation for the new EuiDescriptionList gutterSize prop * Updated snapshots for DescriptionList * Updated comment explaining the use of the gutterSize prop and added a CHANGELOG entry * Removed unused code * Commit snapshot file because somehow, I'm always forgetting to do that * Update src/components/description_list/description_list_description.tsx Co-authored-by: Greg Thompson * Removed the EuiDescription gutterSize example. Created a combined DescriptionList example for the gutterSize, align, and compressed props. * Code clean up Co-authored-by: Greg Thompson --- .../description_list_example.js | 6 +- .../description_list_styling.js | 184 +++++++++++++----- .../description_list.test.tsx.snap | 32 ++- ...description_list_description.test.tsx.snap | 4 +- .../description_list_title.test.tsx.snap | 16 +- .../description_list.test.tsx | 12 +- .../description_list/description_list.tsx | 3 +- .../description_list_context.tsx | 3 +- .../description_list_description.styles.ts | 15 +- .../description_list_description.tsx | 3 +- .../description_list_title.styles.ts | 17 +- .../description_list_title.tsx | 3 +- .../description_list_types.ts | 7 + upcoming_changelogs/6175.md | 1 + 14 files changed, 227 insertions(+), 79 deletions(-) create mode 100644 upcoming_changelogs/6175.md 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 85057fdf721..db1ad0111c2 100644 --- a/src-docs/src/views/description_list/description_list_example.js +++ b/src-docs/src/views/description_list/description_list_example.js @@ -231,7 +231,7 @@ export const DescriptionListExample = { demo: , }, { - title: 'Centered and compressed', + title: 'Customizing appearance', source: [ { type: GuideSectionTypes.JS, @@ -242,7 +242,9 @@ export const DescriptionListExample = {

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

), snippet: descriptionListStylingSnippet, 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 199a681536e..dd3d85c6abe 100644 --- a/src-docs/src/views/description_list/description_list_styling.js +++ b/src-docs/src/views/description_list/description_list_styling.js @@ -1,46 +1,138 @@ -import React from 'react'; - -import { EuiDescriptionList, EuiSpacer } from '../../../../src/components'; - -const favoriteVideoGames = [ - { - title: 'The Elder Scrolls: Morrowind', - description: 'The opening music alone evokes such strong memories.', - }, - { - title: 'TIE Fighter', - description: - 'The sequel to XWING, join the dark side and fly for the Emporer.', - }, - { - title: 'Quake 2', - description: 'The game that made me drop out of college.', - }, -]; -export default () => ( -
- - - - - - - - - -
-); +import React, { useState } from 'react'; + +import { + EuiDescriptionList, + EuiSpacer, + EuiButtonGroup, + EuiSwitch, + EuiTitle, + EuiFlexGroup, + EuiFlexItem, +} from '../../../../src/components'; + +export default () => { + const favoriteVideoGames = [ + { + title: 'The Elder Scrolls: Morrowind', + description: 'The opening music alone evokes such strong memories.', + }, + { + title: 'TIE Fighter', + description: + 'The sequel to XWING, join the dark side and fly for the Emporer.', + }, + { + title: 'Quake 2', + description: 'The game that made me drop out of college.', + }, + ]; + + const alignToggleButtons = [ + { + id: 'left', + label: 'Left', + }, + { + id: 'center', + label: 'Center', + }, + ]; + + const [alignSelected, setAlignSelected] = useState('center'); + + const alignOnChange = (id) => { + setAlignSelected(id); + }; + + const gutterToggleButtons = [ + { + id: 's', + label: 'Small', + }, + { + id: 'm', + label: 'Medium', + }, + ]; + + const [gutterSelected, setGutterSelected] = useState('m'); + + const gutterOnChange = (id) => { + setGutterSelected(id); + }; + + const [compressed, setCompressed] = useState(true); + + const compressedOnChange = () => { + setCompressed(!compressed); + }; + + return ( +
+ + + +

Align options

+ + alignOnChange(id)} + /> + + + + +

Row gutter sizes

+ + gutterOnChange(id)} + /> + + + + +

Compressed

+ + + + + + + + + + + + + + + + +
+ ); +}; 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 11c29eb1855..0838ab98b5d 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
@@ -74,13 +74,27 @@ 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
@@ -92,7 +106,7 @@ exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = ` Description 1
Title 2 @@ -108,7 +122,7 @@ exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
Title 3
@@ -129,7 +143,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = ` >
Title 1 @@ -141,7 +155,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
@@ -157,7 +171,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
Title 3 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 cd61805364b..9c4f84cec23 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 bd85e098124..3a5be76fe5d 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.test.tsx b/src/components/description_list/description_list.test.tsx index 795f7fc0ecb..141eae41026 100644 --- a/src/components/description_list/description_list.test.tsx +++ b/src/components/description_list/description_list.test.tsx @@ -11,7 +11,7 @@ import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; import { EuiDescriptionList } from './description_list'; -import { TYPES, ALIGNMENTS } from './description_list_types'; +import { TYPES, ALIGNMENTS, GUTTER_SIZES } from './description_list_types'; import { shouldRenderCustomStyles } from '../../test/internal'; describe('EuiDescriptionList', () => { @@ -103,5 +103,15 @@ describe('EuiDescriptionList', () => { }); }); }); + + describe('gutter', () => { + GUTTER_SIZES.forEach((gutter) => { + test(`${gutter} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); }); }); diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx index d338eca33da..6f2d65a7e8a 100644 --- a/src/components/description_list/description_list.tsx +++ b/src/components/description_list/description_list.tsx @@ -33,6 +33,7 @@ export const EuiDescriptionList: FunctionComponent< textStyle = 'normal', titleProps, type = 'row', + gutterSize = 'm', ...rest }) => { const euiTheme = useEuiTheme(); @@ -65,7 +66,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 de95acacfce..434330898d2 100644 --- a/src/components/description_list/description_list_context.tsx +++ b/src/components/description_list/description_list_context.tsx @@ -10,13 +10,14 @@ import { createContext } from 'react'; import { EuiDescriptionListProps } from './description_list_types'; type EuiDescriptionListContextValues = Required< - Pick + Pick > & { compressed?: EuiDescriptionListProps['compressed'] }; export const contextDefaults: EuiDescriptionListContextValues = { type: 'row', textStyle: 'normal', align: 'left', + gutterSize: 'm', }; export const EuiDescriptionListContext = createContext< diff --git a/src/components/description_list/description_list_description.styles.ts b/src/components/description_list/description_list_description.styles.ts index 1eafff3ba5c..c3c081557ca 100644 --- a/src/components/description_list/description_list_description.styles.ts +++ b/src/components/description_list/description_list_description.styles.ts @@ -24,9 +24,6 @@ export const euiDescriptionListDescriptionStyles = ( const columnDisplay = ` ${logicalCSS('width', '50%')} ${logicalCSS('padding-left', euiTheme.size.s)} - &:not(:first-of-type) { - ${logicalCSS('margin-top', euiTheme.size.base)} - } `; return { @@ -77,5 +74,17 @@ 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 464517cd369..515d2fcef1e 100644 --- a/src/components/description_list/description_list_description.tsx +++ b/src/components/description_list/description_list_description.tsx @@ -23,7 +23,7 @@ export const EuiDescriptionListDescription: FunctionComponent { - const { type, textStyle, compressed, align } = useContext( + const { type, textStyle, compressed, align, gutterSize } = useContext( EuiDescriptionListContext ); @@ -47,6 +47,7 @@ export const EuiDescriptionListDescription: FunctionComponent { return { euiDescriptionList__title: css` ${euiTextBreakWord()} - // Add margin only to the non-first
. - &:not(:first-of-type) { - ${logicalCSS('margin-top', euiTheme.size.base)} - } `, // Types @@ -94,5 +90,18 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { right: css` ${logicalTextAlignCSS('right')}; `, + + // Gutter + // Add margin only to the non-first
. + 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_title.tsx b/src/components/description_list/description_list_title.tsx index a466c00ffbd..3924eecf573 100644 --- a/src/components/description_list/description_list_title.tsx +++ b/src/components/description_list/description_list_title.tsx @@ -23,7 +23,7 @@ export const EuiDescriptionListTitle: FunctionComponent { - const { type, textStyle, compressed, align } = useContext( + const { type, textStyle, compressed, align, gutterSize } = useContext( EuiDescriptionListContext ); @@ -53,6 +53,7 @@ export const EuiDescriptionListTitle: FunctionComponent & CommonProps; + /** + * Vertical spacing added between `EuiDescriptionList` elements + */ + gutterSize?: EuiDescriptionListGutterSizes; } export const TYPES = ['row', 'inline', 'column', 'responsiveColumn'] as const; @@ -49,3 +53,6 @@ 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]; diff --git a/upcoming_changelogs/6175.md b/upcoming_changelogs/6175.md new file mode 100644 index 00000000000..f5cf56cf28a --- /dev/null +++ b/upcoming_changelogs/6175.md @@ -0,0 +1 @@ +- Added the `gutterSize` prop to `EuiDescriptionList` \ No newline at end of file