added badge group component

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Created `EuiBadgeGroup` component ([#2921](https://github.com/elastic/eui/pull/2921))
 - Added SASS variables for text variants of the primary palette `$euiColorPrimaryText`, `$euiColorSecondaryText`, etc... Updated components to use these new variables. ([#2873](https://github.com/elastic/eui/pull/2873))
 - Updated SASS mixin `makeHighContrastColor()` to default `$background: $euiPageBackgroundColor` and `$ratio: 4.5`. Created `makeGraphicContrastColor()` for graphic specific contrast levels of 3.0. ([#2873](https://github.com/elastic/eui/pull/2873))
 

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

@@ -11,10 +11,12 @@ import {
   EuiCode,
   EuiBetaBadge,
   EuiNotificationBadge,
+  EuiBadgeGroup,
   EuiCallOut,
 } from '../../../../src/components';
 
 import Badge from './badge';
+
 const badgeSource = require('!!raw-loader!./badge');
 const badgeHtml = renderToHtml(Badge);
 const badgeSnippet = [
@@ -91,6 +93,10 @@ const notificationBadgeHtml = renderToHtml(NotificationBadge);
 const notificationBadgeSnippet = `<EuiNotificationBadge>3</EuiNotificationBadge>
 `;
 
+import BadgeGroup from './badge_group';
+const badgeGroupSource = require('!!raw-loader!./badge_group');
+const badgeGroupHtml = renderToHtml(BadgeGroup);
+
 export const BadgeExample = {
   title: 'Badge',
   sections: [
@@ -261,5 +267,26 @@ export const BadgeExample = {
       snippet: notificationBadgeSnippet,
       demo: <NotificationBadge />,
     },
+    {
+      title: 'Badge Group',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: badgeGroupSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: badgeGroupHtml,
+        },
+      ],
+      text: (
+        <p>
+          Grouping badges with EuiBadgeGroup, ensures they wrap and truncate
+          properly.
+        </p>
+      ),
+      props: { EuiBadgeGroup },
+      demo: <BadgeGroup />,
+    },
   ],
 };

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

@@ -0,0 +1,31 @@
+import React, { Fragment } from 'react';
+
+import {
+  EuiBadge,
+  EuiFlexItem,
+  EuiBadgeGroup,
+} from '../../../../src/components';
+
+const badges = [
+  'default',
+  'hollow',
+  'primary',
+  'secondary',
+  'accent',
+  'warning',
+  'danger',
+];
+
+export default () => {
+  return (
+    <Fragment>
+      <EuiBadgeGroup wrap responsive={false} gutterSize="xs">
+        {badges.map(badge => (
+          <EuiFlexItem grow={false} key={badge}>
+            <EuiBadge color={badge}>{badge}</EuiBadge>
+          </EuiFlexItem>
+        ))}
+      </EuiBadgeGroup>
+    </Fragment>
+  );
+};

src/components/badge/__snapshots__/badge_group.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiBadgeGroup is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiBadgeGroup euiBadgeGroup--gutterExtraSmall euiBadgeGroup--responsive euiBadgeGroup--wrap testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <span
+    aria-label="aria-label"
+    class="euiBadge euiBadge-isDisabled euiBadge--iconLeft testClass1 testClass2"
+    data-test-subj="test subject string"
+    style="background-color:#d3dae6;color:#000"
+  >
+    <span
+      class="euiBadge__content"
+    >
+      <span
+        class="euiBadge__text"
+      >
+        Content
+      </span>
+    </span>
+  </span>
+</div>
+`;

src/components/badge/_badge_group.scss

@@ -0,0 +1,49 @@
+$gutterTypes: (
+  gutterExtraSmall: $euiSizeXS,
+  gutterSmall: $euiSizeS,
+  gutterMedium: $euiSize,
+  gutterLarge: $euiSizeL,
+  gutterExtraLarge: $euiSizeXXL,
+);
+
+.euiBadgeGroup {
+  display: flex;
+  align-items: center;
+  flex-flow: row;
+  flex-grow: 1;
+
+  .euiBadgeItem {
+    @include internetExplorerOnly {
+      min-width: 1px;
+    }
+
+    flex-grow: 1;
+    flex-basis: 0%;
+  }
+}
+
+// Gutter Sizes
+@each $gutterName, $gutterSize in $gutterTypes {
+  $halfGutterSize: $gutterSize * .5;
+
+  .euiBadgeGroup--#{$gutterName} {
+    margin: -$halfGutterSize;
+
+    & > .euiBadgeItem {
+      margin: $halfGutterSize;
+    }
+  }
+}
+
+// Wrap
+.euiBadgeGroup--wrap {
+  flex-wrap: wrap;
+}
+
+@include euiBreakpoint('xs', 's') {
+  .euiBadgeGroup--responsive {
+    flex-wrap: wrap;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}

src/components/badge/_index.scss

@@ -1,3 +1,4 @@
 @import 'badge';
+@import 'badge_group';
 @import 'beta_badge/index';
 @import 'notification_badge/index';

src/components/badge/badge_group.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiBadge } from './badge';
+import { EuiBadgeGroup } from './badge_group';
+
+describe('EuiBadgeGroup', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiBadgeGroup {...requiredProps}>
+        <EuiBadge isDisabled {...requiredProps}>
+          Content
+        </EuiBadge>
+      </EuiBadgeGroup>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+});

src/components/badge/badge_group.tsx

@@ -0,0 +1,62 @@
+import React, { HTMLAttributes, Ref } from 'react';
+import classNames from 'classnames';
+import { CommonProps, keysOf } from '../common';
+
+type BadgeGroupGutterSize = keyof typeof gutterSizeToClassNameMap;
+
+export interface EuiBadgeGroupProps {
+  /**
+   * Space between badges
+   */
+  gutterSize?: BadgeGroupGutterSize;
+  /**
+   * Force each badges to be display block on smaller screens
+   */
+  responsive?: boolean;
+  /**
+   * Force each badge to wrap if necessary
+   */
+  wrap?: boolean;
+}
+
+const gutterSizeToClassNameMap = {
+  none: null,
+  xs: 'euiBadgeGroup--gutterExtraSmall',
+  s: 'euiBadgeGroup--gutterSmall',
+};
+
+export const GUTTER_SIZES = keysOf(gutterSizeToClassNameMap);
+
+export const EuiBadgeGroup = React.forwardRef<
+  HTMLDivElement,
+  CommonProps & HTMLAttributes<HTMLDivElement> & EuiBadgeGroupProps
+>(
+  (
+    {
+      children,
+      className,
+      gutterSize = 'xs',
+      responsive = true,
+      wrap = true,
+      ...rest
+    },
+    ref: Ref<HTMLDivElement>
+  ) => {
+    const classes = classNames(
+      'euiBadgeGroup',
+      gutterSizeToClassNameMap[gutterSize as BadgeGroupGutterSize],
+      {
+        'euiBadgeGroup--responsive': responsive,
+        'euiBadgeGroup--wrap': wrap,
+      },
+      className
+    );
+
+    return (
+      <div className={classes} ref={ref} {...rest}>
+        {children}
+      </div>
+    );
+  }
+);
+EuiBadgeGroup.displayName = 'EuiBadgeGroup';

src/components/badge/index.ts

@@ -3,3 +3,5 @@ export { EuiBadge, EuiBadgeProps } from './badge';
 export { EuiBetaBadge } from './beta_badge';
 
 export { EuiNotificationBadge } from './notification_badge';
+
+export { EuiBadgeGroup } from './badge_group';

src/components/index.js

@@ -6,7 +6,12 @@ export { EuiAvatar } from './avatar';
 
 export { EuiKeyboardAccessible, EuiScreenReaderOnly } from './accessibility';
 
-export { EuiBadge, EuiBetaBadge, EuiNotificationBadge } from './badge';
+export {
+  EuiBadge,
+  EuiBetaBadge,
+  EuiNotificationBadge,
+  EuiBadgeGroup,
+} from './badge';
 
 export { EuiBottomBar } from './bottom_bar';