[EuiDescriptionList] New gutterSize prop

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

@@ -231,7 +231,7 @@ export const DescriptionListExample = {
       demo: <DescriptionListInline />,
     },
     {
-      title: 'Centered and compressed',
+      title: 'Customizing appearance',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -242,7 +242,9 @@ export const DescriptionListExample = {
         <p>
           Using the <EuiCode>align</EuiCode> and <EuiCode>compressed</EuiCode>{' '}
           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{' '}
+          <EuiCode>gutterSize</EuiCode> prop to increase and decrease vertical
+          spacing between <EuiCode>EuiDescriptionList</EuiCode> elements.
         </p>
       ),
       snippet: descriptionListStylingSnippet,

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 () => (
-  <div style={{ maxWidth: '400px' }}>
-    <EuiDescriptionList
-      listItems={favoriteVideoGames}
-      align="center"
-      compressed
-    />
-
-    <EuiSpacer size="l" />
-
-    <EuiDescriptionList
-      listItems={favoriteVideoGames}
-      type="column"
-      align="center"
-      compressed
-    />
-
-    <EuiSpacer size="l" />
-
-    <EuiDescriptionList
-      listItems={favoriteVideoGames}
-      type="inline"
-      align="center"
-      compressed
-    />
-  </div>
-);
+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 (
+    <div style={{ maxWidth: '400px' }}>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiTitle size="xxs">
+            <h3>Align options</h3>
+          </EuiTitle>
+          <EuiButtonGroup
+            legend="Toggle for the EuiDescription align prop"
+            options={alignToggleButtons}
+            idSelected={alignSelected}
+            onChange={(id) => alignOnChange(id)}
+          />
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <EuiTitle size="xxs">
+            <h3>Row gutter sizes</h3>
+          </EuiTitle>
+          <EuiButtonGroup
+            legend="Toggle for the EuiDescription gutterSize prop"
+            options={gutterToggleButtons}
+            idSelected={gutterSelected}
+            onChange={(id) => gutterOnChange(id)}
+          />
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <EuiTitle size="xxs">
+            <h3>Compressed</h3>
+          </EuiTitle>
+          <EuiSwitch
+            label="Compressed"
+            checked={compressed}
+            onChange={compressedOnChange}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiSpacer />
+
+      <EuiDescriptionList
+        listItems={favoriteVideoGames}
+        align={alignSelected}
+        compressed={compressed}
+        gutterSize={gutterSelected}
+      />
+
+      <EuiSpacer size="l" />
+
+      <EuiDescriptionList
+        listItems={favoriteVideoGames}
+        type="column"
+        align={alignSelected}
+        compressed={compressed}
+        gutterSize={gutterSelected}
+      />
+
+      <EuiSpacer size="l" />
+
+      <EuiDescriptionList
+        listItems={favoriteVideoGames}
+        type="inline"
+        align={alignSelected}
+        compressed={compressed}
+      />
+    </div>
+  );
+};

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