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