Skip to content

Commit 6e23c90

Browse files
ryankeairnsryankeairns
committed
simplify logic, use new viz palette, add snippets
1 parent 48028f6 commit 6e23c90

File tree

11 files changed

+207
-27521
lines changed

11 files changed

+207
-27521
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 27323 deletions
This file was deleted.

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@
5050
"@types/react-beautiful-dnd": "^10.1.0",
5151
"chroma-js": "^2.0.4",
5252
"classnames": "^2.2.5",
53-
"chroma-js": "^2.0.4",
5453
"highlight.js": "^9.12.0",
5554
"html": "^1.0.0",
5655
"keymirror": "^0.1.1",

‎src-docs/src/views/badge/badge.js‎

Lines changed: 61 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import React, { Fragment } from 'react';
1+
import React, { Fragment, useState } from 'react';
22

33
import {
44
EuiBadge,
55
EuiFlexItem,
66
EuiFlexGroup,
77
EuiSpacer,
8+
EuiSwitch,
9+
EuiText,
810
EuiTitle,
911
} from '../../../../src/components';
1012

@@ -19,54 +21,72 @@ const badges = [
1921
];
2022

2123
const customBadges = [
22-
'#AAA',
2324
'#DDD',
24-
'#999',
25+
'#AAA',
2526
'#666',
2627
'#333',
27-
'#000',
2828
'#BADA55',
2929
'#FCF7BC',
3030
'#FEA27F',
3131
'#FFA500',
3232
'#0000FF',
3333
];
3434

35-
export default () => (
36-
<Fragment>
37-
<EuiTitle size="xxs">
38-
<h3>EUI colors</h3>
39-
</EuiTitle>
40-
<EuiSpacer size="s" />
41-
<EuiFlexGroup
42-
wrap
43-
responsive={false}
44-
gutterSize="xs"
45-
style={{ width: 300 }}>
46-
{badges.map(badge => (
47-
<EuiFlexItem grow={false} key={badge}>
48-
<EuiBadge color={badge}>{badge}</EuiBadge>
49-
</EuiFlexItem>
50-
))}
51-
<EuiFlexItem grow={false}>
52-
<EuiBadge isDisabled={true}>disabled</EuiBadge>
53-
</EuiFlexItem>
54-
</EuiFlexGroup>
55-
<EuiSpacer />
56-
<EuiTitle size="xxs">
57-
<h3>Custom HEX colors</h3>
58-
</EuiTitle>
59-
<EuiSpacer size="s" />
60-
<EuiFlexGroup
61-
wrap
62-
responsive={false}
63-
gutterSize="xs"
64-
style={{ width: 300 }}>
65-
{customBadges.map(badge => (
66-
<EuiFlexItem grow={false} key={badge}>
67-
<EuiBadge color={badge}>{badge}</EuiBadge>
35+
export default () => {
36+
const [isDisabled, setDisabled] = useState(false);
37+
38+
return (
39+
<Fragment>
40+
<EuiTitle size="xs">
41+
<h3>Accepted color names</h3>
42+
</EuiTitle>
43+
<EuiSpacer size="m" />
44+
<EuiFlexGroup wrap responsive={false} gutterSize="xs">
45+
{badges.map(badge => (
46+
<EuiFlexItem grow={false} key={badge}>
47+
<EuiBadge color={badge}>{badge}</EuiBadge>
48+
</EuiFlexItem>
49+
))}
50+
</EuiFlexGroup>
51+
<EuiSpacer />
52+
<EuiTitle size="xs">
53+
<h3>Custom color examples</h3>
54+
</EuiTitle>
55+
<EuiSpacer size="m" />
56+
<EuiFlexGroup
57+
wrap
58+
responsive={false}
59+
gutterSize="xs"
60+
style={{ width: '300px' }}>
61+
{customBadges.map(badge => (
62+
<EuiFlexItem grow={false} key={badge}>
63+
<EuiBadge color={badge}>{badge}</EuiBadge>
64+
</EuiFlexItem>
65+
))}
66+
</EuiFlexGroup>
67+
<EuiSpacer />
68+
<EuiTitle size="xs">
69+
<h3>Disabled state</h3>
70+
</EuiTitle>
71+
<EuiSpacer size="m" />
72+
<EuiText size="s">
73+
Regardless of the assigned color, all badges use the same disabled state
74+
styles.
75+
</EuiText>
76+
<EuiSpacer size="m" />
77+
<EuiSwitch
78+
label="Show disabled state"
79+
checked={isDisabled}
80+
onChange={e => setDisabled(e.target.checked)}
81+
/>
82+
<EuiSpacer size="m" />
83+
<EuiFlexGroup wrap responsive={false} gutterSize="xs">
84+
<EuiFlexItem grow={false}>
85+
<EuiBadge color="secondary" isDisabled={isDisabled}>
86+
{isDisabled ? 'Disabled badge' : 'Disable me!'}
87+
</EuiBadge>
6888
</EuiFlexItem>
69-
))}
70-
</EuiFlexGroup>
71-
</Fragment>
72-
);
89+
</EuiFlexGroup>
90+
</Fragment>
91+
);
92+
};

‎src-docs/src/views/badge/badge_button.js‎

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,43 +7,31 @@ export default () => (
77
<EuiBadge
88
color="primary"
99
onClick={() => window.alert('Badge clicked')}
10-
onClickAriaLabel="Example of onclick event for the button"
10+
onClickAriaLabel="Example of onClick event for the button"
1111
data-test-sub="testExample1">
12-
onClick on badge itself
12+
onClick on text within badge
1313
</EuiBadge>
1414

1515
<EuiBadge
16+
color="hollow"
1617
iconType="cross"
1718
iconSide="right"
18-
color="#333"
1919
iconOnClick={() => window.alert('Icon inside badge clicked')}
20-
iconOnClickAriaLabel="Example of onclick event for icon within the button"
20+
iconOnClickAriaLabel="Example of onClick event for icon within the button"
2121
data-test-sub="testExample2">
2222
onClick on icon within badge
2323
</EuiBadge>
2424

2525
<EuiBadge
26-
iconType="cross"
27-
iconSide="right"
2826
color="secondary"
29-
onClick={() => window.alert('Badge clicked')}
30-
onClickAriaLabel="Example of onclick event for the button"
31-
iconOnClick={() => window.alert('Icon inside badge clicked')}
32-
iconOnClickAriaLabel="Example of onclick event for icon within the button"
33-
data-test-sub="testExample3">
34-
onClick on itself and the icon
35-
</EuiBadge>
36-
37-
<EuiBadge
3827
iconType="cross"
3928
iconSide="right"
40-
color="danger"
4129
onClick={() => window.alert('Badge clicked')}
42-
onClickAriaLabel="Example of onclick event for the button"
30+
onClickAriaLabel="Example of onClick event for the button"
4331
iconOnClick={() => window.alert('Icon inside badge clicked')}
44-
iconOnClickAriaLabel="Example of onclick event for icon within the button"
32+
iconOnClickAriaLabel="Example of onClick event for icon within the button"
4533
data-test-sub="testExample3">
46-
onClick on itself and the icon
34+
onClick on both text and icon within badge
4735
</EuiBadge>
4836
</div>
4937
);

‎src-docs/src/views/badge/badge_example.js‎

Lines changed: 62 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,26 +17,77 @@ import {
1717
import Badge from './badge';
1818
const badgeSource = require('!!raw-loader!./badge');
1919
const badgeHtml = renderToHtml(Badge);
20+
const badgeSnippet = [
21+
`<EuiBadge>Default</EuiBadge>
22+
`,
23+
`<EuiBadge color="hollow">Hollow</EuiBadge>
24+
`,
25+
`<EuiBadge color="#BADA55">Custom</EuiBadge>
26+
`,
27+
`<EuiBadge color="secondary" isDisabled>Disabled</EuiBadge>
28+
`,
29+
];
2030

2131
import BadgeWithIcon from './badge_with_icon';
2232
const badgeWithIconSource = require('!!raw-loader!./badge_with_icon');
2333
const badgeWithIconHtml = renderToHtml(BadgeWithIcon);
34+
const badgeWithIconSnippet = `<EuiBadge color="hollow" iconType="cross" iconSide="right">Label</EuiBadge>
35+
`;
2436

2537
import BadgeButton from './badge_button';
2638
const badgeButtonSource = require('!!raw-loader!./badge_button');
2739
const badgeButtonHtml = renderToHtml(BadgeButton);
40+
const badgeButtonSnippet = [
41+
`<EuiBadge
42+
color="primary"
43+
onClick={this.onBadgeClick}
44+
onClickAriaLabel="Aria label applied to text button"
45+
/>
46+
Clickable text
47+
</EuiBadge>`,
48+
`<EuiBadge
49+
iconType="cross"
50+
iconSide="right"
51+
color="hollow"
52+
iconOnClick={this.onBadgeIconClick}
53+
iconOnClickAriaLabel="Aria label applied to icon button"
54+
/>
55+
Text with clickable icon
56+
</EuiBadge>`,
57+
`<EuiBadge
58+
iconType="cross"
59+
iconSide="right"
60+
color="secondary"
61+
onClick={this.onBadgeClick}
62+
onClickAriaLabel="Aria label applied to text button"
63+
iconOnClick={this.onBadgeIconClick}
64+
iconOnClickAriaLabel="Aria label applied to icon button"
65+
/>
66+
Clickable text with clickable icon
67+
</EuiBadge>`,
68+
];
69+
70+
import BadgeTruncate from './badge_truncate';
71+
const badgeTruncateSource = require('!!raw-loader!./badge_truncate');
72+
const badgeTruncateHtml = renderToHtml(BadgeTruncate);
2873

2974
import BetaBadge from './beta_badge';
3075
const betaBadgeSource = require('!!raw-loader!./beta_badge');
3176
const betaBadgeHtml = renderToHtml(BetaBadge);
77+
const betaBadgeSnippet = [
78+
`<EuiBetaBadge label="Beta" />
79+
`,
80+
`<EuiBetaBadge label="Lab" tooltipContent="Describe why this is considered beta." />
81+
`,
82+
`<EuiBetaBadge label="Lab" iconType="beaker" />
83+
`,
84+
];
3285

3386
import NotificationBadge from './notification_badge';
3487
const notificationBadgeSource = require('!!raw-loader!./notification_badge');
3588
const notificationBadgeHtml = renderToHtml(NotificationBadge);
36-
37-
import BadgeTruncate from './badge_truncate';
38-
const badgeTruncateSource = require('!!raw-loader!./badge_truncate');
39-
const badgeTruncateHtml = renderToHtml(BadgeTruncate);
89+
const notificationBadgeSnippet = `<EuiNotificationBadge>3</EuiNotificationBadge>
90+
`;
4091

4192
export const BadgeExample = {
4293
title: 'Badge',
@@ -58,10 +109,11 @@ export const BadgeExample = {
58109
they will automatically space themselves if you use them in a
59110
repetitive fashion it is good form to wrap them using a{' '}
60111
<EuiCode>FlexGroup</EuiCode> so that they will wrap when width is
61-
constrained (as is done artificially in the example below).
112+
constrained (as seen in the custom color example below).
62113
</p>
63114
),
64115
props: { EuiBadge },
116+
snippet: badgeSnippet,
65117
demo: <Badge />,
66118
},
67119
{
@@ -77,6 +129,7 @@ export const BadgeExample = {
77129
},
78130
],
79131
text: <p>Badges can use icons on the left and right (default) sides.</p>,
132+
snippet: badgeWithIconSnippet,
80133
demo: <BadgeWithIcon />,
81134
},
82135
{
@@ -111,6 +164,7 @@ export const BadgeExample = {
111164
</EuiCallOut>
112165
</div>
113166
),
167+
snippet: badgeButtonSnippet,
114168
demo: <BadgeButton />,
115169
},
116170
{
@@ -178,6 +232,7 @@ export const BadgeExample = {
178232
</div>
179233
),
180234
props: { EuiBetaBadge },
235+
snippet: betaBadgeSnippet,
181236
demo: <BetaBadge />,
182237
},
183238
{
@@ -196,11 +251,12 @@ export const BadgeExample = {
196251
<p>
197252
Used to showcase the number of notifications, alerts or hidden
198253
selections. Typically used in{' '}
199-
<Link to="/layout/header">EuiHeader</Link> or (eventually){' '}
254+
<Link to="/layout/header">EuiHeader</Link>{' '}
200255
<Link to="/forms/filter-group">EuiFilterButtons</Link>.
201256
</p>
202257
),
203258
props: { EuiNotificationBadge },
259+
snippet: notificationBadgeSnippet,
204260
demo: <NotificationBadge />,
205261
},
206262
],

‎src-docs/src/views/badge/badge_with_icon.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { EuiBadge } from '../../../../src/components';
44

55
export default () => (
66
<div>
7-
<EuiBadge iconType="check">Default</EuiBadge>
8-
9-
<EuiBadge color="primary" iconType="cross" iconSide="right">
10-
Primary
7+
<EuiBadge color="hollow" iconType="cross" iconSide="right">
8+
Hollow
119
</EuiBadge>
10+
11+
<EuiBadge iconType="check">Default</EuiBadge>
1212
</div>
1313
);

‎src-docs/src/views/badge/beta_badge.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default () => (
1717
&emsp;
1818
<EuiBetaBadge label="Lab" iconType="beaker" />
1919
<EuiSpacer />
20-
<EuiTitle>
20+
<EuiTitle size="s">
2121
<h3>
2222
Beta badges will also line up nicely with titles &nbsp;
2323
<EuiBetaBadge

0 commit comments

Comments
 (0)