Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiListGroup] and [Items] Adds gutterSize, color #2980

Merged
merged 7 commits into from
Mar 5, 2020
Merged

[EuiListGroup] and [Items] Adds gutterSize, color #2980

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b435d22
[EuiListGroup] Added `gutterSize`
Mar 4, 2020
61c4a45
[EuiListGroupItem] Added `color` prop and updated size styles
Mar 4, 2020
4aaddb5
Fix up the docs
Mar 4, 2020
f490759
Cleanup
Mar 4, 2020
7995d2d
cl
Mar 5, 2020
01c4d63
Merge branch 'master' into props/list_group
cchaos Mar 5, 2020
ae92d26
Merge branch 'master' into props/list_group
cchaos Mar 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 101 additions & 16 deletions src-docs/src/views/list_group/list_group_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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"
/>`,
},
],
};
23 changes: 23 additions & 0 deletions src-docs/src/views/list_group/list_group_item_color.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
171 changes: 63 additions & 108 deletions src-docs/src/views/list_group/list_group_link_actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
};
}
Expand Down Expand Up @@ -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>
);
}
}
Loading