[EuiListGroup] and [Items] Adds gutterSize, color

CHANGELOG.md

@@ -4,6 +4,8 @@
 - Added `EuiSkipLink` component ([#2976](https://github.com/elastic/eui/pull/2976))
 - Created `EuiBadgeGroup` component ([#2921](https://github.com/elastic/eui/pull/2921))
 - Added `sections` and `position` props to `EuiHeader` ([#2928](https://github.com/elastic/eui/pull/2928))
+- 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))
 
 **Bug Fixes**
 

src-docs/src/views/list_group/list_group_example.js

@@ -26,8 +26,12 @@ 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',
+  title: 'List group',
   sections: [
     {
       source: [
@@ -41,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',
@@ -64,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',
@@ -91,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',
@@ -120,6 +164,47 @@ export const ListGroupExample = {
         </p>
       ),
       demo: <ListGroupExtra />,
+      snippet: `<EuiListGroup showToolTips>
+  <EuiListGroupItem
+    wrapText
+    label="A very long label"
+  />
+</EuiListGroup>`,
+    },
+    {
+      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 />,
+      snippet: `<EuiListGroupItem
+  label="Primary"
+  color="primary"
+  size="s"
+/>`,
     },
   ],
 };

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>
+);

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>
     );
   }
 }