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 <549577+cchaos@users.noreply.github.com>
elastic · Jan 8, 2020 · fc3d292 · fc3d292
1 parent accdb66
commit fc3d292
Show file tree

Hide file tree

Showing 23 changed files with 366 additions and 195 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Changed `EuiBadge` to use EUI palette colors ([#2455](https://github.com/elastic/eui/pull/2455))
+- Darkened a few `euiPaletteColorBlind` colors ([#2455](https://github.com/elastic/eui/pull/2455))
 - Fixed bug in `EuiCard` where button text was not properly aligned ([#2741](https://github.com/elastic/eui/pull/2741))
 - Converted `EuiRange` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))
 - Converted `EuiDualRange` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))

diff --git a/package.json b/package.json
@@ -48,8 +48,8 @@
     "@types/lodash": "^4.14.116",
     "@types/numeral": "^0.0.25",
     "@types/react-beautiful-dnd": "^10.1.0",
-    "classnames": "^2.2.5",
     "chroma-js": "^2.0.4",
+    "classnames": "^2.2.5",
     "highlight.js": "^9.12.0",
     "html": "^1.0.0",
     "keymirror": "^0.1.1",

diff --git a/src-docs/src/views/badge/badge.js b/src-docs/src/views/badge/badge.js
@@ -1,9 +1,13 @@
-import React from 'react';
+import React, { Fragment, useState } from 'react';
 
 import {
   EuiBadge,
   EuiFlexItem,
   EuiFlexGroup,
+  EuiSpacer,
+  EuiSwitch,
+  EuiText,
+  EuiTitle,
 } from '../../../../src/components';
 
 const badges = [
@@ -14,19 +18,75 @@ const badges = [
   'accent',
   'warning',
   'danger',
-  '#000',
-  '#fea27f',
 ];
 
-export default () => (
-  <EuiFlexGroup wrap responsive={false} gutterSize="xs" style={{ width: 300 }}>
-    {badges.map(badge => (
-      <EuiFlexItem grow={false} key={badge}>
-        <EuiBadge color={badge}>{badge}</EuiBadge>
-      </EuiFlexItem>
-    ))}
-    <EuiFlexItem grow={false}>
-      <EuiBadge isDisabled={true}>disabled</EuiBadge>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+const customBadges = [
+  '#DDD',
+  '#AAA',
+  '#666',
+  '#333',
+  '#BADA55',
+  '#FCF7BC',
+  '#FEA27F',
+  '#FFA500',
+  '#0000FF',
+];
+
+export default () => {
+  const [isDisabled, setDisabled] = useState(false);
+
+  return (
+    <Fragment>
+      <EuiTitle size="xs">
+        <h3>Accepted color names</h3>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup wrap responsive={false} gutterSize="xs">
+        {badges.map(badge => (
+          <EuiFlexItem grow={false} key={badge}>
+            <EuiBadge color={badge}>{badge}</EuiBadge>
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiTitle size="xs">
+        <h3>Custom color examples</h3>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup
+        wrap
+        responsive={false}
+        gutterSize="xs"
+        style={{ maxWidth: '300px' }}>
+        {customBadges.map(badge => (
+          <EuiFlexItem grow={false} key={badge}>
+            <EuiBadge color={badge}>{badge}</EuiBadge>
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiTitle size="xs">
+        <h3>Disabled state</h3>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiText size="s">
+        Regardless of the assigned color, all badges use the same disabled state
+        styles.
+      </EuiText>
+      <EuiSpacer size="m" />
+      <EuiSwitch
+        label="Show disabled state"
+        checked={isDisabled}
+        onChange={e => setDisabled(e.target.checked)}
+      />
+      <EuiSpacer size="m" />
+      <EuiFlexGroup wrap responsive={false} gutterSize="xs">
+        <EuiFlexItem grow={false}>
+          <EuiBadge color="secondary" isDisabled={isDisabled}>
+            {isDisabled ? 'Disabled badge' : 'Disable me!'}
+          </EuiBadge>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </Fragment>
+  );
+};
diff --git a/src-docs/src/views/badge/badge_button.js b/src-docs/src/views/badge/badge_button.js
@@ -1,37 +1,45 @@
 import React from 'react';
 
-import { EuiBadge } from '../../../../src/components';
+import {
+  EuiBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
 
 export default () => (
-  <div>
-    <EuiBadge
-      color="#333"
-      onClick={() => window.alert('Badge clicked')}
-      onClickAriaLabel="Example of onclick event for the button"
-      data-test-sub="testExample1">
-      onClick on badge itself
-    </EuiBadge>
-
-    <EuiBadge
-      iconType="cross"
-      iconSide="right"
-      color="#333"
-      iconOnClick={() => window.alert('Icon inside badge clicked')}
-      iconOnClickAriaLabel="Example of onclick event for icon within the button"
-      data-test-sub="testExample2">
-      onClick on icon within badge
-    </EuiBadge>
-
-    <EuiBadge
-      iconType="cross"
-      iconSide="right"
-      color="#333"
-      onClick={() => window.alert('Badge clicked')}
-      onClickAriaLabel="Example of onclick event for the button"
-      iconOnClick={() => window.alert('Icon inside badge clicked')}
-      iconOnClickAriaLabel="Example of onclick event for icon within the button"
-      data-test-sub="testExample3">
-      onClick on itself and the icon
-    </EuiBadge>
-  </div>
+  <EuiFlexGroup wrap responsive={false} gutterSize="xs">
+    <EuiFlexItem grow={false}>
+      <EuiBadge
+        color="primary"
+        onClick={() => window.alert('Badge clicked')}
+        onClickAriaLabel="Example of onClick event for the button"
+        data-test-sub="testExample1">
+        onClick on text within badge
+      </EuiBadge>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiBadge
+        color="hollow"
+        iconType="cross"
+        iconSide="right"
+        iconOnClick={() => window.alert('Icon inside badge clicked')}
+        iconOnClickAriaLabel="Example of onClick event for icon within the button"
+        data-test-sub="testExample2">
+        onClick on icon within badge
+      </EuiBadge>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiBadge
+        color="secondary"
+        iconType="cross"
+        iconSide="right"
+        onClick={() => window.alert('Badge clicked')}
+        onClickAriaLabel="Example of onClick event for the button"
+        iconOnClick={() => window.alert('Icon inside badge clicked')}
+        iconOnClickAriaLabel="Example of onClick event for icon within the button"
+        data-test-sub="testExample3">
+        onClick on both text and icon within badge
+      </EuiBadge>
+    </EuiFlexItem>
+  </EuiFlexGroup>
 );
diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js
@@ -17,26 +17,79 @@ import {
 import Badge from './badge';
 const badgeSource = require('!!raw-loader!./badge');
 const badgeHtml = renderToHtml(Badge);
+const badgeSnippet = [
+  `<EuiBadge>Default</EuiBadge>
+`,
+  `<EuiBadge color="hollow">Hollow</EuiBadge>
+`,
+  `<EuiBadge color="primary">Primary</EuiBadge>
+`,
+  `<EuiBadge color="#BADA55">Custom</EuiBadge>
+`,
+  `<EuiBadge color="secondary" isDisabled>Disabled</EuiBadge>
+`,
+];
 
 import BadgeWithIcon from './badge_with_icon';
 const badgeWithIconSource = require('!!raw-loader!./badge_with_icon');
 const badgeWithIconHtml = renderToHtml(BadgeWithIcon);
+const badgeWithIconSnippet = `<EuiBadge color="hollow" iconType="cross" iconSide="right">Label</EuiBadge>
+`;
 
 import BadgeButton from './badge_button';
 const badgeButtonSource = require('!!raw-loader!./badge_button');
 const badgeButtonHtml = renderToHtml(BadgeButton);
+const badgeButtonSnippet = [
+  `<EuiBadge
+  color="primary"
+  onClick={this.onBadgeClick}
+  onClickAriaLabel="Aria label applied to text button"
+/>
+  Clickable text
+</EuiBadge>`,
+  `<EuiBadge
+  iconType="cross"
+  iconSide="right"
+  color="hollow"
+  iconOnClick={this.onBadgeIconClick}
+  iconOnClickAriaLabel="Aria label applied to icon button"
+  />
+  Text with clickable icon
+</EuiBadge>`,
+  `<EuiBadge
+  iconType="cross"
+  iconSide="right"
+  color="secondary"
+  onClick={this.onBadgeClick}
+  onClickAriaLabel="Aria label applied to text button"
+  iconOnClick={this.onBadgeIconClick}
+  iconOnClickAriaLabel="Aria label applied to icon button"
+  />
+  Clickable text with clickable icon
+</EuiBadge>`,
+];
+
+import BadgeTruncate from './badge_truncate';
+const badgeTruncateSource = require('!!raw-loader!./badge_truncate');
+const badgeTruncateHtml = renderToHtml(BadgeTruncate);
 
 import BetaBadge from './beta_badge';
 const betaBadgeSource = require('!!raw-loader!./beta_badge');
 const betaBadgeHtml = renderToHtml(BetaBadge);
+const betaBadgeSnippet = [
+  `<EuiBetaBadge label="Beta" />
+`,
+  `<EuiBetaBadge label="Lab" tooltipContent="Describe why this is considered beta." />
+`,
+  `<EuiBetaBadge label="Lab" iconType="beaker" />
+`,
+];
 
 import NotificationBadge from './notification_badge';
 const notificationBadgeSource = require('!!raw-loader!./notification_badge');
 const notificationBadgeHtml = renderToHtml(NotificationBadge);
-
-import BadgeTruncate from './badge_truncate';
-const badgeTruncateSource = require('!!raw-loader!./badge_truncate');
-const badgeTruncateHtml = renderToHtml(BadgeTruncate);
+const notificationBadgeSnippet = `<EuiNotificationBadge>3</EuiNotificationBadge>
+`;
 
 export const BadgeExample = {
   title: 'Badge',
@@ -58,10 +111,11 @@ export const BadgeExample = {
           they will automatically space themselves if you use them in a
           repetitive fashion it is good form to wrap them using a{' '}
           <EuiCode>FlexGroup</EuiCode> so that they will wrap when width is
-          constrained (as is done artificially in the example below).
+          constrained (as seen in the custom color example below).
         </p>
       ),
       props: { EuiBadge },
+      snippet: badgeSnippet,
       demo: <Badge />,
     },
     {
@@ -77,6 +131,7 @@ export const BadgeExample = {
         },
       ],
       text: <p>Badges can use icons on the left and right (default) sides.</p>,
+      snippet: badgeWithIconSnippet,
       demo: <BadgeWithIcon />,
     },
     {
@@ -111,6 +166,7 @@ export const BadgeExample = {
           </EuiCallOut>
         </div>
       ),
+      snippet: badgeButtonSnippet,
       demo: <BadgeButton />,
     },
     {
@@ -178,6 +234,7 @@ export const BadgeExample = {
         </div>
       ),
       props: { EuiBetaBadge },
+      snippet: betaBadgeSnippet,
       demo: <BetaBadge />,
     },
     {
@@ -194,13 +251,14 @@ export const BadgeExample = {
       ],
       text: (
         <p>
-          Used to showcase the number of notifications, alerts or hidden
-          selections. Typically used in{' '}
-          <Link to="/layout/header">EuiHeader</Link> or (eventually){' '}
-          <Link to="/forms/filter-group">EuiFilterButtons</Link>.
+          Used to showcase the number of notifications, alerts, or hidden
+          selections. This badge type is commonly used in the{' '}
+          <Link to="/layout/header">EuiHeader</Link> and{' '}
+          <Link to="/forms/filter-group">EuiFilterButton</Link> components.
         </p>
       ),
       props: { EuiNotificationBadge },
+      snippet: notificationBadgeSnippet,
       demo: <NotificationBadge />,
     },
   ],

diff --git a/src-docs/src/views/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.js
@@ -4,10 +4,10 @@ import { EuiBadge } from '../../../../src/components';
 
 export default () => (
   <div>
-    <EuiBadge iconType="check">Default</EuiBadge>
-
-    <EuiBadge color="primary" iconType="cross" iconSide="right">
-      Primary
+    <EuiBadge color="hollow" iconType="cross" iconSide="right">
+      Hollow
     </EuiBadge>
+
+    <EuiBadge iconType="check">Default</EuiBadge>
   </div>
 );
diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js
@@ -17,7 +17,7 @@ export default () => (
     &emsp;
     <EuiBetaBadge label="Lab" iconType="beaker" />
     <EuiSpacer />
-    <EuiTitle>
+    <EuiTitle size="s">
       <h3>
         Beta badges will also line up nicely with titles &nbsp;
         <EuiBetaBadge

diff --git a/src-docs/src/views/color_picker/color_stops.js b/src-docs/src/views/color_picker/color_stops.js
@@ -10,7 +10,7 @@ export const ColorStops = () => {
   const [extendedColorStops, setExtendedColorStops] = useState([
     {
       stop: 100,
-      color: '#5BBAA0',
+      color: '#54B399',
     },
     {
       stop: 250,

diff --git a/src-docs/src/views/color_picker/utils.js b/src-docs/src/views/color_picker/utils.js
@@ -10,7 +10,7 @@ export const useColorStop = (useRandomColor = false) => {
   const [colorStops, setColorStops] = useState([
     {
       stop: 20,
-      color: '#5BBAA0',
+      color: '#54B399',
     },
     {
       stop: 50,