added badge group component

CHANGELOG.md

@@ -22,6 +22,7 @@
 
 **Breaking changes**
 
+- Created `EuiBadgeGroup` component ([#2921](https://github.com/elastic/eui/pull/2921))
 - Removed `visControls` and `visHeatmap` duplicate icons from docs ([#2908](https://github.com/elastic/eui/pull/2908))
 
 ## [`19.0.0`](https://github.com/elastic/eui/tree/v19.0.0)

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

@@ -11,9 +11,21 @@ import {
   EuiCode,
   EuiBetaBadge,
   EuiNotificationBadge,
+  EuiBadgeGroup,
+  EuiFlexItem,
   EuiCallOut,
 } from '../../../../src/components';
 
+const badges = [
+  'default',
+  'hollow',
+  'primary',
+  'secondary',
+  'accent',
+  'warning',
+  'danger',
+];
+
 import Badge from './badge';
 const badgeSource = require('!!raw-loader!./badge');
 const badgeHtml = renderToHtml(Badge);
@@ -91,6 +103,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 +277,29 @@ export const BadgeExample = {
       snippet: notificationBadgeSnippet,
       demo: <NotificationBadge />,
     },
+    {
+      title: 'Badge Group',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: badgeGroupSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: badgeGroupHtml,
+        },
+      ],
+      text: <p>Used to group Badges together </p>,
+      props: { EuiBadgeGroup },
+      demo: (
+        <EuiBadgeGroup wrap responsive={false} gutterSize="xs">
+          {badges.map(badge => (
+            <EuiFlexItem grow={false} key={badge}>
+              <EuiBadge color={badge}>{badge}</EuiBadge>
+            </EuiFlexItem>
+          ))}
+        </EuiBadgeGroup>
+      ),
+    },
   ],
 };

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

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

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; /* 1 */
+
+    .euiBadgeItem {
+      @include internetExplorerOnly {
+        min-width: 1px;
+      }
+
+      flex-grow: 1;
+      flex-basis: 0%; /* 2 */
+    }
+}
+
+// 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/badge_group.tsx

@@ -0,0 +1,64 @@
+import React, { HTMLAttributes, Ref } from 'react';
+import classNames from 'classnames';
+import { CommonProps, keysOf } from '../common';
+
+export type BadgeGroupGutterSize = keyof typeof gutterSizeToClassNameMap;
+
+export interface EuiBadgeGroupProps {
+  gutterSize?: BadgeGroupGutterSize;
+  responsive?: boolean;
+  wrap?: boolean;
+}
+
+const gutterSizeToClassNameMap = {
+  none: null,
+  xs: 'euiBadgeGroup--gutterExtraSmall',
+  s: 'euiBadgeGroup--gutterSmall',
+  m: 'euiBadgeGroup--gutterMedium',
+  l: 'euiBadgeGroup--gutterLarge',
+  xl: 'euiBadgeGroup--gutterExtraLarge',
+};
+
+export const GUTTER_SIZES = keysOf(gutterSizeToClassNameMap);
+export type EuiBadgeGroupGutterSize = keyof typeof gutterSizeToClassNameMap;
+
+const EuiBadgeGroup = React.forwardRef<
+  HTMLDivElement | HTMLSpanElement,
+  CommonProps &
+    HTMLAttributes<HTMLDivElement | HTMLSpanElement> &
+    EuiBadgeGroupProps
+>(
+  (
+    {
+      children,
+      className,
+      gutterSize = 'l',
+      responsive = true,
+      wrap = false,
+      ...rest
+    },
+    ref: Ref<HTMLDivElement> | Ref<HTMLSpanElement>
+  ) => {
+    const classes = classNames(
+      'euiBadgeGroup',
+      gutterSizeToClassNameMap[gutterSize as BadgeGroupGutterSize],
+      {
+        'euiBadgeGroup--responsive': responsive,
+        'euiBadgeGroup--wrap': wrap,
+      },
+      className
+    );
+
+    return (
+      <div
+        className={classes}
+        ref={ref as Ref<HTMLDivElement>}
+        {...rest as HTMLAttributes<HTMLDivElement>}>
+        {children}
+      </div>
+    );
+  }
+);
+EuiBadgeGroup.displayName = 'EuiBadgeGroup';
+
+export { 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';