Beta Badges (#705)

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.44`.
+- Added `EuiBetaBadge` for non-GA labelling including options to add it to `EuiCard` and `EuiKeyPadMenuItem` ([#705](https://github.com/elastic/eui/pull/705))
+
 
 ## [`0.0.44`](https://github.com/elastic/eui/tree/v0.0.44)
 

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

@@ -9,6 +9,8 @@ import {
 import {
   EuiBadge,
   EuiCode,
+  EuiBetaBadge,
+  EuiLink,
 } from '../../../../src/components';
 
 import Badge from './badge';
@@ -23,6 +25,10 @@ import BadgeButton from './badge_button';
 const badgeButtonSource = require('!!raw-loader!./badge_button');
 const badgeButtonHtml = renderToHtml(BadgeButton);
 
+import BetaBadge from './beta_badge';
+const betaBadgeSource = require('!!raw-loader!./beta_badge');
+const betaBadgeHtml = renderToHtml(BetaBadge);
+
 export const BadgeExample = {
   title: 'Badge',
   sections: [{
@@ -76,5 +82,36 @@ export const BadgeExample = {
       </p>
     ),
     demo: <BadgeButton />,
+  }, {
+    title: 'Beta badge type',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: betaBadgeSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: betaBadgeHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          The <EuiCode>EuiBetaBadge</EuiCode> was created specifically to call out
+          modules that are not in GA. Generally the labels used are &quot;Beta&quot; or &quot;Lab&quot;.
+          They require an extra <EuiCode>tooltipContent</EuiCode> to describe the purpose of the badge.
+          You can pass an optional <EuiCode>title</EuiCode> prop to populate the tooltip title or html title
+          attribute but by default it will use the <EuiCode>label</EuiCode>.
+        </p>
+        <p>
+          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 like the EuiKeyPadMenuItem.
+        </p>
+        <p>
+          They can also be used in conjunction
+          with <EuiLink href="/#/display/card">EuiCards</EuiLink> and <EuiLink href="/#/navigation/key-pad-menu">EuiKeyPadMenuItems</EuiLink>.
+        </p>
+      </div>
+    ),
+    props: { EuiBetaBadge },
+    demo: <BetaBadge />,
   }],
 };

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {
+  EuiBetaBadge,
+  EuiSpacer,
+  EuiTitle,
+} from '../../../../src/components';
+
+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="Lightening" iconType="bolt" />
+
+    <EuiSpacer />
+    <EuiTitle>
+      <h3>Beta badges will also line up nicely with titles <EuiBetaBadge label="Lab" tooltipContent="This module is not GA. Please help us by reporting any bugs." /></h3>
+    </EuiTitle>
+  </div>
+);

src-docs/src/views/card/card_beta.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+  EuiCard,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+const icons = ['dashboard', 'monitoring', 'watches'];
+const badges = [null, 'Beta', 'Lab'];
+
+const cardNodes = icons.map(function (item, index) {
+  return (
+    <EuiFlexItem key={index}>
+      <EuiCard
+        icon={<EuiIcon size="xxl" type={`${item}App`} />}
+        title={`Kibana ${item}`}
+        description="Example of a card's description. Stick to one or two sentences."
+        betaBadgeLabel={badges[index]}
+        betaBadgeTooltipContent={badges[index] ? "This module is not GA. Please help us by reporting any bugs." : undefined}
+        onClick={() => window.alert('Card clicked')}
+      />
+    </EuiFlexItem>
+  );
+});
+
+export default () => (
+  <EuiFlexGroup gutterSize="l">
+    {cardNodes}
+  </EuiFlexGroup>
+);

src-docs/src/views/card/card_example.js

@@ -23,6 +23,10 @@ import CardFooter from './card_footer';
 const cardFooterSource = require('!!raw-loader!./card_footer');
 const cardFooterHtml = renderToHtml(CardFooter);
 
+import CardBeta from './card_beta';
+const cardBetaSource = require('!!raw-loader!./card_beta');
+const cardBetaHtml = renderToHtml(CardBeta);
+
 export const CardExample = {
   title: 'Card',
   sections: [{
@@ -91,5 +95,25 @@ export const CardExample = {
     ),
     components: { EuiCard },
     demo: <CardFooter />,
+  },
+  {
+    title: 'Beta badge',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: cardBetaSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: cardBetaHtml,
+    }],
+    text: (
+      <p>
+        If the card links to or references a module that is not GA (beta, lab, etc),
+        you can add a <EuiCode>betaBadgeLabel</EuiCode> and <EuiCode>betaBadgeTooltipContent</EuiCode> to
+        the card and it will properly create and position an <EuiCode>EuiBetaBadge</EuiCode>. If you want to
+        change the title of the tooltip, supply a <EuiCode>betaBadgeTitle</EuiCode> prop.
+      </p>
+    ),
+    components: { EuiCard },
+    demo: <CardBeta />,
   }],
 };

src-docs/src/views/key_pad_menu/key_pad_beta.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {
+  EuiIcon,
+  EuiKeyPadMenu,
+  EuiKeyPadMenuItem,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiKeyPadMenu>
+    <EuiKeyPadMenuItem
+      label="Dashboard"
+      href="#"
+    >
+      <EuiIcon type="dashboardApp" size="l" />
+    </EuiKeyPadMenuItem>
+
+    <EuiKeyPadMenuItem
+      label="Dashboard"
+      href="#"
+      betaBadgeLabel="Beta"
+      betaBadgeTooltipContent="This module is not GA. Please help us by reporting any bugs."
+    >
+      <EuiIcon type="dashboardApp" size="l" />
+    </EuiKeyPadMenuItem>
+
+    <EuiKeyPadMenuItem
+      label="Dashboard"
+      href="#"
+      betaBadgeLabel="Lab"
+      betaBadgeTooltipContent="This module is not GA. Please help us by reporting any bugs."
+      betaBadgeIconType="bolt"
+    >
+      <EuiIcon type="dashboardApp" size="l" />
+    </EuiKeyPadMenuItem>
+  </EuiKeyPadMenu>
+);

src-docs/src/views/key_pad_menu/key_pad_menu_example.js

@@ -20,6 +20,10 @@ import KeyPadMenuItemButton from './key_pad_menu_item_button';
 const keyPadMenuItemButtonSource = require('!!raw-loader!./key_pad_menu_item_button');
 const keyPadMenuItemButtonHtml = renderToHtml(KeyPadMenuItemButton);
 
+import KeyPadBeta from './key_pad_beta';
+const keyPadBetaSource = require('!!raw-loader!./key_pad_beta');
+const keyPadBetaHtml = renderToHtml(KeyPadBeta);
+
 export const KeyPadMenuExample = {
   title: 'Key Pad Menu',
   sections: [{
@@ -54,5 +58,29 @@ export const KeyPadMenuExample = {
       </p>
     ),
     demo: <KeyPadMenuItemButton />,
+  }, {
+    title: 'Beta item',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: keyPadBetaSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: keyPadBetaHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          If the item links to a module that is not GA (beta, lab, etc),
+          you can add a <EuiCode>betaBadgeLabel</EuiCode> and <EuiCode>betaBadgeTooltipContent</EuiCode> to
+          the card and it will properly create and position an <EuiCode>EuiBetaBadge</EuiCode>.
+        </p>
+        <p>
+          Supplying just a label will only show the first letter in the badge and supply the full label
+          to the tooltip. You can also pass an <EuiCode>iconType</EuiCode> to replace the letter only badge
+          and the label will still become the title.
+        </p>
+      </div>
+    ),
+    demo: <KeyPadBeta />,
   }],
 };

src/components/badge/_badge.scss

@@ -2,7 +2,7 @@
  * 1. Accounts for the border
  */
 .euiBadge {
-  font-size: $euiSizeM;
+  font-size: $euiFontSizeXS;
   font-weight: $euiFontWeightMedium;
   line-height: $euiSize + 2px; /* 1 */
   display: inline-block;

src/components/badge/_index.scss

@@ -1 +1,2 @@
 @import 'badge';
+@import 'beta_badge/index';

src/components/badge/beta_badge/__snapshots__/beta_badge.test.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiBetaBadge is rendered 1`] = `
+<span
+  aria-label="aria-label"
+  class="euiBetaBadge testClass1 testClass2"
+  data-test-subj="test subject string"
+  title="Beta"
+>
+  Beta
+</span>
+`;

src/components/badge/beta_badge/_beta_badge.scss

@@ -0,0 +1,30 @@
+.euiBetaBadge {
+  display: inline-block;
+  padding: 0 $euiSizeL;
+  border-radius: $euiSizeL;
+  background-color: $euiColorAccent;
+  vertical-align: super; // if displayed inline with text
+  @include euiSlightShadowHover($euiColorAccent);
+
+  font-size: $euiFontSizeXS;
+  font-weight: $euiFontWeightBold;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: chooseLightOrDarkText($euiColorAccent, $euiColorEmptyShade, $euiColorFullShade);
+  line-height: $euiSizeL;
+  text-align: center;
+  white-space: nowrap;
+
+  cursor: default;
+
+  // When it's just an icon, make it a circle
+  &.euiBetaBadge--iconOnly {
+    padding: 0;
+    width: $euiSizeL;
+
+    .euiBetaBadge__icon {
+      position: relative;
+      margin-top: -1px;
+    }
+  }
+}

src/components/badge/beta_badge/_index.scss

@@ -0,0 +1 @@
+@import 'beta_badge';

src/components/badge/beta_badge/beta_badge.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { EuiToolTip } from '../../tool_tip';
+
+import {
+  ICON_TYPES,
+  EuiIcon,
+} from '../../icon';
+
+export const EuiBetaBadge = ({
+  className,
+  label,
+  tooltipContent,
+  tooltipPosition,
+  title,
+  iconType,
+  ...rest,
+}) => {
+
+  const classes = classNames(
+    'euiBetaBadge',
+    {
+      'euiBetaBadge--iconOnly': iconType,
+    },
+    className
+  );
+
+  let icon;
+  if (iconType) {
+    icon = (
+      <EuiIcon
+        className="euiBetaBadge__icon"
+        type={iconType}
+        size="m"
+        aria-hidden="true"
+      />
+    );
+  }
+
+  if (tooltipContent) {
+    return (
+      <EuiToolTip
+        position={tooltipPosition}
+        content={tooltipContent}
+        title={title || label}
+      >
+        <span
+          className={classes}
+          {...rest}
+        >
+          {icon || label}
+        </span>
+      </EuiToolTip>
+    );
+  } else {
+    return (
+      <span
+        className={classes}
+        title={title || label}
+        {...rest}
+      >
+        {icon || label}
+      </span>
+    )
+  }
+}
+
+EuiBetaBadge.propTypes = {
+  className: PropTypes.string,
+
+  /**
+   * One word label like "Beta" or "Lab"
+   */
+  label: PropTypes.node.isRequired,
+
+  /**
+   * Supply an icon type if the badge should just be an icon
+   */
+  iconType: PropTypes.oneOf(ICON_TYPES),
+
+  /**
+   * Content for the tooltip
+   */
+  tooltipContent: PropTypes.node,
+
+  /**
+   * Custom position of the tooltip
+   */
+  tooltipPosition: PropTypes.string,
+
+  /**
+   * Optional title will be supplied as tooltip title or title attribute otherwise the label will be used
+   */
+  title: PropTypes.string,
+}
+
+EuiBetaBadge.defaultProps = {
+  tooltipPosition: 'top',
+};