[Emotion] Convert EuiBadgeGroup, EuiBetaBadge, and EuiNotificationBad…

…ge (#6258)

* Convert EuiBadgeGroup to Emotion

- opinionated refactor: Use `inline-flex` and `gap` instead of inline-block and margins

- doing so remove the needs for `euiBadgeGroup__item`

* Convert EuiBetaBadge to Emotion

- opinionated refactor: simplify `s` font-size to static rem (since .625 doesn't match the ratio of any current font scales)

- remove isClickable CSS / classNames - it's not actually being used anywhere that I can tell

- add unit tests for badge circle display

* [docs] beta badge docs improvement

- convert file to TS
- improve visuals of clickable examples

* Convert EuiNotificationBadge to Emotion

+ delete all badge SCSS files

+ update downstream snapshots

* changelog

* [PR feedback] euiTextTruncate

* [PR feedback] Create internal color util for badge colors

* [PR feedback] Remove ` `s from beta badge docs

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

@@ -248,7 +248,7 @@ export const BadgeExample = {
       title: 'Beta badge type',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: betaBadgeSource,
         },
       ],

src-docs/src/views/badge/beta_badge.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { css } from '@emotion/react';
+
+import { EuiBetaBadge, EuiSpacer, EuiTitle } from '../../../../src/components';
+
+const colors = ['hollow', 'accent', 'subdued'] as const;
+
+export default () => (
+  <>
+    <div
+      css={css`
+        display: grid;
+        align-items: flex-start;
+        grid: repeat(3, max-content) / repeat(6, max-content);
+        gap: 0.75rem;
+      `}
+    >
+      {colors.map((item) => (
+        <>
+          <EuiBetaBadge
+            label="Beta"
+            color={item}
+            tooltipContent="This module is not GA. Please help us by reporting any bugs."
+          />
+          <EuiBetaBadge
+            label="Beta"
+            color={item}
+            size="s"
+            tooltipContent="This module is not GA. Please help us by reporting any bugs."
+          />
+          <EuiBetaBadge label="Beta" color={item} iconType="beta" />
+          <EuiBetaBadge size="s" label="Beta" color={item} iconType="beta" />
+          <EuiBetaBadge label="Lab" color={item} iconType="beaker" />
+          <EuiBetaBadge label="Lab" size="s" color={item} iconType="beaker" />
+        </>
+      ))}
+    </div>
+    <EuiSpacer size="s" />
+    <EuiTitle size="s">
+      <h3>
+        Beta badges will also line up nicely with titles &nbsp;
+        <EuiBetaBadge
+          label="Lab"
+          tooltipContent="This module is not GA. Please help us by reporting any bugs."
+        />
+      </h3>
+    </EuiTitle>
+    <EuiSpacer />
+    <EuiTitle size="xs">
+      <h3>Clickable beta badges</h3>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <div
+      css={css`
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      `}
+    >
+      <EuiBetaBadge
+        label="Lens"
+        iconType="lensApp"
+        onClick={() => alert('Goes to Lens')}
+      />
+      <EuiBetaBadge
+        label="Basic"
+        href="http://www.elastic.co/subscriptions"
+        target="_blank"
+      />
+    </div>
+  </>
+);

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

@@ -2,43 +2,39 @@
 
 exports[`EuiBadgeGroup gutterSize none is rendered 1`] = `
 <div
-  class="euiBadgeGroup"
+  class="euiBadgeGroup emotion-euiBadgeGroup-none"
 />
 `;
 
 exports[`EuiBadgeGroup gutterSize s is rendered 1`] = `
 <div
-  class="euiBadgeGroup euiBadgeGroup--gutterSmall"
+  class="euiBadgeGroup emotion-euiBadgeGroup-s"
 />
 `;
 
 exports[`EuiBadgeGroup gutterSize xs is rendered 1`] = `
 <div
-  class="euiBadgeGroup euiBadgeGroup--gutterExtraSmall"
+  class="euiBadgeGroup emotion-euiBadgeGroup-xs"
 />
 `;
 
 exports[`EuiBadgeGroup is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiBadgeGroup euiBadgeGroup--gutterExtraSmall testClass1 testClass2"
+  class="euiBadgeGroup testClass1 testClass2 emotion-euiBadgeGroup-xs"
   data-test-subj="test subject string"
 >
   <span
-    class="euiBadgeGroup__item"
+    class="euiBadge emotion-euiBadge"
+    style="background-color:#D3DAE6;color:#000"
   >
     <span
-      class="euiBadge emotion-euiBadge"
-      style="background-color:#D3DAE6;color:#000"
+      class="euiBadge__content emotion-euiBadge__content"
     >
       <span
-        class="euiBadge__content emotion-euiBadge__content"
+        class="euiBadge__text emotion-euiBadge__text"
       >
-        <span
-          class="euiBadge__text emotion-euiBadge__text"
-        >
-          Content
-        </span>
+        Content
       </span>
     </span>
   </span>

src/components/badge/badge_group/badge_group.styles.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
+import { UseEuiTheme } from '../../../services';
+
+export const euiBadgeGroupStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    euiBadgeGroup: css`
+      display: inline-flex;
+      flex-wrap: wrap;
+      ${logicalCSS('max-width', '100%')}
+
+      // Override the .euiBadge + .euiBadge CSS in badge.styles.ts
+      .euiBadge {
+        ${logicalCSS('margin-left', 0)}
+      }
+    `,
+    // Gutter sizes
+    none: css``,
+    s: css`
+      gap: ${euiTheme.size.s};
+    `,
+    xs: css`
+      gap: ${euiTheme.size.xs};
+    `,
+  };
+};

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

@@ -9,11 +9,14 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiBadge } from '../badge';
 import { EuiBadgeGroup, GUTTER_SIZES } from './badge_group';
 
 describe('EuiBadgeGroup', () => {
+  shouldRenderCustomStyles(<EuiBadgeGroup />);
+
   test('is rendered', () => {
     const component = render(
       <EuiBadgeGroup {...requiredProps}>

src/components/badge/badge_group/badge_group.tsx

@@ -8,25 +8,21 @@
 
 import React, { forwardRef, HTMLAttributes, Ref, ReactNode } from 'react';
 import classNames from 'classnames';
-import { CommonProps, keysOf } from '../../common';
+import { CommonProps } from '../../common';
+import { useEuiTheme } from '../../../services';
 
-const gutterSizeToClassNameMap = {
-  none: null,
-  xs: 'euiBadgeGroup--gutterExtraSmall',
-  s: 'euiBadgeGroup--gutterSmall',
-};
+import { euiBadgeGroupStyles } from './badge_group.styles';
 
-export const GUTTER_SIZES = keysOf(gutterSizeToClassNameMap);
-type BadgeGroupGutterSize = keyof typeof gutterSizeToClassNameMap;
+export const GUTTER_SIZES = ['none', 'xs', 's'] as const;
+type BadgeGroupGutterSize = typeof GUTTER_SIZES[number];
 
 export interface EuiBadgeGroupProps {
   /**
    * Space between badges
    */
   gutterSize?: BadgeGroupGutterSize;
   /**
-   * Should be a list of EuiBadge's but can also be any other element
-   * Will apply an extra class to add spacing
+   * Should be a list of `EuiBadge`s, but can also be any other element
    */
   children?: ReactNode;
 }
@@ -39,17 +35,16 @@ export const EuiBadgeGroup = forwardRef<
     { children, className, gutterSize = 'xs', ...rest },
     ref: Ref<HTMLDivElement>
   ) => {
-    const classes = classNames(
-      'euiBadgeGroup',
-      gutterSizeToClassNameMap[gutterSize as BadgeGroupGutterSize],
-      className
-    );
+    const euiTheme = useEuiTheme();
+
+    const styles = euiBadgeGroupStyles(euiTheme);
+    const cssStyles = [styles.euiBadgeGroup, styles[gutterSize]];
+
+    const classes = classNames('euiBadgeGroup', className);
 
     return (
-      <div className={classes} ref={ref} {...rest}>
-        {React.Children.map(children, (child: ReactNode) => (
-          <span className="euiBadgeGroup__item">{child}</span>
-        ))}
+      <div css={cssStyles} className={classes} ref={ref} {...rest}>
+        {children}
       </div>
     );
   }