added comments to props, refactored some code

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))
 - Converted `EuiComboBox`, `EuiComboBoxInput`, `EuiComboBoxPill`, `EuiComboBoxOptionsList`, `EuiComboBoxOption`, and `EuiComboBoxTitle` to TypeScript ([#2838](https://github.com/elastic/eui/pull/2838))
 - Converted `EuiCodeEditor` to TypeScript ([#2836](https://github.com/elastic/eui/pull/2836))
 - Converted `EuiCode` and `EuiCodeBlock` and to TypeScript ([#2835](https://github.com/elastic/eui/pull/2835))
@@ -22,7 +23,6 @@
 
 **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

@@ -12,21 +12,11 @@ import {
   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);
 const badgeSnippet = [
@@ -289,17 +279,14 @@ export const BadgeExample = {
           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>
+      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

@@ -3,9 +3,7 @@ import React, { Fragment } from 'react';
 import {
   EuiBadge,
   EuiFlexItem,
-  EuiSpacer,
   EuiBadgeGroup,
-  EuiTitle,
 } from '../../../../src/components';
 
 const badges = [
@@ -21,18 +19,13 @@ const badges = [
 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/__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

@@ -1,4 +1,4 @@
-$euiGutterTypes: (
+$gutterTypes: (
   gutterExtraSmall: $euiSizeXS,
   gutterSmall: $euiSizeS,
   gutterMedium: $euiSize,
@@ -7,43 +7,43 @@ $euiGutterTypes: (
 );
 
 .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 */
+  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;
+  $halfGutterSize: $gutterSize * .5;
 
-    .euiBadgeGroup--#{$gutterName} {
-        margin: -$halfGutterSize;
+  .euiBadgeGroup--#{$gutterName} {
+    margin: -$halfGutterSize;
 
-        & > .euiBadgeItem {
-        margin: $halfGutterSize;
-        }
+    & > .euiBadgeItem {
+      margin: $halfGutterSize;
     }
+  }
 }
 
 // Wrap
 .euiBadgeGroup--wrap {
-    flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 @include euiBreakpoint('xs', 's') {
-    .euiBadgeGroup--responsive {
-        flex-wrap: wrap;
-        margin-left: 0;
-        margin-right: 0;
-    }
+  .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

@@ -5,39 +5,42 @@ 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',
-  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
+export const EuiBadgeGroup = React.forwardRef<
+  HTMLDivElement,
+  CommonProps & HTMLAttributes<HTMLDivElement> & EuiBadgeGroupProps
 >(
   (
     {
       children,
       className,
       gutterSize = 'xs',
       responsive = true,
-      wrap = false,
+      wrap = true,
       ...rest
     },
-    ref: Ref<HTMLDivElement> | Ref<HTMLSpanElement>
+    ref: Ref<HTMLDivElement>
   ) => {
     const classes = classNames(
       'euiBadgeGroup',
@@ -50,15 +53,10 @@ const EuiBadgeGroup = React.forwardRef<
     );
 
     return (
-      <div
-        className={classes}
-        ref={ref as Ref<HTMLDivElement>}
-        {...rest as HTMLAttributes<HTMLDivElement>}>
+      <div className={classes} ref={ref} {...rest}>
         {children}
       </div>
     );
   }
 );
 EuiBadgeGroup.displayName = 'EuiBadgeGroup';
-
-export { EuiBadgeGroup };