From b435d22161648eda9efd4e0416f08184ec0a124a Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 3 Mar 2020 20:59:40 -0500
Subject: [PATCH 1/5] [EuiListGroup] Added `gutterSize`

---
 .../__snapshots__/list_group.test.tsx.snap    | 143 +++++++++++++++++-
 src/components/list_group/_index.scss         |   2 +
 src/components/list_group/_list_group.scss    |  15 +-
 .../list_group/_list_group_item.scss          |   5 -
 src/components/list_group/_variables.scss     |   4 +
 src/components/list_group/list_group.test.tsx |  89 ++++++++++-
 src/components/list_group/list_group.tsx      |  19 ++-
 .../__snapshots__/nav_drawer.test.js.snap     |  16 +-
 8 files changed, 273 insertions(+), 20 deletions(-)
 create mode 100644 src/components/list_group/_variables.scss

diff --git a/src/components/list_group/__snapshots__/list_group.test.tsx.snap b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
index fbd22fd489e..72252c29443 100644
--- a/src/components/list_group/__snapshots__/list_group.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
@@ -3,7 +3,148 @@
 exports[`EuiListGroup is rendered 1`] = `
 <ul
   aria-label="aria-label"
-  class="euiListGroup euiListGroup-maxWidthDefault testClass1 testClass2"
+  class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
+
+exports[`EuiListGroup is rendered with listItems 1`] = `
+<ul
+  class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault"
+>
+  <li
+    class="euiListGroupItem euiListGroupItem--medium"
+  >
+    <span
+      class="euiListGroupItem__text"
+    >
+      <div
+        class="euiListGroupItem__icon"
+        data-euiicon-type="stop"
+      />
+      <span
+        class="euiListGroupItem__label"
+        title="Label with iconType"
+      >
+        Label with iconType
+      </span>
+    </span>
+  </li>
+  <li
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-hasExtraAction"
+  >
+    <span
+      class="euiListGroupItem__text"
+    >
+      <span
+        class="euiListGroupItem__label"
+        title="Custom extra action"
+      >
+        Custom extra action
+      </span>
+    </span>
+    <button
+      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        class="euiButtonIcon__icon"
+        data-euiicon-type="bell"
+      />
+    </button>
+  </li>
+  <li
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
+  >
+    <button
+      class="euiListGroupItem__button"
+      type="button"
+    >
+      <span
+        class="euiListGroupItem__label"
+        title="Button with onClick"
+      >
+        Button with onClick
+      </span>
+    </button>
+  </li>
+  <li
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
+  >
+    <a
+      class="euiListGroupItem__button"
+      href="#"
+    >
+      <span
+        class="euiListGroupItem__label"
+        title="Link with href"
+      >
+        Link with href
+      </span>
+    </a>
+  </li>
+</ul>
+`;
+
+exports[`EuiListGroup props bordered is rendered 1`] = `
+<ul
+  class="euiListGroup euiListGroup-bordered euiListGroup--gutterS euiListGroup-maxWidthDefault"
+/>
+`;
+
+exports[`EuiListGroup props flush is rendered 1`] = `
+<ul
+  class="euiListGroup euiListGroup-flush euiListGroup--gutterS euiListGroup-maxWidthDefault"
+/>
+`;
+
+exports[`EuiListGroup props gutter size m is rendered 1`] = `
+<ul
+  class="euiListGroup euiListGroup--gutterM euiListGroup-maxWidthDefault"
+/>
+`;
+
+exports[`EuiListGroup props gutter size none is rendered 1`] = `
+<ul
+  class="euiListGroup euiListGroup-maxWidthDefault"
+/>
+`;
+
+exports[`EuiListGroup props gutter size s is rendered 1`] = `
+<ul
+  class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault"
+/>
+`;
+
+exports[`EuiListGroup props maxWidth as a number is rendered 1`] = `
+<ul
+  class="euiListGroup euiListGroup--gutterS"
+  style="max-width:300px"
+/>
+`;
+
+exports[`EuiListGroup props maxWidth as a string is rendered 1`] = `
+<ul
+  class="euiListGroup euiListGroup--gutterS"
+  style="max-width:20em"
+/>
+`;
+
+exports[`EuiListGroup props maxWidth as true is rendered 1`] = `
+<ul
+  class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault"
+/>
+`;
+
+exports[`EuiListGroup props showToolTips is rendered 1`] = `
+<ul
+  class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault"
+/>
+`;
+
+exports[`EuiListGroup props wrapText is rendered 1`] = `
+<ul
+  class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault"
+/>
+`;
diff --git a/src/components/list_group/_index.scss b/src/components/list_group/_index.scss
index 9d6423c4f21..a841513f7c6 100644
--- a/src/components/list_group/_index.scss
+++ b/src/components/list_group/_index.scss
@@ -1,5 +1,7 @@
 // List group provides a way to neatly present a set of text-based items
 
 @import '../header/variables';
+@import 'variables';
+
 @import 'list_group';
 @import 'list_group_item';
diff --git a/src/components/list_group/_list_group.scss b/src/components/list_group/_list_group.scss
index 9e8fa0373e3..58b32426526 100644
--- a/src/components/list_group/_list_group.scss
+++ b/src/components/list_group/_list_group.scss
@@ -2,13 +2,9 @@
  * The List Group component provides neatly styled lists containing plain text
  * or links. The outer container can be bordered, with padding, or borderless
  * with links flush to the sides.
- *(
- * List items can be displayed with active and disabled states.
  */
 
 .euiListGroup {
-  padding: $euiSizeS;
-
   &.euiListGroup-flush {
     padding: 0;
     border: none;
@@ -23,3 +19,14 @@
 .euiListGroup-maxWidthDefault {
   max-width: $euiFormMaxWidth;
 }
+
+// Gutter Sizes
+@each $gutterName, $gutterSize in $euiListGroupGutterTypes {
+  .euiListGroup--#{$gutterName} {
+    padding: $gutterSize;
+
+    .euiListGroupItem:not(:first-of-type) {
+      margin-top: $gutterSize;
+    }
+  }
+}
diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
index e0434fc62a2..2910f5969c2 100644
--- a/src/components/list_group/_list_group_item.scss
+++ b/src/components/list_group/_list_group_item.scss
@@ -1,6 +1,5 @@
 .euiListGroupItem {
   padding: 0;
-  margin-top: $euiSizeS;
   border-radius: $euiBorderRadius;
   overflow: hidden;
   display: flex;
@@ -8,10 +7,6 @@
   transition: background-color $euiAnimSpeedFast;
   position: relative;
 
-  &:first-child {
-    margin-top: 0;
-  }
-
   &.euiListGroupItem-isActive,
   &.euiListGroupItem-isClickable:hover {
     background-color: tintOrShade($euiColorLightestShade, 0%, 30%);
diff --git a/src/components/list_group/_variables.scss b/src/components/list_group/_variables.scss
new file mode 100644
index 00000000000..27dfdc8d3d0
--- /dev/null
+++ b/src/components/list_group/_variables.scss
@@ -0,0 +1,4 @@
+$euiListGroupGutterTypes: (
+  gutterS: $euiSizeS,
+  gutterM: $euiSize,
+);
diff --git a/src/components/list_group/list_group.test.tsx b/src/components/list_group/list_group.test.tsx
index 9808ec3880f..d22dbecf23b 100644
--- a/src/components/list_group/list_group.test.tsx
+++ b/src/components/list_group/list_group.test.tsx
@@ -2,7 +2,32 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
-import { EuiListGroup } from './list_group';
+import { EuiListGroup, GUTTER_SIZES } from './list_group';
+import { EuiListGroupItemProps } from './list_group_item';
+
+const someListItems: EuiListGroupItemProps[] = [
+  {
+    label: 'Label with iconType',
+    iconType: 'stop',
+  },
+  {
+    label: 'Custom extra action',
+    extraAction: {
+      iconType: 'bell',
+      alwaysShow: true,
+    },
+  },
+  {
+    label: 'Button with onClick',
+    onClick: e => {
+      console.log('Visualize clicked', e);
+    },
+  },
+  {
+    label: 'Link with href',
+    href: '#',
+  },
+];
 
 describe('EuiListGroup', () => {
   test('is rendered', () => {
@@ -10,4 +35,66 @@ describe('EuiListGroup', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('is rendered with listItems', () => {
+    const component = render(<EuiListGroup listItems={someListItems} />);
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    test('bordered is rendered', () => {
+      const component = render(<EuiListGroup bordered />);
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('flush is rendered', () => {
+      const component = render(<EuiListGroup flush />);
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('showToolTips is rendered', () => {
+      const component = render(<EuiListGroup showToolTips />);
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('wrapText is rendered', () => {
+      const component = render(<EuiListGroup wrapText />);
+
+      expect(component).toMatchSnapshot();
+    });
+
+    describe('gutter size', () => {
+      GUTTER_SIZES.forEach(gutter => {
+        test(`${gutter} is rendered`, () => {
+          const component = render(<EuiListGroup gutterSize={gutter} />);
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('maxWidth', () => {
+      test('as true is rendered', () => {
+        const component = render(<EuiListGroup maxWidth={true} />);
+
+        expect(component).toMatchSnapshot();
+      });
+
+      test('as a number is rendered', () => {
+        const component = render(<EuiListGroup maxWidth={300} />);
+
+        expect(component).toMatchSnapshot();
+      });
+
+      test('as a string is rendered', () => {
+        const component = render(<EuiListGroup maxWidth="20em" />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/src/components/list_group/list_group.tsx b/src/components/list_group/list_group.tsx
index 1d6354f8867..b79a1d388de 100644
--- a/src/components/list_group/list_group.tsx
+++ b/src/components/list_group/list_group.tsx
@@ -4,6 +4,16 @@ import classNames from 'classnames';
 import { EuiListGroupItem, EuiListGroupItemProps } from './list_group_item';
 import { CommonProps } from '../common';
 
+type GutterSize = 'none' | 's' | 'm';
+const gutterSizeToClassNameMap: { [size in GutterSize]: string } = {
+  none: '',
+  s: 'euiListGroup--gutterS',
+  m: 'euiListGroup--gutterM',
+};
+export const GUTTER_SIZES = Object.keys(
+  gutterSizeToClassNameMap
+) as GutterSize[];
+
 export type EuiListGroupProps = CommonProps &
   HTMLAttributes<HTMLUListElement> & {
     /**
@@ -16,6 +26,11 @@ export type EuiListGroupProps = CommonProps &
      */
     flush?: boolean;
 
+    /**
+     * Spacing between list items
+     */
+    gutterSize?: GutterSize;
+
     /**
      * Items to display in this group. See #EuiListGroupItem
      */
@@ -36,7 +51,7 @@ export type EuiListGroupProps = CommonProps &
     showToolTips?: boolean;
 
     /**
-     * Allow link text to wrap
+     * Allow link text to wrap vs truncated
      */
     wrapText?: boolean;
     ariaLabelledby?: string;
@@ -49,6 +64,7 @@ export const EuiListGroup: FunctionComponent<EuiListGroupProps> = ({
   style,
   flush = false,
   bordered = false,
+  gutterSize = 's',
   wrapText = false,
   maxWidth = true,
   showToolTips = false,
@@ -76,6 +92,7 @@ export const EuiListGroup: FunctionComponent<EuiListGroupProps> = ({
       'euiListGroup-flush': flush,
       'euiListGroup-bordered': bordered,
     },
+    gutterSizeToClassNameMap[gutterSize],
     widthClassName,
     className
   );
diff --git a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
index 01827dde7fa..b8b6c6384b4 100644
--- a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
+++ b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
@@ -15,7 +15,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
         id="navDrawerMenu"
       >
         <ul
-          class="euiListGroup euiListGroup-flush euiListGroup-maxWidthDefault euiNavDrawer__expandButton"
+          class="euiListGroup euiListGroup-flush euiListGroup--gutterS euiListGroup-maxWidthDefault euiNavDrawer__expandButton"
         >
           <li
             class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isClickable euiListGroupItem-hasExtraAction navDrawerExpandButton-isCollapsed"
@@ -42,7 +42,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
           </li>
         </ul>
         <ul
-          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup"
+          class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault euiNavDrawerGroup"
         >
           <li
             class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isClickable euiNavDrawerGroup__item"
@@ -96,7 +96,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
           </li>
         </ul>
         <ul
-          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup"
+          class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault euiNavDrawerGroup"
         >
           <li
             class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isActive euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiNavDrawerGroup__item"
@@ -276,7 +276,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
         id="navDrawerMenu"
       >
         <ul
-          class="euiListGroup euiListGroup-flush euiListGroup-maxWidthDefault euiNavDrawer__expandButton"
+          class="euiListGroup euiListGroup-flush euiListGroup--gutterS euiListGroup-maxWidthDefault euiNavDrawer__expandButton"
         >
           <li
             class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isClickable euiListGroupItem-hasExtraAction navDrawerExpandButton-isCollapsed"
@@ -303,7 +303,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
           </li>
         </ul>
         <ul
-          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup"
+          class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault euiNavDrawerGroup"
         >
           <li
             class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isActive euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiNavDrawerGroup__item"
@@ -483,7 +483,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
         id="navDrawerMenu"
       >
         <ul
-          class="euiListGroup euiListGroup-flush euiListGroup-maxWidthDefault euiNavDrawer__expandButton"
+          class="euiListGroup euiListGroup-flush euiListGroup--gutterS euiListGroup-maxWidthDefault euiNavDrawer__expandButton"
         >
           <li
             class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isClickable euiListGroupItem-hasExtraAction navDrawerExpandButton-isCollapsed"
@@ -510,7 +510,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
           </li>
         </ul>
         <ul
-          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup"
+          class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault euiNavDrawerGroup"
         >
           <li
             class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isClickable euiNavDrawerGroup__item"
@@ -564,7 +564,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
           </li>
         </ul>
         <ul
-          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup"
+          class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault euiNavDrawerGroup"
         >
           <li
             class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isActive euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiNavDrawerGroup__item"

From 61c4a45973ba6dd5b358e3c4a1110ecc1f7d4fe0 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 3 Mar 2020 21:38:16 -0500
Subject: [PATCH 2/5] [EuiListGroupItem] Added `color` prop and updated size
 styles

---
 .../views/list_group/list_group_example.js    | 34 ++++++++++
 .../list_group/list_group_item_color.tsx      | 23 +++++++
 .../list_group_item.test.tsx.snap             | 68 +++++++++++++++++++
 .../list_group/_list_group_item.scss          | 26 ++++---
 src/components/list_group/_variables.scss     | 13 ++++
 .../list_group/list_group_item.test.tsx       | 14 +++-
 src/components/list_group/list_group_item.tsx | 20 +++++-
 7 files changed, 186 insertions(+), 12 deletions(-)
 create mode 100644 src-docs/src/views/list_group/list_group_item_color.tsx

diff --git a/src-docs/src/views/list_group/list_group_example.js b/src-docs/src/views/list_group/list_group_example.js
index 99758b562e6..72507d1a5b6 100644
--- a/src-docs/src/views/list_group/list_group_example.js
+++ b/src-docs/src/views/list_group/list_group_example.js
@@ -26,6 +26,10 @@ import ListGroupExtra from './list_group_extra';
 const listGroupExtraSource = require('!!raw-loader!./list_group_extra');
 const listGroupExtraHtml = renderToHtml(ListGroupExtra);
 
+import ListGroupItemColor from './list_group_item_color';
+const listGroupItemColorSource = require('!!raw-loader!./list_group_item_color');
+const listGroupItemColorHtml = renderToHtml(ListGroupItemColor);
+
 export const ListGroupExample = {
   title: 'List Group',
   sections: [
@@ -121,5 +125,35 @@ export const ListGroupExample = {
       ),
       demo: <ListGroupExtra />,
     },
+    {
+      title: 'List item color and size',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: listGroupItemColorSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: listGroupItemColorHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            <strong>EuiListGroupItem</strong>s will inherit the color from their
+            element type whether it is a <EuiCode>button</EuiCode>,{' '}
+            <EuiCode>anchor</EuiCode>, or <EuiCode>span</EuiCode>. You can
+            enforce a different color of <EuiCode>primary</EuiCode>,{' '}
+            <EuiCode>text</EuiCode>, or <EuiCode>subdued</EuiCode> with the{' '}
+            <EuiCode>color</EuiCode> prop.
+          </p>
+          <p>
+            They also accept options for text size;{' '}
+            <EuiCode>xs | s | m | l</EuiCode>.
+          </p>
+        </>
+      ),
+      demo: <ListGroupItemColor />,
+    },
   ],
 };
diff --git a/src-docs/src/views/list_group/list_group_item_color.tsx b/src-docs/src/views/list_group/list_group_item_color.tsx
new file mode 100644
index 00000000000..883bd524338
--- /dev/null
+++ b/src-docs/src/views/list_group/list_group_item_color.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {
+  EuiListGroupItem,
+  EuiListGroup,
+} from '../../../../src/components/list_group';
+
+export default () => (
+  <EuiListGroup>
+    <EuiListGroupItem href="#" label="Inherit by default (xs)" size="xs" />
+
+    <EuiListGroupItem
+      onClick={() => {}}
+      label="Primary (s)"
+      color="primary"
+      size="s"
+    />
+
+    <EuiListGroupItem href="#" label="Text (m)" color="text" />
+
+    <EuiListGroupItem href="#" label="Subdued (l)" color="subdued" size="l" />
+  </EuiListGroup>
+);
diff --git a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
index cc4c0775932..9de1cb7c972 100644
--- a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
@@ -17,6 +17,74 @@ exports[`EuiListGroupItem is rendered 1`] = `
 </li>
 `;
 
+exports[`EuiListGroupItem props color inherit is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
+exports[`EuiListGroupItem props color primary is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem--primary"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
+exports[`EuiListGroupItem props color subdued is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem--subdued"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
+exports[`EuiListGroupItem props color text is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem--text"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
 exports[`EuiListGroupItem props extraAction is rendered 1`] = `
 <li
   class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-hasExtraAction"
diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
index 2910f5969c2..c1bfc0343e3 100644
--- a/src/components/list_group/_list_group_item.scss
+++ b/src/components/list_group/_list_group_item.scss
@@ -6,6 +6,7 @@
   align-items: center;
   transition: background-color $euiAnimSpeedFast;
   position: relative;
+  line-height: $euiSize;
 
   &.euiListGroupItem-isActive,
   &.euiListGroupItem-isClickable:hover {
@@ -38,10 +39,17 @@
   flex: 1 0 auto; // The flex-shrink and flex-basis values are needed for IE11
   text-align: left;
   max-width: 100%;
+  font-weight: inherit;
 
   .euiListGroupItem-hasExtraAction & {
     max-width: calc(100% - #{$euiSizeXL});
   }
+
+  @each $colorName, $color in $euiListGroupItemColorTypes {
+    .euiListGroupItem--#{$colorName} & {
+      color: $color;
+    }
+  }
 }
 
 .euiListGroupItem__label {
@@ -69,19 +77,21 @@
   flex-shrink: 0;
 }
 
-.euiListGroupItem--xSmall {
-  font-size: $euiFontSizeXS;
-  line-height: $euiSizeM;
+// Font sizes
+@each $sizeName, $fontSize in $euiListGroupItemSizeTypes {
+  .euiListGroupItem--#{$sizeName} {
+    font-size: $fontSize;
+  }
 }
 
+.euiListGroupItem--xSmall,
 .euiListGroupItem--small {
-  font-size: $euiFontSizeS;
-  line-height: $euiSize;
+  font-weight: $euiFontWeightMedium;
+  letter-spacing: 0;
 }
 
-.euiListGroupItem--large {
-  font-size: $euiFontSizeL;
-  line-height: $euiSize;
+.euiListGroupItem--xSmall {
+  line-height: $euiSizeM;
 }
 
 .euiListGroupItem--wrapText {
diff --git a/src/components/list_group/_variables.scss b/src/components/list_group/_variables.scss
index 27dfdc8d3d0..bc3c2dcfb49 100644
--- a/src/components/list_group/_variables.scss
+++ b/src/components/list_group/_variables.scss
@@ -2,3 +2,16 @@ $euiListGroupGutterTypes: (
   gutterS: $euiSizeS,
   gutterM: $euiSize,
 );
+
+$euiListGroupItemColorTypes: (
+  primary: $euiColorPrimary,
+  text: $euiTextColor,
+  subdued: $euiColorDarkShade,
+);
+
+$euiListGroupItemSizeTypes: (
+  xSmall: $euiFontSizeXS,
+  small: $euiFontSizeS,
+  medium: $euiFontSize,
+  large: $euiFontSizeL,
+);
diff --git a/src/components/list_group/list_group_item.test.tsx b/src/components/list_group/list_group_item.test.tsx
index ef4e9264c32..a2ada539f2a 100644
--- a/src/components/list_group/list_group_item.test.tsx
+++ b/src/components/list_group/list_group_item.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from 'enzyme';
 
-import { EuiListGroupItem, SIZES } from './list_group_item';
+import { EuiListGroupItem, SIZES, COLORS } from './list_group_item';
 
 describe('EuiListGroupItem', () => {
   test('is rendered', () => {
@@ -23,6 +23,18 @@ describe('EuiListGroupItem', () => {
       });
     });
 
+    describe('color', () => {
+      COLORS.forEach(color => {
+        test(`${color} is rendered`, () => {
+          const component = render(
+            <EuiListGroupItem label="Label" color={color} />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+
     describe('isActive', () => {
       test('is rendered', () => {
         const component = render(<EuiListGroupItem label="Label" isActive />);
diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
index 40f318cdd5c..0801ae8043e 100644
--- a/src/components/list_group/list_group_item.tsx
+++ b/src/components/list_group/list_group_item.tsx
@@ -17,16 +17,23 @@ import { useInnerText } from '../inner_text';
 import { ExclusiveUnion, CommonProps } from '../common';
 
 type ItemSize = 'xs' | 's' | 'm' | 'l';
-
 const sizeToClassNameMap: { [size in ItemSize]: string } = {
   xs: 'euiListGroupItem--xSmall',
   s: 'euiListGroupItem--small',
   m: 'euiListGroupItem--medium',
   l: 'euiListGroupItem--large',
 };
-
 export const SIZES = Object.keys(sizeToClassNameMap) as ItemSize[];
 
+type Color = 'inherit' | 'primary' | 'text' | 'subdued';
+const colorToClassNameMap: { [color in Color]: string } = {
+  inherit: '',
+  primary: 'euiListGroupItem--primary',
+  text: 'euiListGroupItem--text',
+  subdued: 'euiListGroupItem--subdued',
+};
+export const COLORS = Object.keys(colorToClassNameMap) as Color[];
+
 export type EuiListGroupItemProps = CommonProps &
   ExclusiveUnion<
     ExclusiveUnion<
@@ -39,6 +46,11 @@ export type EuiListGroupItemProps = CommonProps &
      * Size of the label text
      */
     size?: ItemSize;
+    /**
+     * By default the item will inherit the color of its wrapper (button/link/span),
+     * otherwise pass on of the acceptable options
+     */
+    color?: Color;
 
     /**
      * Content to be displayed in the list item
@@ -114,6 +126,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
   extraAction,
   onClick,
   size = 'm',
+  color = 'inherit',
   showToolTip = false,
   wrapText,
   buttonRef,
@@ -122,6 +135,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
   const classes = classNames(
     'euiListGroupItem',
     sizeToClassNameMap[size],
+    colorToClassNameMap[color],
     {
       'euiListGroupItem-isActive': isActive,
       'euiListGroupItem-isDisabled': isDisabled,
@@ -192,9 +206,9 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
   if (href && !isDisabled) {
     itemContent = (
       <a
+        className="euiListGroupItem__button"
         href={href}
         onClick={onClick as AnchorHTMLAttributes<HTMLAnchorElement>['onClick']}
-        className="euiListGroupItem__button"
         {...rest as AnchorHTMLAttributes<HTMLAnchorElement>}>
         {iconNode}
         {labelContent}

From 4aaddb573c8c4f294bbc9c85613be91755ea7606 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 3 Mar 2020 21:55:32 -0500
Subject: [PATCH 3/5] Fix up the docs

---
 .../views/list_group/list_group_example.js    |  83 +++++++--
 .../list_group/list_group_link_actions.js     | 171 +++++++-----------
 .../src/views/list_group/list_group_links.js  |  73 +-------
 3 files changed, 135 insertions(+), 192 deletions(-)

diff --git a/src-docs/src/views/list_group/list_group_example.js b/src-docs/src/views/list_group/list_group_example.js
index 72507d1a5b6..7e704b16cfc 100644
--- a/src-docs/src/views/list_group/list_group_example.js
+++ b/src-docs/src/views/list_group/list_group_example.js
@@ -31,7 +31,7 @@ const listGroupItemColorSource = require('!!raw-loader!./list_group_item_color')
 const listGroupItemColorHtml = renderToHtml(ListGroupItemColor);
 
 export const ListGroupExample = {
-  title: 'List Group',
+  title: 'List group',
   sections: [
     {
       source: [
@@ -45,15 +45,24 @@ export const ListGroupExample = {
         },
       ],
       text: (
-        <p>
-          The <EuiCode>ListGroup</EuiCode> component is used to present &nbsp;
-          <EuiCode>ListGroupItems</EuiCode> in a neatly formatted list. Use the
-          &nbsp;<EuiCode>flush</EuiCode> and <EuiCode>bordered</EuiCode>{' '}
-          properties for full-width and bordered presentations, respectively.
-        </p>
+        <>
+          <p>
+            The <strong>EuiListGroup</strong> component is used to present{' '}
+            <strong>EuiListGroupItems</strong> in a neatly formatted list. Use
+            the <EuiCode>flush</EuiCode> and <EuiCode>bordered</EuiCode>{' '}
+            properties for full-width and bordered presentations, respectively.
+          </p>
+          <p>
+            Adjust the <EuiCode>gutterSize</EuiCode> prop to increase or
+            decrease the spacing between items.
+          </p>
+        </>
       ),
       props: { EuiListGroup, EuiListGroupItem },
       demo: <ListGroup />,
+      snippet: `<EuiListGroup flush={true} bordered={true}>
+  <EuiListGroupItem onClick={handleOnClick} label="Item" />
+</EuiListGroup>`,
     },
     {
       title: 'List of links',
@@ -68,16 +77,36 @@ export const ListGroupExample = {
         },
       ],
       text: (
-        <p>
-          Present <EuiCode>ListGroupItems</EuiCode> as links by providing an
-          &nbsp;<EuiCode>href</EuiCode> value and change their appearance with
-          the <EuiCode>size</EuiCode>, <EuiCode>isActive</EuiCode>, and
-          <EuiCode>isDisabled</EuiCode> properties. As done in this example, the
-          &nbsp;<EuiCode>ListGroup</EuiCode> component can also accept an array
-          of items via the <EuiCode>listItems</EuiCode> property.
-        </p>
+        <>
+          <p>
+            Display <strong>EuiListGroupItems</strong> as links by providing an{' '}
+            <EuiCode>href</EuiCode> value and change their state with the{' '}
+            <EuiCode>isActive</EuiCode> and <EuiCode>isDisabled</EuiCode>{' '}
+            properties.
+          </p>
+          <p>
+            As is done in this example, the <strong>EuiListGroup</strong>{' '}
+            component can also accept an array of items via the{' '}
+            <EuiCode>listItems</EuiCode> property.
+          </p>
+        </>
       ),
       demo: <ListGroupLinks />,
+      snippet: `<EuiListGroup
+  listItems={[
+    {
+      label: 'First link',
+      href: '#',
+      iconType: 'calendar',
+    },
+    {
+      label: 'Second link',
+      href: '#,
+      isActive: true,
+      iconType: 'clock',
+    }]
+  }
+/>`,
     },
     {
       title: 'Secondary link actions',
@@ -95,13 +124,24 @@ export const ListGroupExample = {
         <p>
           The <EuiCode>extraAction</EuiCode> property adds a secondary icon
           button to any list item. It accepts several properties of its own,
-          including <EuiCode>color</EuiCode>, <EuiCode>onClick</EuiCode>, &nbsp;
+          including <EuiCode>color</EuiCode>, <EuiCode>onClick</EuiCode>,{' '}
           <EuiCode>iconType</EuiCode>, and <EuiCode>alwaysShow</EuiCode>, and
           can be used for actions such as pinning, favoriting, or deleting an
           item.
         </p>
       ),
       demo: <ListGroupLinkActions />,
+      snippet: `<EuiListGroupItem
+  label="EUI button link"
+  extraAction={{
+    color: 'primary',
+    onClick: this.clicked,
+    iconType: 'pin',
+    iconSize: 's',
+    'aria-label': 'Pin link',
+    alwaysShow: pinned,
+  }}
+/>`,
     },
     {
       title: 'Text wrapping and tooltips',
@@ -124,6 +164,12 @@ export const ListGroupExample = {
         </p>
       ),
       demo: <ListGroupExtra />,
+      snippet: `<EuiListGroup showToolTips>
+  <EuiListGroupItem
+    wrapText
+    label="A very long label"
+  />
+</EuiListGroup>`,
     },
     {
       title: 'List item color and size',
@@ -154,6 +200,11 @@ export const ListGroupExample = {
         </>
       ),
       demo: <ListGroupItemColor />,
+      snippet: `<EuiListGroupItem
+  label="Primary"
+  color="primary"
+  size="s"
+/>`,
     },
   ],
 };
diff --git a/src-docs/src/views/list_group/list_group_link_actions.js b/src-docs/src/views/list_group/list_group_link_actions.js
index 129681e17db..e3e31b1df89 100644
--- a/src-docs/src/views/list_group/list_group_link_actions.js
+++ b/src-docs/src/views/list_group/list_group_link_actions.js
@@ -1,24 +1,14 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 
-import {
-  EuiListGroup,
-  EuiListGroupItem,
-  EuiSpacer,
-  EuiSwitch,
-  EuiCode,
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiListGroup, EuiListGroupItem } from '../../../../src/components';
 
 export default class extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      flushWidth: false,
-      showBorder: false,
       favorite1: undefined,
-      favorite2: undefined,
+      favorite2: 'link2',
       favorite3: undefined,
     };
   }
@@ -65,106 +55,71 @@ export default class extends Component {
   };
 
   render() {
-    const {
-      flushWidth,
-      showBorder,
-      favorite1,
-      favorite2,
-      favorite3,
-    } = this.state;
+    const { favorite1, favorite2, favorite3 } = this.state;
 
     return (
-      <Fragment>
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiSwitch
-              label={
-                <span>
-                  Show as <EuiCode>flush</EuiCode>
-                </span>
-              }
-              checked={this.state.flushWidth}
-              onChange={this.toggleFlushWidth}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiSwitch
-              label={
-                <span>
-                  Show as <EuiCode>bordered</EuiCode>
-                </span>
-              }
-              checked={this.state.showBorder}
-              onChange={this.toggleBorder}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+      <EuiListGroup maxWidth={288}>
+        <EuiListGroupItem
+          id="link1"
+          iconType="bullseye"
+          label="EUI button link"
+          onClick={() => window.alert('Button clicked')}
+          isActive
+          extraAction={{
+            color: 'subdued',
+            onClick: this.link1Clicked,
+            iconType: favorite1 === 'link1' ? 'pinFilled' : 'pin',
+            iconSize: 's',
+            'aria-label': 'Favorite link1',
+            alwaysShow: favorite1 === 'link1',
+          }}
+        />
 
-        <EuiSpacer size="l" />
+        <EuiListGroupItem
+          id="link2"
+          iconType="beaker"
+          onClick={() => window.alert('Button clicked')}
+          label="EUI button link"
+          extraAction={{
+            color: 'subdued',
+            onClick: this.link2Clicked,
+            iconType: favorite2 === 'link2' ? 'pinFilled' : 'pin',
+            iconSize: 's',
+            'aria-label': 'Favorite link2',
+            alwaysShow: favorite2 === 'link2',
+          }}
+        />
 
-        <EuiListGroup flush={flushWidth} bordered={showBorder} maxWidth={288}>
-          <EuiListGroupItem
-            id="link1"
-            iconType="bullseye"
-            label="EUI button link"
-            onClick={() => window.alert('Button clicked')}
-            isActive
-            extraAction={{
-              color: 'subdued',
-              onClick: this.link1Clicked,
-              iconType: favorite1 === 'link1' ? 'pinFilled' : 'pin',
-              iconSize: 's',
-              'aria-label': 'Favorite link1',
-              alwaysShow: favorite1 === 'link1',
-            }}
-          />
+        <EuiListGroupItem
+          id="link3"
+          onClick={() => window.alert('Button clicked')}
+          iconType="broom"
+          label="EUI button link"
+          extraAction={{
+            color: 'subdued',
+            onClick: this.link3Clicked,
+            iconType: favorite3 === 'link3' ? 'pinFilled' : 'pin',
+            iconSize: 's',
+            'aria-label': 'Favorite link3',
+            alwaysShow: favorite3 === 'link3',
+            isDisabled: true,
+          }}
+        />
 
-          <EuiListGroupItem
-            id="link2"
-            iconType="beaker"
-            onClick={() => window.alert('Button clicked')}
-            label="EUI button link"
-            extraAction={{
-              color: 'subdued',
-              onClick: this.link2Clicked,
-              iconType: favorite2 === 'link2' ? 'pinFilled' : 'pin',
-              iconSize: 's',
-              'aria-label': 'Favorite link2',
-              alwaysShow: favorite2 === 'link2',
-            }}
-          />
-
-          <EuiListGroupItem
-            id="link3"
-            onClick={() => window.alert('Button clicked')}
-            iconType="broom"
-            label="EUI button link"
-            extraAction={{
-              color: 'subdued',
-              onClick: this.link3Clicked,
-              iconType: favorite3 === 'link3' ? 'pinFilled' : 'pin',
-              iconSize: 's',
-              'aria-label': 'Favorite link3',
-              alwaysShow: favorite3 === 'link3',
-              isDisabled: true,
-            }}
-          />
-
-          <EuiListGroupItem
-            id="link4"
-            iconType="brush"
-            isDisabled
-            label="EUI button link"
-            extraAction={{
-              color: 'subdued',
-              onClick: () => window.alert('Action clicked'),
-              iconType: 'pin',
-              iconSize: 's',
-              'aria-label': 'Favorite link4',
-            }}
-          />
-        </EuiListGroup>
-      </Fragment>
+        <EuiListGroupItem
+          id="link4"
+          iconType="brush"
+          isDisabled
+          label="EUI button link"
+          extraAction={{
+            color: 'subdued',
+            onClick: () => window.alert('Action clicked'),
+            iconType: 'pin',
+            iconSize: 's',
+            'aria-label': 'Favorite link4',
+          }}
+        />
+      </EuiListGroup>
     );
   }
 }
diff --git a/src-docs/src/views/list_group/list_group_links.js b/src-docs/src/views/list_group/list_group_links.js
index c2660d17137..c0c5e7198ac 100644
--- a/src-docs/src/views/list_group/list_group_links.js
+++ b/src-docs/src/views/list_group/list_group_links.js
@@ -1,13 +1,6 @@
-import React, { Component, Fragment } from 'react';
+import React from 'react';
 
-import {
-  EuiListGroup,
-  EuiSpacer,
-  EuiSwitch,
-  EuiCode,
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiListGroup } from '../../../../src/components';
 
 const myContent = [
   {
@@ -44,62 +37,6 @@ const myContent = [
   },
 ];
 
-export default class extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      flushWidth: false,
-      showBorder: false,
-    };
-  }
-
-  toggleFlushWidth = () => {
-    this.setState(prevState => ({ flushWidth: !prevState.flushWidth }));
-  };
-
-  toggleBorder = () => {
-    this.setState(prevState => ({ showBorder: !prevState.showBorder }));
-  };
-
-  render() {
-    const { flushWidth, showBorder } = this.state;
-
-    return (
-      <Fragment>
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiSwitch
-              label={
-                <span>
-                  Show as <EuiCode>flush</EuiCode>
-                </span>
-              }
-              checked={this.state.flushWidth}
-              onChange={this.toggleFlushWidth}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiSwitch
-              label={
-                <span>
-                  Show as <EuiCode>bordered</EuiCode>
-                </span>
-              }
-              checked={this.state.showBorder}
-              onChange={this.toggleBorder}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-
-        <EuiSpacer size="l" />
-
-        <EuiListGroup
-          flush={flushWidth}
-          bordered={showBorder}
-          listItems={myContent}
-        />
-      </Fragment>
-    );
-  }
-}
+export default () => {
+  return <EuiListGroup listItems={myContent} />;
+};

From f490759fe43b0ca3ff0f143f01b315b38bd2bb4c Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 3 Mar 2020 22:09:31 -0500
Subject: [PATCH 4/5] Cleanup

---
 src/components/list_group/_index.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/list_group/_index.scss b/src/components/list_group/_index.scss
index a841513f7c6..bf49f315ffe 100644
--- a/src/components/list_group/_index.scss
+++ b/src/components/list_group/_index.scss
@@ -1,6 +1,3 @@
-// List group provides a way to neatly present a set of text-based items
-
-@import '../header/variables';
 @import 'variables';
 
 @import 'list_group';

From 7995d2dc40cbe5e5d002aadcd7e9a81a1d3a1c8f Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 5 Mar 2020 10:46:41 -0500
Subject: [PATCH 5/5] cl

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d4a73b2e4a5..bb3b3aff7b9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `20.1.0`.
+- Added `gutterSize` prop to `EuiListGroup` ([#2980](https://github.com/elastic/eui/pull/2980))
+- Added `color` prop to `EuiListGroupItem` and updated size style ([#2980](https://github.com/elastic/eui/pull/2980))
 
 ## [`20.1.0`](https://github.com/elastic/eui/tree/v20.1.0)