-
Notifications
You must be signed in to change notification settings - Fork 834
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into euiComboBox-onBlur
- Loading branch information
Showing
22 changed files
with
3,040 additions
and
701 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| <EuiCode>ListGroupItems</EuiCode> in a neatly formatted list. Use the | ||
| <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 | ||
| <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 | ||
| <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>, | ||
| <EuiCode>iconType</EuiCode> and <EuiCode>alwaysShow</EuiCode>, | ||
| and can be used for actions such as pinning, favoriting, or deleting an | ||
| item. | ||
| </p> | ||
| ), | ||
| demo: <ListGroupLinkActions />, | ||
| }], | ||
| }; |
156 changes: 156 additions & 0 deletions
156
src-docs/src/views/list_group/list_group_link_actions.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.