Bolder, smaller badges with onclick events and custom colors (#381)

* Badge styling updated * onClick events can now be added to the badge or the icon within the badge * Badges now accept custom hex colors and will style appropriately.
elastic · Feb 13, 2018 · 30e079f · 30e079f
1 parent ebfe6fd
commit 30e079f
Show file tree

Hide file tree

Showing 11 changed files with 233 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
+- Badges can now accept onClicks and custom colors. They were changed stylistically to be bolder and smaller by default. ([#381](https://github.com/elastic/eui/pull/381))
 - Added component to wrap blocks of substeps `EuiSubSteps` in a shaded container. ([#375](https://github.com/elastic/eui/pull/375))
 - Added horizontal steps component ([#375](https://github.com/elastic/eui/pull/375))
 - Changed look and feel of pagination. Added compressed prop for smaller footprint pagination. ([#380](https://github.com/elastic/eui/pull/380))

diff --git a/src-docs/src/views/badge/badge.js b/src-docs/src/views/badge/badge.js
@@ -2,43 +2,32 @@ import React from 'react';
 
 import {
   EuiBadge,
+  EuiFlexItem,
+  EuiFlexGroup,
 } from '../../../../src/components';
 
-export default () => (
-  <div>
-    <EuiBadge color="default">
-      Default
-    </EuiBadge>
-
-    &nbsp;&nbsp;
-
-    <EuiBadge color="primary">
-      Primary
-    </EuiBadge>
-
-    &nbsp;&nbsp;
-
-    <EuiBadge color="secondary">
-      Secondary
-    </EuiBadge>
-
-    &nbsp;&nbsp;
+const badges = [
+  'default',
+  'primary',
+  'secondary',
+  'accent',
+  'warning',
+  'danger',
+  '#fea27f',
+  '#000'
+];
 
-    <EuiBadge color="accent">
-      Accent
-    </EuiBadge>
-
-    &nbsp;&nbsp;
-
-    <EuiBadge color="warning">
-      Warning
-    </EuiBadge>
-
-    &nbsp;&nbsp;
-
-    <EuiBadge color="danger">
-      Danger
-    </EuiBadge>
-  </div>
+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>
+      ))
+    }
+  </EuiFlexGroup>
 
 );
diff --git a/src-docs/src/views/badge/badge_button.js b/src-docs/src/views/badge/badge_button.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {
+  EuiBadge,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiBadge
+      color="#333"
+      onClick={() => window.alert('Badge clicked')}
+    >
+      onClick on badge itself
+    </EuiBadge>
+
+    <EuiBadge
+      iconType="cross"
+      iconSide="right"
+      color="#333"
+      iconOnClick={() => window.alert('Icon inside badge clicked')}
+    >
+      onClick on icon within badge
+    </EuiBadge>
+  </div>
+);
diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js
@@ -8,6 +8,7 @@ import {
 
 import {
   EuiBadge,
+  EuiCode,
 } from '../../../../src/components';
 
 import Badge from './badge';
@@ -18,6 +19,10 @@ import BadgeWithIcon from './badge_with_icon';
 const badgeWithIconSource = require('!!raw-loader!./badge_with_icon');
 const badgeWithIconHtml = renderToHtml(BadgeWithIcon);
 
+import BadgeButton from './badge_button';
+const badgeButtonSource = require('!!raw-loader!./badge_button');
+const badgeButtonHtml = renderToHtml(BadgeButton);
+
 export const BadgeExample = {
   title: 'Badge',
   sections: [{
@@ -31,7 +36,11 @@ export const BadgeExample = {
     }],
     text: (
       <p>
-        Badges are used to focus on important bits of information.
+        Badges are used to focus on important bits of information. Although 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).
       </p>
     ),
     props: { EuiBadge },
@@ -51,5 +60,22 @@ export const BadgeExample = {
       </p>
     ),
     demo: <BadgeWithIcon />,
+  }, {
+    title: 'Badge with onClick events',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: badgeButtonSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: badgeButtonHtml,
+    }],
+    text: (
+      <p>
+        Badges can have onClick events applied to the badge itself or the icon within the badge.
+        The later option is useful for when you might use badges in other components (like a tag
+        system with autocomplete where you need close events).
+      </p>
+    ),
+    demo: <BadgeButton />,
   }],
 };
diff --git a/src-docs/src/views/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.js
@@ -6,14 +6,12 @@ import {
 
 export default () => (
   <div>
-    <EuiBadge iconType="help">
-      Primary
+    <EuiBadge iconType="check">
+      Default
     </EuiBadge>
 
-    &nbsp;&nbsp;
-
-    <EuiBadge color="primary" iconType="user" iconSide="right">
-      Secondary
+    <EuiBadge color="primary" iconType="cross" iconSide="right">
+      Primary
     </EuiBadge>
   </div>
 );
diff --git a/src/components/badge/__snapshots__/badge.test.js.snap b/src/components/badge/__snapshots__/badge.test.js.snap
@@ -108,7 +108,7 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `
     class="euiBadge__content"
   >
     <svg
-      class="euiIcon euiBadge__icon euiIcon--medium"
+      class="euiIcon euiBadge__icon euiIcon--small"
       height="18"
       viewBox="0 0 18 18"
       width="18"
@@ -134,13 +134,13 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `
 
 exports[`EuiBadge props iconSide right is rendered 1`] = `
 <div
-  class="euiBadge euiBadge--default euiBadge--iconRight"
+  class="euiBadge euiBadge--iconRight euiBadge--default"
 >
   <span
     class="euiBadge__content"
   >
     <svg
-      class="euiIcon euiBadge__icon euiIcon--medium"
+      class="euiIcon euiBadge__icon euiIcon--small"
       height="18"
       viewBox="0 0 18 18"
       width="18"
@@ -172,7 +172,7 @@ exports[`EuiBadge props iconType is rendered 1`] = `
     class="euiBadge__content"
   >
     <svg
-      class="euiIcon euiBadge__icon euiIcon--medium"
+      class="euiIcon euiBadge__icon euiIcon--small"
       height="18"
       viewBox="0 0 18 18"
       width="18"

diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss
@@ -1,22 +1,38 @@
 .euiBadge {
   font-size: $euiSizeM;
-  line-height: $euiSizeL;
+  font-weight: $euiFontWeightMedium;
+  line-height: $euiSize + $euiSizeXS;
   display: inline-block;
   text-decoration: none;
-  border: solid 1px transparent;
-  border-radius: $euiSizeL;
-  padding: 0 $euiSizeS;
+  box-sizing: content-box;
+  border-radius: $euiBorderRadius / 2;
+  padding: 0 $euiSizeXS;
   background-color: transparent;
   white-space: nowrap;
   vertical-align: middle;
+  text-align: center;
+
+  + .euiBadge {
+    margin-left: $euiSizeXS;
+  }
 
   .euiBadge__content {
     display: flex;
     align-items: center;
   }
 
+  &:focus {
+    @include euiFocusRing("small");
+  }
+
   .euiBadge__icon {
     margin-right: $euiSizeXS;
+
+    &:focus {
+      background-color: rgba(255,255,255,.8);
+      color: #000;
+      border-radius: 2px;
+    }
   }
 
   &.euiBadge--iconRight .euiBadge__content {
@@ -33,16 +49,20 @@
 // Modifier naming and colors.
 $badgeTypes: (
   default: $euiColorLightShade,
-  primary: $euiColorPrimary,
-  secondary: $euiColorSecondary,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  accent: $euiColorAccent
+  primary: lighten(desaturate($euiColorPrimary, 40%), 40%),
+  secondary: lighten(desaturate($euiColorSecondary, 40%), 40%),
+  warning: lighten(desaturate($euiColorWarning, 30%), 20%),
+  danger: lighten(desaturate($euiColorDanger, 40%), 40%),
+  accent: lighten(desaturate($euiColorAccent, 40%), 40%),
 );
 
 @each $name, $color in $badgeTypes {
   .euiBadge--#{$name} {
-    border-color: $color;
-    background-color: transparentize($color, .9);
+    background-color: $color;
+    @if (lightness($color) > 50) {
+      color: #000;
+    } @else {
+      color: #FFF;
+    }
   }
 }