Add List Group component (#1377)

* initial commit of list group component * adds link action and cleanup * dark mode fix, changelog * EuiListGroup accepts array of items * misc feedback edits * use html elements * allow action links on all list items * add size prop for text * make fav work in demo * docs use pin icons * fix focus and dark styles * fix svg height for ie11 * Simplify inner contents of `EuiListGroupItem` * keyboard focus styles, more padding * add label class for nav collapsed * increase margin between icon and label * docs help text edits * make focus background full width
elastic · Jan 3, 2019 · 0fe748a · 0fe748a
1 parent c0bfb13
commit 0fe748a
Show file tree

Hide file tree

Showing 19 changed files with 928 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiListGroup` and `EuiListGroupItem` components ([#1377](https://github.com/elastic/eui/pull/1377))
 - Convert the other of the services to TypeScript ([#1392](https://github.com/elastic/eui/pull/1392))
 - Changed single selection to select existing option in the list ([#1391](https://github.com/elastic/eui/pull/1391))
 - Added `showUpdateButton` prop to `EuiSuperDatePicker` ([#1399](https://github.com/elastic/eui/pull/1399))
@@ -19,6 +20,7 @@
 - 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))

diff --git a/src-docs/src/routes.js b/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,

diff --git a/src-docs/src/views/list_group/list_group.js b/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>
+    );
+  }
+}
diff --git a/src-docs/src/views/list_group/list_group_example.js b/src-docs/src/views/list_group/list_group_example.js
@@ -0,0 +1,88 @@
+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> and <EuiCode>bordered</EuiCode> properties
+        for full-width and bordered presentations, respectively.
+      </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 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>
+    ),
+    demo: <ListGroupLinks />,
+  }, {
+    title: 'Secondary link actions',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: listGroupLinkActionsSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: listGroupLinkActionsHtml,
+    }],
+    text: (
+      <p>
+        The <EuiCode>extraAction</EuiCode> property adds a secondary icon
+        button to any list item. It accepts several properites of its own,
+        including <EuiCode>color</EuiCode>, <EuiCode>onClick</EuiCode>,
+        &nbsp;<EuiCode>iconType</EuiCode> and <EuiCode>alwaysShow</EuiCode>,
+        and can be used for actions such as pinning, favoriting, or deleting an
+        item.
+      </p>
+    ),
+    demo: <ListGroupLinkActions />,
+  }],
+};
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
@@ -0,0 +1,156 @@
+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,
+      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"
+            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="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>
+    );
+  }
+}