[EuiDescriptionList] New gutterSize prop

src-docs/src/views/description_list/description_list_example.js

@@ -97,6 +97,15 @@ const descriptionListClassesSnippet = [
 />`,
 ];
 
+import DescriptionListGutterSize from './description_list_gutter_size';
+const descriptionListGutterSizeSource = require('!!raw-loader!./description_list_gutter_size');
+const descriptionListGutterSizeSnippet = [
+  `<EuiDescriptionList
+  gutterSize="m"
+  listItems={favoriteVideoGames}
+/>`,
+];
+
 export const DescriptionListExample = {
   title: 'Description list',
   sections: [
@@ -268,5 +277,23 @@ export const DescriptionListExample = {
       snippet: descriptionListClassesSnippet,
       demo: <DescriptionListClasses />,
     },
+    {
+      title: 'Row gutter',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: descriptionListGutterSizeSource,
+        },
+      ],
+      text: (
+        <p>
+          Adjust the <EuiCode>gutterSize</EuiCode> prop to increase and decrease
+          vertical spacing between <EuiCode>EuiDescriptionList</EuiCode>{' '}
+          elements.
+        </p>
+      ),
+      snippet: descriptionListGutterSizeSnippet,
+      demo: <DescriptionListGutterSize />,
+    },
   ],
 };

src-docs/src/views/description_list/description_list_gutter_size.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+
+import {
+  EuiDescriptionList,
+  EuiButtonGroup,
+  EuiSpacer,
+  EuiTitle,
+} 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 gutterToggleButtons = [
+    {
+      id: 's',
+      label: 'Small',
+    },
+    {
+      id: 'm',
+      label: 'Medium',
+    },
+  ];
+
+  const [gutterSelected, setGutterSelected] = useState('m');
+
+  const onChange = (id) => {
+    setGutterSelected(id);
+  };
+
+  return (
+    <>
+      <EuiTitle size="xxs">
+        <h3>Row gutter sizes</h3>
+      </EuiTitle>
+      <EuiButtonGroup
+        legend="This is a basic group"
+        options={gutterToggleButtons}
+        idSelected={gutterSelected}
+        onChange={(id) => onChange(id)}
+      />
+      <EuiSpacer />
+      <EuiDescriptionList
+        type="column"
+        gutterSize={gutterSelected}
+        listItems={favoriteVideoGames}
+      />
+      <EuiSpacer />
+      <EuiDescriptionList
+        type="row"
+        gutterSize={gutterSelected}
+        listItems={favoriteVideoGames}
+      />
+    </>
+  );
+};

src/components/description_list/__snapshots__/description_list.test.tsx.snap

@@ -6,7 +6,7 @@ exports[` 1`] = `
   data-type="row"
 >
   <dt
-    class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
+    class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
   >
     Title 1
   </dt>
@@ -16,7 +16,7 @@ exports[` 1`] = `
     Description 1
   </dd>
   <dt
-    class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
+    class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
   >
     <em>
       Title 2
@@ -30,7 +30,7 @@ exports[` 1`] = `
     </code>
   </dd>
   <dt
-    class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
+    class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
   >
     Title 3
   </dt>
@@ -74,13 +74,27 @@ exports[`EuiDescriptionList props compressed is rendered 1`] = `
 />
 `;
 
+exports[`EuiDescriptionList props gutter m is rendered 1`] = `
+<dl
+  class="euiDescriptionList emotion-euiDescriptionList-row-left"
+  data-type="row"
+/>
+`;
+
+exports[`EuiDescriptionList props gutter s is rendered 1`] = `
+<dl
+  class="euiDescriptionList emotion-euiDescriptionList-row-left"
+  data-type="row"
+/>
+`;
+
 exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
 <dl
   class="euiDescriptionList emotion-euiDescriptionList-row-left"
   data-type="row"
 >
   <dt
-    class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
+    class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
   >
     Title 1
   </dt>
@@ -92,7 +106,7 @@ exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
     Description 1
   </dd>
   <dt
-    class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
+    class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
   >
     <em>
       Title 2
@@ -108,7 +122,7 @@ exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
     </code>
   </dd>
   <dt
-    class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
+    class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
   >
     Title 3
   </dt>
@@ -129,7 +143,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
 >
   <dt
     aria-label="aria-label"
-    class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-normal"
+    class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-m-normal"
     data-test-subj="test subject string"
   >
     Title 1
@@ -141,7 +155,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
   </dd>
   <dt
     aria-label="aria-label"
-    class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-normal"
+    class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-m-normal"
     data-test-subj="test subject string"
   >
     <em>
@@ -157,7 +171,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
   </dd>
   <dt
     aria-label="aria-label"
-    class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-normal"
+    class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-m-normal"
     data-test-subj="test subject string"
   >
     Title 3

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`] = `
 <dd
-  class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal"
+  class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-m"
 />
 `;
 
@@ -32,7 +32,7 @@ exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variat
 
 exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variations type responsiveColumn is rendered 1`] = `
 <dd
-  class="euiDescriptionList__description emotion-euiDescriptionList__description-responsiveColumn-normal"
+  class="euiDescriptionList__description emotion-euiDescriptionList__description-responsiveColumn-normal-m"
 />
 `;
 

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`] = `
 <dt
-  class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
+  class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
 />
 `;
 
 exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations compressed is rendered 1`] = `
 <dt
-  class="euiDescriptionList__title emotion-euiDescriptionList__title-row-compressed"
+  class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-compressed"
 />
 `;
 
 exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations text styles reversed text is rendered 1`] = `
 <dt
-  class="euiDescriptionList__title emotion-euiDescriptionList__title-row-reverse"
+  class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-reverse"
 />
 `;
 
 exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type column is rendered 1`] = `
 <dt
-  class="euiDescriptionList__title emotion-euiDescriptionList__title-column-normal"
+  class="euiDescriptionList__title emotion-euiDescriptionList__title-column-m-normal"
 />
 `;
 
 exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type inline is rendered 1`] = `
 <dt
-  class="euiDescriptionList__title emotion-euiDescriptionList__title-inline-normal"
+  class="euiDescriptionList__title emotion-euiDescriptionList__title-inline-m-normal"
 />
 `;
 
 exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type responsiveColumn is rendered 1`] = `
 <dt
-  class="euiDescriptionList__title emotion-euiDescriptionList__title-responsiveColumn-normal"
+  class="euiDescriptionList__title emotion-euiDescriptionList__title-responsiveColumn-m-normal"
 />
 `;
 
 exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type row is rendered 1`] = `
 <dt
-  class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
+  class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
 />
 `;
 
 exports[`EuiDescriptionListTitle is rendered 1`] = `
 <dt
   aria-label="aria-label"
-  class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-normal"
+  class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-m-normal"
   data-test-subj="test subject string"
 >
   Content

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(<EuiDescriptionList gutterSize={gutter} />);
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
   });
 });

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 (
     <EuiDescriptionListContext.Provider
-      value={{ type, compressed, textStyle, align }}
+      value={{ type, compressed, textStyle, align, gutterSize }}
     >
       <dl className={classes} css={cssStyles} {...rest} data-type={type}>
         {childrenOrListItems}

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<EuiDescriptionListProps, 'type' | 'textStyle' | 'align'>
+  Pick<EuiDescriptionListProps, 'type' | 'textStyle' | 'align' | 'gutterSize'>
 > & { compressed?: EuiDescriptionListProps['compressed'] };
 
 export const contextDefaults: EuiDescriptionListContextValues = {
   type: 'row',
   textStyle: 'normal',
   align: 'left',
+  gutterSize: 'm',
 };
 
 export const EuiDescriptionListContext = createContext<

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)}
+      }
+    `,
   };
 };

src/components/description_list/description_list_description.tsx

@@ -23,7 +23,7 @@ export const EuiDescriptionListDescription: FunctionComponent<EuiDescriptionList
   className,
   ...rest
 }) => {
-  const { type, textStyle, compressed, align } = useContext(
+  const { type, textStyle, compressed, align, gutterSize } = useContext(
     EuiDescriptionListContext
   );
 
@@ -47,6 +47,9 @@ export const EuiDescriptionListDescription: FunctionComponent<EuiDescriptionList
       if (align === 'center') {
         conditionalStyles.push(styles.left);
       }
+      gutterSize === 's'
+        ? conditionalStyles.push(styles.s)
+        : conditionalStyles.push(styles.m);
       break;
   }