[EuiBetaBadge] Add color and size props and support for click event (#…

…4798) Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
elastic · May 28, 2021 · 911bee4 · 911bee4
1 parent 69fe05a
commit 911bee4
Show file tree

Hide file tree

Showing 14 changed files with 425 additions and 62 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `color` and `size` props and added support for click event to `EuiBetaBadge` ([#4798](https://github.com/elastic/eui/pull/4798))
+
 **Bug fixes**
 
 - Fixed `onBlur` and `data-test-subj` prop propagation in `EuiColorPicker` ([#4822](https://github.com/elastic/eui/pull/4822))

diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js
@@ -308,6 +308,8 @@ export const BadgeExample = {
             If you pass in an <EuiCode>iconType</EuiCode>, only the icon will be
             used in the badge itself and the label will be applied as the title.
             Only use an icon when attaching the beta badge to small components.
+            Beta badges can also be made clickable by passing{' '}
+            <EuiCode>href</EuiCode> or <EuiCode>onClick</EuiCode> as needed.
           </p>
           <p>
             They can also be used in conjunction with{' '}

diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js
@@ -2,23 +2,36 @@ import React from 'react';
 
 import { EuiBetaBadge, EuiSpacer, EuiTitle } from '../../../../src/components';
 
+const colors = ['hollow', 'accent', 'subdued'];
+
 export default () => (
   <div>
-    <EuiBetaBadge
-      label="Beta"
-      tooltipContent="This module is not GA. Please help us by reporting any bugs."
-    />
-    &emsp;
-    <EuiBetaBadge
-      label="Lab"
-      title="Laboratory"
-      tooltipContent="This module is not GA. Please help us by reporting any bugs."
-    />
-    &emsp;
-    <EuiBetaBadge label="Lab" iconType="beaker" />
-    &emsp;
-    <EuiBetaBadge label="Lens" iconType="lensApp" />
-    <EuiSpacer />
+    {colors.map((item, index) => (
+      <div key={index}>
+        <EuiBetaBadge
+          label="Beta"
+          color={item}
+          tooltipContent="This module is not GA. Please help us by reporting any bugs."
+        />
+        &emsp;
+        <EuiBetaBadge
+          label="Beta"
+          color={item}
+          size="s"
+          tooltipContent="This module is not GA. Please help us by reporting any bugs."
+        />
+        &emsp;
+        <EuiBetaBadge label="B" color={item} />
+        &emsp;
+        <EuiBetaBadge size="s" label="B" color={item} />
+        &emsp;
+        <EuiBetaBadge label="Lab" color={item} iconType="beaker" />
+        &emsp;
+        <EuiBetaBadge label="Lab" size="s" color={item} iconType="beaker" />
+        <EuiSpacer size="s" />
+      </div>
+    ))}
+    <EuiSpacer size="s" />
     <EuiTitle size="s">
       <h3>
         Beta badges will also line up nicely with titles &nbsp;
@@ -28,5 +41,20 @@ export default () => (
         />
       </h3>
     </EuiTitle>
+    <EuiTitle size="xxs">
+      <h4>Clickable beta badges</h4>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiBetaBadge
+      label="Lens"
+      iconType="lensApp"
+      onClick={() => alert('Goes to Lens')}
+    />
+    &emsp;
+    <EuiBetaBadge
+      label="Basic"
+      href="http://www.elastic.co/subscriptions"
+      target="_blank"
+    />
   </div>
 );
diff --git a/src-docs/src/views/card/card_beta.js b/src-docs/src/views/card/card_beta.js
@@ -7,8 +7,8 @@ import {
   EuiFlexItem,
 } from '../../../../src/components';
 
-const icons = ['dashboard', 'monitoring', 'watches'];
-const badges = [null, 'Beta', 'Lab'];
+const icons = ['dashboard', 'monitoring'];
+const badges = [null, 'Beta'];
 
 const cardNodes = icons.map(function (item, index) {
   return (
@@ -29,4 +29,23 @@ const cardNodes = icons.map(function (item, index) {
   );
 });
 
-export default () => <EuiFlexGroup gutterSize="l">{cardNodes} </EuiFlexGroup>;
+export default () => (
+  <EuiFlexGroup gutterSize="l">
+    {cardNodes}
+    <EuiFlexItem>
+      <EuiCard
+        icon={<EuiIcon size="xxl" type="lensApp" />}
+        title="Lens"
+        isDisabled
+        description="Disabled cards can have active links using EuiBetaBadge."
+        betaBadgeProps={{
+          href: 'http://www.elastic.co/subscriptions',
+          target: '_blank',
+        }}
+        betaBadgeLabel="Basic"
+        betaBadgeTooltipContent="This feature requires a Basic License"
+        onClick={() => {}}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
diff --git a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
@@ -3,10 +3,55 @@
 exports[`EuiBetaBadge is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiBetaBadge testClass1 testClass2"
+  class="euiBetaBadge euiBetaBadge--hollow testClass1 testClass2"
   data-test-subj="test subject string"
   title="Beta"
 >
   Beta
 </span>
 `;
+
+exports[`EuiBetaBadge props color accent is rendered 1`] = `
+<span
+  class="euiBetaBadge euiBetaBadge--accent"
+  title="Beta"
+>
+  Beta
+</span>
+`;
+
+exports[`EuiBetaBadge props color hollow is rendered 1`] = `
+<span
+  class="euiBetaBadge euiBetaBadge--hollow"
+  title="Beta"
+>
+  Beta
+</span>
+`;
+
+exports[`EuiBetaBadge props color subdued is rendered 1`] = `
+<span
+  class="euiBetaBadge euiBetaBadge--subdued"
+  title="Beta"
+>
+  Beta
+</span>
+`;
+
+exports[`EuiBetaBadge props size m is rendered 1`] = `
+<span
+  class="euiBetaBadge euiBetaBadge--hollow"
+  title="Beta"
+>
+  Beta
+</span>
+`;
+
+exports[`EuiBetaBadge props size s is rendered 1`] = `
+<span
+  class="euiBetaBadge euiBetaBadge--hollow euiBetaBadge--small"
+  title="Beta"
+>
+  Beta
+</span>
+`;
diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss
@@ -17,6 +17,17 @@
   &:focus {
     @include euiFocusRing;
   }
+
+  &:not(.euiBetaBadge--hollow) {
+    box-shadow: none;
+  }
+
+  &.euiBetaBadge--small {
+    @include fontSize($euiFontSize * .625);
+    line-height: $euiSize + $euiSizeXS;
+    padding: 0 $euiSizeM;
+  }
+
 }
 
 // When it's just an icon, make it a circle
@@ -28,4 +39,46 @@
     position: relative;
     margin-top: -1px;
   }
+
+  &.euiBetaBadge--small {
+    width: $euiSize + $euiSizeXS;
+    padding: 0;
+  }
+}
+
+.euiBetaBadge--singleLetter {
+  padding: 0 0 0 1px;
+  width: $euiSizeL;
+
+  &.euiBetaBadge--small {
+    width: $euiSize + $euiSizeXS;
+    padding: 0 0 0 1px;
+  }
+}
+
+.euiBetaBadge--subdued {
+  $backgroundColor: tint($euiColorLightShade, 30%);
+  background: $backgroundColor;
+  color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
+
+  &.euiBetaBadge-isClickable {
+    color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
+  }
 }
+
+.euiBetaBadge--hollow {
+  &.euiBetaBadge-isClickable {
+    $backgroundColor: tint($euiColorLightShade, 30%);
+    color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
+  }
+}
+
+.euiBetaBadge--accent {
+  $backgroundColor: $euiColorAccentText;
+  background: $backgroundColor;
+  color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
+
+  &.euiBetaBadge-isClickable {
+    color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
+  }
+}
diff --git a/src/components/badge/beta_badge/beta_badge.test.tsx b/src/components/badge/beta_badge/beta_badge.test.tsx
@@ -21,12 +21,34 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test';
 
-import { EuiBetaBadge } from './beta_badge';
+import { EuiBetaBadge, COLORS, SIZES } from './beta_badge';
 
 describe('EuiBetaBadge', () => {
   test('is rendered', () => {
     const component = render(<EuiBetaBadge label="Beta" {...requiredProps} />);
 
     expect(component).toMatchSnapshot();
   });
+
+  describe('props', () => {
+    describe('color', () => {
+      COLORS.forEach((color) => {
+        test(`${color} is rendered`, () => {
+          const component = render(<EuiBetaBadge label="Beta" color={color} />);
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('size', () => {
+      SIZES.forEach((size) => {
+        test(`${size} is rendered`, () => {
+          const component = render(<EuiBetaBadge label="Beta" size={size} />);
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+  });
 });