Skip to content

Commit fc3d292

Browse files
ryankeairnscchaos
ryankeairns
and
cchaos
authored
Improve badge colors (#2455)
* convert to using chroma-js * update snapshots * addressing feedback * simplify logic, use new viz palette, add snippets * copy change * fix ze mobilez * [Viz color palette] Darken a few colors Colors 0, and 4-8 have been darkend to get closer to a ration of 3:1 though some still don’t quite make it passed 2:1 while still being color-blind acceptable * Increased brightness of vis palette for badges * cl * address feedback Co-authored-by: Caroline Horn <[email protected]>
1 parent accdb66 commit fc3d292

File tree

23 files changed

+366
-195
lines changed

23 files changed

+366
-195
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
## [`master`](https://github.com/elastic/eui/tree/master)
22

3+
- Changed `EuiBadge` to use EUI palette colors ([#2455](https://github.com/elastic/eui/pull/2455))
4+
- Darkened a few `euiPaletteColorBlind` colors ([#2455](https://github.com/elastic/eui/pull/2455))
35
- Fixed bug in `EuiCard` where button text was not properly aligned ([#2741](https://github.com/elastic/eui/pull/2741))
46
- Converted `EuiRange` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))
57
- Converted `EuiDualRange` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@
4848
"@types/lodash": "^4.14.116",
4949
"@types/numeral": "^0.0.25",
5050
"@types/react-beautiful-dnd": "^10.1.0",
51-
"classnames": "^2.2.5",
5251
"chroma-js": "^2.0.4",
52+
"classnames": "^2.2.5",
5353
"highlight.js": "^9.12.0",
5454
"html": "^1.0.0",
5555
"keymirror": "^0.1.1",

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

Lines changed: 75 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import React from 'react';
1+
import React, { Fragment, useState } from 'react';
22

33
import {
44
EuiBadge,
55
EuiFlexItem,
66
EuiFlexGroup,
7+
EuiSpacer,
8+
EuiSwitch,
9+
EuiText,
10+
EuiTitle,
711
} from '../../../../src/components';
812

913
const badges = [
@@ -14,19 +18,75 @@ const badges = [
1418
'accent',
1519
'warning',
1620
'danger',
17-
'#000',
18-
'#fea27f',
1921
];
2022

21-
export default () => (
22-
<EuiFlexGroup wrap responsive={false} gutterSize="xs" style={{ width: 300 }}>
23-
{badges.map(badge => (
24-
<EuiFlexItem grow={false} key={badge}>
25-
<EuiBadge color={badge}>{badge}</EuiBadge>
26-
</EuiFlexItem>
27-
))}
28-
<EuiFlexItem grow={false}>
29-
<EuiBadge isDisabled={true}>disabled</EuiBadge>
30-
</EuiFlexItem>
31-
</EuiFlexGroup>
32-
);
23+
const customBadges = [
24+
'#DDD',
25+
'#AAA',
26+
'#666',
27+
'#333',
28+
'#BADA55',
29+
'#FCF7BC',
30+
'#FEA27F',
31+
'#FFA500',
32+
'#0000FF',
33+
];
34+
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={{ maxWidth: '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>
88+
</EuiFlexItem>
89+
</EuiFlexGroup>
90+
</Fragment>
91+
);
92+
};

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

Lines changed: 40 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,45 @@
11
import React from 'react';
22

3-
import { EuiBadge } from '../../../../src/components';
3+
import {
4+
EuiBadge,
5+
EuiFlexGroup,
6+
EuiFlexItem,
7+
} from '../../../../src/components';
48

59
export default () => (
6-
<div>
7-
<EuiBadge
8-
color="#333"
9-
onClick={() => window.alert('Badge clicked')}
10-
onClickAriaLabel="Example of onclick event for the button"
11-
data-test-sub="testExample1">
12-
onClick on badge itself
13-
</EuiBadge>
14-
15-
<EuiBadge
16-
iconType="cross"
17-
iconSide="right"
18-
color="#333"
19-
iconOnClick={() => window.alert('Icon inside badge clicked')}
20-
iconOnClickAriaLabel="Example of onclick event for icon within the button"
21-
data-test-sub="testExample2">
22-
onClick on icon within badge
23-
</EuiBadge>
24-
25-
<EuiBadge
26-
iconType="cross"
27-
iconSide="right"
28-
color="#333"
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-
</div>
10+
<EuiFlexGroup wrap responsive={false} gutterSize="xs">
11+
<EuiFlexItem grow={false}>
12+
<EuiBadge
13+
color="primary"
14+
onClick={() => window.alert('Badge clicked')}
15+
onClickAriaLabel="Example of onClick event for the button"
16+
data-test-sub="testExample1">
17+
onClick on text within badge
18+
</EuiBadge>
19+
</EuiFlexItem>
20+
<EuiFlexItem grow={false}>
21+
<EuiBadge
22+
color="hollow"
23+
iconType="cross"
24+
iconSide="right"
25+
iconOnClick={() => window.alert('Icon inside badge clicked')}
26+
iconOnClickAriaLabel="Example of onClick event for icon within the button"
27+
data-test-sub="testExample2">
28+
onClick on icon within badge
29+
</EuiBadge>
30+
</EuiFlexItem>
31+
<EuiFlexItem grow={false}>
32+
<EuiBadge
33+
color="secondary"
34+
iconType="cross"
35+
iconSide="right"
36+
onClick={() => window.alert('Badge clicked')}
37+
onClickAriaLabel="Example of onClick event for the button"
38+
iconOnClick={() => window.alert('Icon inside badge clicked')}
39+
iconOnClickAriaLabel="Example of onClick event for icon within the button"
40+
data-test-sub="testExample3">
41+
onClick on both text and icon within badge
42+
</EuiBadge>
43+
</EuiFlexItem>
44+
</EuiFlexGroup>
3745
);

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

Lines changed: 67 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,26 +17,79 @@ 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="primary">Primary</EuiBadge>
26+
`,
27+
`<EuiBadge color="#BADA55">Custom</EuiBadge>
28+
`,
29+
`<EuiBadge color="secondary" isDisabled>Disabled</EuiBadge>
30+
`,
31+
];
2032

2133
import BadgeWithIcon from './badge_with_icon';
2234
const badgeWithIconSource = require('!!raw-loader!./badge_with_icon');
2335
const badgeWithIconHtml = renderToHtml(BadgeWithIcon);
36+
const badgeWithIconSnippet = `<EuiBadge color="hollow" iconType="cross" iconSide="right">Label</EuiBadge>
37+
`;
2438

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

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

3388
import NotificationBadge from './notification_badge';
3489
const notificationBadgeSource = require('!!raw-loader!./notification_badge');
3590
const notificationBadgeHtml = renderToHtml(NotificationBadge);
36-
37-
import BadgeTruncate from './badge_truncate';
38-
const badgeTruncateSource = require('!!raw-loader!./badge_truncate');
39-
const badgeTruncateHtml = renderToHtml(BadgeTruncate);
91+
const notificationBadgeSnippet = `<EuiNotificationBadge>3</EuiNotificationBadge>
92+
`;
4093

4194
export const BadgeExample = {
4295
title: 'Badge',
@@ -58,10 +111,11 @@ export const BadgeExample = {
58111
they will automatically space themselves if you use them in a
59112
repetitive fashion it is good form to wrap them using a{' '}
60113
<EuiCode>FlexGroup</EuiCode> so that they will wrap when width is
61-
constrained (as is done artificially in the example below).
114+
constrained (as seen in the custom color example below).
62115
</p>
63116
),
64117
props: { EuiBadge },
118+
snippet: badgeSnippet,
65119
demo: <Badge />,
66120
},
67121
{
@@ -77,6 +131,7 @@ export const BadgeExample = {
77131
},
78132
],
79133
text: <p>Badges can use icons on the left and right (default) sides.</p>,
134+
snippet: badgeWithIconSnippet,
80135
demo: <BadgeWithIcon />,
81136
},
82137
{
@@ -111,6 +166,7 @@ export const BadgeExample = {
111166
</EuiCallOut>
112167
</div>
113168
),
169+
snippet: badgeButtonSnippet,
114170
demo: <BadgeButton />,
115171
},
116172
{
@@ -178,6 +234,7 @@ export const BadgeExample = {
178234
</div>
179235
),
180236
props: { EuiBetaBadge },
237+
snippet: betaBadgeSnippet,
181238
demo: <BetaBadge />,
182239
},
183240
{
@@ -194,13 +251,14 @@ export const BadgeExample = {
194251
],
195252
text: (
196253
<p>
197-
Used to showcase the number of notifications, alerts or hidden
198-
selections. Typically used in{' '}
199-
<Link to="/layout/header">EuiHeader</Link> or (eventually){' '}
200-
<Link to="/forms/filter-group">EuiFilterButtons</Link>.
254+
Used to showcase the number of notifications, alerts, or hidden
255+
selections. This badge type is commonly used in the{' '}
256+
<Link to="/layout/header">EuiHeader</Link> and{' '}
257+
<Link to="/forms/filter-group">EuiFilterButton</Link> components.
201258
</p>
202259
),
203260
props: { EuiNotificationBadge },
261+
snippet: notificationBadgeSnippet,
204262
demo: <NotificationBadge />,
205263
},
206264
],

‎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

‎src-docs/src/views/color_picker/color_stops.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const ColorStops = () => {
1010
const [extendedColorStops, setExtendedColorStops] = useState([
1111
{
1212
stop: 100,
13-
color: '#5BBAA0',
13+
color: '#54B399',
1414
},
1515
{
1616
stop: 250,

‎src-docs/src/views/color_picker/utils.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const useColorStop = (useRandomColor = false) => {
1010
const [colorStops, setColorStops] = useState([
1111
{
1212
stop: 20,
13-
color: '#5BBAA0',
13+
color: '#54B399',
1414
},
1515
{
1616
stop: 50,

0 commit comments

Comments
 (0)