Add List Group component

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `6.0.0`.
+- Added `EuiListGroup` and `EuiListGroupItem` components ([#1377](https://github.com/elastic/eui/pull/1377))
 
 ## [`6.0.0`](https://github.com/elastic/eui/tree/v6.0.0)
 
@@ -11,6 +11,7 @@ No public interface changes since `6.0.0`.
 - Altered a few icons and added more: `crossInACircleFilled`, `editorRedo`, `editorUndo`, `grabHorizontal`, `minusInCircleFilled`, `plusInCircleFilled`, `sortable`, `starEmptySpace`, `starFilledSpace`, `starFilled`, `starMinusEmpty`, `starMinusFilled`, `starPlusEmpty`, `pinFilled` ([#1374](https://github.com/elastic/eui/pull/1374))
 - Exclude `custom_typings` from `eui.d.ts` ([#1395](https://github.com/elastic/eui/pull/1395))
 
+
 **Bug fixes**
 
 - Only style anchor tags in `EuiText` that have no class attribute ([#1373](https://github.com/elastic/eui/pull/1373))

src-docs/src/routes.js

@@ -159,6 +159,9 @@ import { KeyPadMenuExample }
 import { LinkExample }
   from './views/link/link_example';
 
+import { ListGroupExample }
+  from './views/list_group/list_group_example';
+
 import { LoadingExample }
   from './views/loading/loading_example';
 
@@ -364,6 +367,7 @@ const navigation = [{
     HealthExample,
     IconExample,
     ImageExample,
+    ListGroupExample,
     LoadingExample,
     ProgressExample,
     StatExample,

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

@@ -0,0 +1,80 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiSpacer,
+  EuiSwitch,
+  EuiCode,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+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}>
+          <EuiListGroupItem
+            label="First item"
+          />
+
+          <EuiListGroupItem
+            label="Second item"
+          />
+
+          <EuiListGroupItem
+            label="Third item"
+            isActive
+          />
+
+          <EuiListGroupItem
+            label="Fourth item"
+            isDisabled
+          />
+        </EuiListGroup>
+      </Fragment>
+    );
+  }
+}

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

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiCode,
+} from '../../../../src/components';
+
+import ListGroup from './list_group';
+const listGroupSource = require('!!raw-loader!./list_group');
+const listGroupHtml = renderToHtml(ListGroup);
+
+import ListGroupLinks from './list_group_links';
+const listGroupLinksSource = require('!!raw-loader!./list_group_links');
+const listGroupLinksHtml = renderToHtml(ListGroupLinks);
+
+import ListGroupLinkActions from './list_group_link_actions';
+const listGroupLinkActionsSource = require('!!raw-loader!./list_group_link_actions');
+const listGroupLinkActionsHtml = renderToHtml(ListGroupLinkActions);
+
+export const ListGroupExample = {
+  title: 'List Group',
+  sections: [{
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: listGroupSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: listGroupHtml,
+    }],
+    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> prop for a full-width, borderless alternative.
+      </p>
+    ),
+    props: { EuiListGroup, EuiListGroupItem },
+    demo: <ListGroup />,
+  }, {
+    title: 'List of links',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: listGroupLinksSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: listGroupLinksHtml,
+    }],
+    text: (
+      <p>
+        Present <EuiCode>ListGroupItems</EuiCode> as links by providing an
+        &nbsp;<EuiCode>href</EuiCode> value. The <EuiCode>label</EuiCode>
+        &nbsp;property also accepts EUI components such as <EuiCode>EuiText</EuiCode>,
+        for greater control.
+      </p>
+    ),
+    demo: <ListGroupLinks />,
+  }, {
+    title: 'Advanced links using other components',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: listGroupLinkActionsSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: listGroupLinkActionsHtml,
+    }],
+    text: (
+      <p>
+        Enable full EUI button properties by passing an
+        <EuiCode>EuiButtonEmpty</EuiCode> to the <EuiCode>label</EuiCode>
+        &nbsp;property. Use the <EuiCode>extraAction</EuiCode> property to add a
+        secondary action to any list item by passing it an
+        &nbsp;<EuiCode>EuiButtonIcon</EuiCode>.
+      </p>
+    ),
+    demo: <ListGroupLinkActions />,
+  }],
+};

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

@@ -0,0 +1,183 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiSpacer,
+  EuiSwitch,
+  EuiCode,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+} from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      flushWidth: false,
+      showBorder: false,
+      favorite1: undefined,
+      favorite2: undefined,
+      favorite3: undefined,
+    };
+  }
+
+  toggleFlushWidth = () => {
+    this.setState(prevState => ({ flushWidth: !prevState.flushWidth }));
+  };
+
+  toggleBorder = () => {
+    this.setState(prevState => ({ showBorder: !prevState.showBorder }));
+  };
+
+  link1Clicked = () => {
+    this.setState(prevState => {
+      return {
+        favorite1: prevState.favorite1 === 'link1' ? undefined : 'link1',
+      };
+    });
+    if (this.favorite1 === undefined) { document.activeElement.blur(); }
+  };
+
+  link2Clicked = () => {
+    this.setState(prevState => {
+      return {
+        favorite2: prevState.favorite2 === 'link2' ? undefined : 'link2',
+      };
+    });
+    if (this.favorite2 === undefined) { document.activeElement.blur(); }
+  };
+
+  link3Clicked = () => {
+    this.setState(prevState => {
+      return {
+        favorite3: prevState.favorite3 === 'link3' ? undefined : 'link3',
+      };
+    });
+    if (this.favorite3 === undefined) { document.activeElement.blur(); }
+  };
+
+  render() {
+    const {
+      flushWidth,
+      showBorder,
+      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>
+
+        <EuiSpacer size="l" />
+
+        <EuiListGroup flush={flushWidth} bordered={showBorder} maxWidth={288}>
+          <EuiListGroupItem
+            id="link1"
+            label={
+              <EuiButtonEmpty
+                onClick={() => window.alert('Button clicked')}
+                iconType="bullseye"
+                color="text"
+              >
+                EUI button link
+              </EuiButtonEmpty>
+            }
+            extraAction={{
+              color: 'subdued',
+              onClick: this.link1Clicked,
+              iconType: favorite1 === 'link1' ? 'pinFilled' : 'pin',
+              iconSize: 's',
+              'aria-label': 'Favorite link1',
+              // style: { opacity: favorite1 === 'link1' ? 1 : 0.5},
+            }}
+            alwaysShowAction={favorite1 === 'link1'}
+          />
+
+          <EuiListGroupItem
+            id="link2"
+            label={
+              <EuiButtonEmpty
+                onClick={() => window.alert('Button clicked')}
+                iconType="beaker"
+                color="text"
+              >
+                EUI button link
+              </EuiButtonEmpty>
+            }
+            extraAction={{
+              color: 'subdued',
+              onClick: this.link2Clicked,
+              iconType: favorite2 === 'link2' ? 'pinFilled' : 'pin',
+              iconSize: 's',
+              'aria-label': 'Favorite link2',
+            }}
+            alwaysShowAction={favorite2 === 'link2'}
+          />
+
+          <EuiListGroupItem
+            id="link3"
+            label={
+              <EuiButtonEmpty
+                onClick={() => window.alert('Button clicked')}
+                iconType="broom"
+                color="text"
+              >
+                EUI button link
+              </EuiButtonEmpty>
+            }
+            extraAction={{
+              color: 'subdued',
+              onClick: this.link3Clicked,
+              iconType: favorite3 === 'link3' ? 'pinFilled' : 'pin',
+              iconSize: 's',
+              'aria-label': 'Favorite link3',
+            }}
+            alwaysShowAction={favorite3 === 'link3'}
+          />
+
+          <EuiListGroupItem
+            id="link4"
+            label={
+              <EuiButtonEmpty
+                onClick={() => window.alert('Button clicked')}
+                iconType="brush"
+                color="text"
+                isDisabled
+              >
+                EUI button link
+              </EuiButtonEmpty>
+            }
+            extraAction={{
+              color: 'subdued',
+              onClick: () => window.alert('Action clicked'),
+              iconType: 'pin',
+              iconSize: 's',
+              'aria-label': 'Favorite link4',
+              isDisabled: true,
+            }}
+            isDisabled
+          />
+        </EuiListGroup>
+      </Fragment>
+    );
+  }
+}