Beta badges on panels

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added the ability for `EuiBetaBadge` to appear on `EuiPanel` similar to `EuiCard` ([#885](https://github.com/elastic/eui/pull/888))
+
 **Bug fixes**
 - Removed `.nvmrc` file from published npm package ([#892](https://github.com/elastic/eui/pull/892))
 - `EuiComboBox` no longer shows the _clear_ icon when it's a no-op ([#890](https://github.com/elastic/eui/pull/890))

src-docs/src/views/panel/panel_badge.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+const badges = [null, 'Beta', 'Lab'];
+
+const panelNodes = badges.map(function (item, index) {
+  return (
+    <EuiFlexItem key={index}>
+      <EuiPanel
+        betaBadgeLabel={badges[index]}
+        betaBadgeTooltipContent={badges[index] ? "This module is not GA. Please help us by reporting any bugs." : undefined}
+        onClick={() => window.alert('Card clicked')}
+      >
+        I am some panel content
+      </EuiPanel>
+    </EuiFlexItem>
+  );
+});
+
+export default () => (
+  <EuiFlexGroup gutterSize="l">
+    {panelNodes}
+  </EuiFlexGroup>
+);

src-docs/src/views/panel/panel_example.js

@@ -21,6 +21,10 @@ import PanelHover from './panel_hover';
 const panelHoverSource = require('!!raw-loader!./panel_hover');
 const panelHoverHtml = renderToHtml(PanelHover);
 
+import PanelBadge from './panel_badge';
+const panelBadgeSource = require('!!raw-loader!./panel_badge');
+const panelBadgeHtml = renderToHtml(PanelBadge);
+
 export const PanelExample = {
   title: 'Panel',
   sections: [{
@@ -56,5 +60,21 @@ export const PanelExample = {
       </p>
     ),
     demo: <PanelHover />,
+  }, {
+    title: 'Panel beta badges',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: panelBadgeSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: panelBadgeHtml,
+    }],
+    text: (
+      <p>
+        Similar to <Link to="/display/card">EuiCard</Link>, panels can also accept
+        an <Link to="/display/badge">EuiBetaBadge</Link>.
+      </p>
+    ),
+    demo: <PanelBadge />,
   }],
 };

src/components/badge/beta_badge/_index.scss

@@ -1 +1,2 @@
+@import 'mixins';
 @import 'beta_badge';

src/components/badge/beta_badge/_mixins.scss

@@ -0,0 +1,30 @@
+
+/**
+ * 1. Extend beta badges to at least 40% of the container's width
+ */
+
+@mixin hasBetaBadge($selector, $spacing: $euiSize) {
+  &.#{$selector}--hasBetaBadge {
+    position: relative;
+
+    .#{$selector}__betaBadgeWrapper {
+      position: absolute;
+      top: $euiSizeL/-2;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 3; // get above abs positioned image
+      min-width: 40%; /* 1 */
+      max-width: calc(100% - #{$spacing*2});
+
+      .euiToolTipAnchor,
+      .#{$selector}__betaBadge {
+        width: 100%; /* 1 */
+      }
+
+      .#{$selector}__betaBadge {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}

src/components/card/_card.scss

@@ -1,5 +1,6 @@
 @import "../panel/variables";
 @import "../panel/mixins";
+@import '../badge/beta_badge/mixins';
 
 $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium");
 $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
@@ -9,43 +10,20 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
 
 /**
  * 1. Footer is always at the bottom.
- * 2. Extend beta badges to at least 40% of the card's width
- * 3. Fix for IE to ensure badges are visible outside of a <button> tag
- * 4. Fix for IE where the image correctly resizes in width but doesn't collapse it's height
+ * 2. Fix for IE to ensure badges are visible outside of a <button> tag
+ * 3. Fix for IE where the image correctly resizes in width but doesn't collapse it's height
       (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421)
- * 5. Horizontal layouts should always top left align no matter the textAlign prop
+ * 4. Horizontal layouts should always top left align no matter the textAlign prop
  */
 
 // EuiCard specific
 .euiCard {
   display: flex;
   flex-direction: column;
   padding: $euiCardSpacing;
-  overflow: visible; /* 3 */
+  overflow: visible; /* 2 */
 
-  &.euiCard--hasBetaBadge {
-    position: relative;
-
-    .euiCard__betaBadgeWrapper {
-      position: absolute;
-      top: $euiSizeL/-2;
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 3; // get above abs positioned image
-      min-width: 40%; /* 2 */
-      max-width: calc(100% - #{$euiCardSpacing*2});
-
-      .euiToolTipAnchor,
-      .euiCard__betaBadge {
-        width: 100%; /* 2 */
-      }
-
-      .euiCard__betaBadge {
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
+  @include hasBetaBadge($selector: 'euiCard', $spacing: $euiCardSpacing);
 
   .euiCard__top,
   .euiCard__content,
@@ -87,7 +65,7 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
 .euiCard__top {
   flex-grow: 0; /* 1 */
   position: relative;
-  min-height: 1px; /* 4 */
+  min-height: 1px; /* 3 */
 
   .euiCard__icon {
     margin-top: $euiCardSpacing/2;
@@ -143,15 +121,15 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
 .euiCard.euiCard--horizontal {
   .euiCard__content {
     padding-top: $euiSizeS; // Aligns title and text a bit better and adds spacing in case of beta badge
-    text-align: left; /* 5 */
+    text-align: left; /* 4 */
   }
 }
 
 // Only change the flex direction if the card has an icon
 // otherwise the button tag won't properly align contents to top
 .euiCard.euiCard--horizontal.euiCard--hasIcon {
   flex-direction: row;
-  align-items: flex-start !important; /* 5 */
+  align-items: flex-start !important; /* 4 */
 
   .euiCard__top,
   .euiCard__content {

src/components/panel/_panel.scss

@@ -1,9 +1,20 @@
+@import '../badge/beta_badge/mixins';
+
 // Export basic class & modifiers
 @include euiPanel($selector: 'euiPanel');
 
+.euiPanel {
+  @include hasBetaBadge($selector: 'euiPanel');
+}
+
 // Specific
 @each $modifier, $amount in $euiPanelPaddingModifiers {
   .euiPanel.euiPanel--#{$modifier} {
     padding: $amount;
+
+    // Overwrite @hasBetaBadge max-width depending upon padding
+    .euiPanel__betaBadgeWrapper {
+      max-width: calc(100% - #{$amount*2});
+    }
   }
 }

src/components/panel/panel.js

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import { EuiBetaBadge } from '../badge/beta_badge';
+
 const paddingSizeToClassNameMap = {
   none: null,
   s: 'euiPanel--paddingSmall',
@@ -19,6 +21,9 @@ export const EuiPanel = ({
   grow,
   panelRef,
   onClick,
+  betaBadgeLabel,
+  betaBadgeTooltipContent,
+  betaBadgeTitle,
   ...rest
 }) => {
 
@@ -29,6 +34,7 @@ export const EuiPanel = ({
       'euiPanel--shadow': hasShadow,
       'euiPanel--flexGrowZero': !grow,
       'euiPanel--isClickable': onClick,
+      'euiPanel--hasBetaBadge': betaBadgeLabel,
     },
     className
   );
@@ -46,8 +52,18 @@ export const EuiPanel = ({
     props.onClick = onClick;
   }
 
+  let optionalBetaBadge;
+  if (betaBadgeLabel) {
+    optionalBetaBadge = (
+      <span className="euiPanel__betaBadgeWrapper">
+        <EuiBetaBadge label={betaBadgeLabel} title={betaBadgeTitle} tooltipContent={betaBadgeTooltipContent} className="euiPanel__betaBadge" />
+      </span>
+    )
+  }
+
   return (
     <PanelTag {...props} {...rest}>
+      {optionalBetaBadge}
       {children}
     </PanelTag>
   );
@@ -57,11 +73,34 @@ export const EuiPanel = ({
 EuiPanel.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * If active, adds a deeper shadow to the panel
+   */
   hasShadow: PropTypes.bool,
+  /**
+   * Padding applied to the panel
+   */
   paddingSize: PropTypes.oneOf(SIZES),
+  /**
+   * When true the panel will grow to match `EuiFlexItem`
+   */
   grow: PropTypes.bool,
   panelRef: PropTypes.func,
   onClick: PropTypes.func,
+  /**
+   * Add a badge to the panel to label it as "Beta" or other non-GA state
+   */
+  betaBadgeLabel: PropTypes.string,
+
+  /**
+   * Add a description to the beta badge (will appear in a tooltip)
+   */
+  betaBadgeTooltipContent: PropTypes.node,
+
+  /**
+   * Optional title will be supplied as tooltip title or title attribute otherwise the label will be used
+   */
+  betaBadgeTitle: PropTypes.string,
 };
 
 EuiPanel.defaultProps = {