From ca1526b62f5cf43e42002e43957ea543f2cf810a Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 29 May 2018 10:03:49 -0700
Subject: [PATCH 1/5] beta badges on panels

---
 src-docs/src/views/panel/panel_example.js   | 20 +++++++++++
 src/components/badge/beta_badge/_index.scss |  1 +
 src/components/card/_card.scss              | 33 +++--------------
 src/components/card/_index.scss             |  2 ++
 src/components/panel/_panel.scss            |  4 +++
 src/components/panel/panel.js               | 39 +++++++++++++++++++++
 6 files changed, 71 insertions(+), 28 deletions(-)

diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js
index d908fbdd2aa..c1bd998fd83 100644
--- a/src-docs/src/views/panel/panel_example.js
+++ b/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 />,
   }],
 };
diff --git a/src/components/badge/beta_badge/_index.scss b/src/components/badge/beta_badge/_index.scss
index 10c53901b29..166e3b0878c 100644
--- a/src/components/badge/beta_badge/_index.scss
+++ b/src/components/badge/beta_badge/_index.scss
@@ -1 +1,2 @@
+@import 'mixins';
 @import 'beta_badge';
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index 9ede6a797a5..569c844d66b 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -9,9 +9,8 @@ $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
  */
@@ -21,31 +20,9 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
   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;
 
   .euiCard__top,
   .euiCard__content,
@@ -87,7 +64,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;
diff --git a/src/components/card/_index.scss b/src/components/card/_index.scss
index c68691f95f2..52cb352cd57 100644
--- a/src/components/card/_index.scss
+++ b/src/components/card/_index.scss
@@ -1 +1,3 @@
+@import '../badge/beta_badge/mixins';
+
 @import 'card';
diff --git a/src/components/panel/_panel.scss b/src/components/panel/_panel.scss
index f895d2b354d..cfd3a3b3280 100644
--- a/src/components/panel/_panel.scss
+++ b/src/components/panel/_panel.scss
@@ -1,6 +1,10 @@
 // Export basic class & modifiers
 @include euiPanel($selector: 'euiPanel');
 
+.euiPanel {
+  @include hasBetaBadge;
+}
+
 // Specific
 @each $modifier, $amount in $euiPanelPaddingModifiers {
   .euiPanel.euiPanel--#{$modifier} {
diff --git a/src/components/panel/panel.js b/src/components/panel/panel.js
index 5b0f8cc9831..e9b9c31c975 100644
--- a/src/components/panel/panel.js
+++ b/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,
+      'euiCard--hasBetaBadge': betaBadgeLabel,
     },
     className
   );
@@ -46,8 +52,18 @@ export const EuiPanel = ({
     props.onClick = onClick;
   }
 
+  let optionalBetaBadge;
+  if (betaBadgeLabel) {
+    optionalBetaBadge = (
+      <span className="euiCard__betaBadgeWrapper">
+        <EuiBetaBadge label={betaBadgeLabel} title={betaBadgeTitle} tooltipContent={betaBadgeTooltipContent} className="euiCard__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 card 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 = {

From 0f8616c18db576545f2fc6d98485a96df68f5331 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 29 May 2018 10:50:35 -0700
Subject: [PATCH 2/5] add files, whoops

---
 src-docs/src/views/panel/panel_badge.js      | 29 +++++++++++++++++++
 src/components/badge/beta_badge/_mixins.scss | 30 ++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 src-docs/src/views/panel/panel_badge.js
 create mode 100644 src/components/badge/beta_badge/_mixins.scss

diff --git a/src-docs/src/views/panel/panel_badge.js b/src-docs/src/views/panel/panel_badge.js
new file mode 100644
index 00000000000..93baca6ec2a
--- /dev/null
+++ b/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>
+);
diff --git a/src/components/badge/beta_badge/_mixins.scss b/src/components/badge/beta_badge/_mixins.scss
new file mode 100644
index 00000000000..5fe58d87481
--- /dev/null
+++ b/src/components/badge/beta_badge/_mixins.scss
@@ -0,0 +1,30 @@
+
+/**
+ * 1. Extend beta badges to at least 40% of the card's width
+ */
+
+@mixin hasBetaBadge {
+  &--hasBetaBadge {
+    position: relative;
+  }
+
+  &__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% - #{$euiCardSpacing*2});
+  }
+
+  .euiToolTipAnchor,
+  &__betaBadge {
+    width: 100%; /* 1 */
+  }
+
+  &__betaBadge {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

From 478e958a0e75acb79367a83dd203260275eeef51 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 29 May 2018 16:32:27 -0700
Subject: [PATCH 3/5] rewrite mixin, fix copy/pasta

---
 src/components/badge/beta_badge/_mixins.scss | 38 ++++++++++----------
 src/components/card/_card.scss               |  9 ++---
 src/components/card/_index.scss              |  2 --
 src/components/panel/_panel.scss             |  9 ++++-
 src/components/panel/panel.js                |  8 ++---
 5 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/src/components/badge/beta_badge/_mixins.scss b/src/components/badge/beta_badge/_mixins.scss
index 5fe58d87481..a07c59f3f58 100644
--- a/src/components/badge/beta_badge/_mixins.scss
+++ b/src/components/badge/beta_badge/_mixins.scss
@@ -3,28 +3,28 @@
  * 1. Extend beta badges to at least 40% of the card's width
  */
 
-@mixin hasBetaBadge {
-  &--hasBetaBadge {
+@mixin hasBetaBadge($selector, $spacing: $euiSize) {
+  &.#{$selector}--hasBetaBadge {
     position: relative;
-  }
 
-  &__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% - #{$euiCardSpacing*2});
-  }
+    .#{$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,
-  &__betaBadge {
-    width: 100%; /* 1 */
-  }
+      .euiToolTipAnchor,
+      .#{$selector}__betaBadge {
+        width: 100%; /* 1 */
+      }
 
-  &__betaBadge {
-    overflow: hidden;
-    text-overflow: ellipsis;
+      .#{$selector}__betaBadge {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
   }
 }
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index 569c844d66b..b728943833f 100644
--- a/src/components/card/_card.scss
+++ b/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.
@@ -12,7 +13,7 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
  * 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
@@ -22,7 +23,7 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
   padding: $euiCardSpacing;
   overflow: visible; /* 2 */
 
-  @include hasBetaBadge;
+  @include hasBetaBadge($selector: 'euiCard', $spacing: $euiCardSpacing);
 
   .euiCard__top,
   .euiCard__content,
@@ -120,7 +121,7 @@ $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 */
   }
 }
 
@@ -128,7 +129,7 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
 // 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 {
diff --git a/src/components/card/_index.scss b/src/components/card/_index.scss
index 52cb352cd57..c68691f95f2 100644
--- a/src/components/card/_index.scss
+++ b/src/components/card/_index.scss
@@ -1,3 +1 @@
-@import '../badge/beta_badge/mixins';
-
 @import 'card';
diff --git a/src/components/panel/_panel.scss b/src/components/panel/_panel.scss
index cfd3a3b3280..1de70adbd80 100644
--- a/src/components/panel/_panel.scss
+++ b/src/components/panel/_panel.scss
@@ -1,13 +1,20 @@
+@import '../badge/beta_badge/mixins';
+
 // Export basic class & modifiers
 @include euiPanel($selector: 'euiPanel');
 
 .euiPanel {
-  @include hasBetaBadge;
+  @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});
+    }
   }
 }
diff --git a/src/components/panel/panel.js b/src/components/panel/panel.js
index e9b9c31c975..d2acb636be4 100644
--- a/src/components/panel/panel.js
+++ b/src/components/panel/panel.js
@@ -34,7 +34,7 @@ export const EuiPanel = ({
       'euiPanel--shadow': hasShadow,
       'euiPanel--flexGrowZero': !grow,
       'euiPanel--isClickable': onClick,
-      'euiCard--hasBetaBadge': betaBadgeLabel,
+      'euiPanel--hasBetaBadge': betaBadgeLabel,
     },
     className
   );
@@ -55,8 +55,8 @@ export const EuiPanel = ({
   let optionalBetaBadge;
   if (betaBadgeLabel) {
     optionalBetaBadge = (
-      <span className="euiCard__betaBadgeWrapper">
-        <EuiBetaBadge label={betaBadgeLabel} title={betaBadgeTitle} tooltipContent={betaBadgeTooltipContent} className="euiCard__betaBadge" />
+      <span className="euiPanel__betaBadgeWrapper">
+        <EuiBetaBadge label={betaBadgeLabel} title={betaBadgeTitle} tooltipContent={betaBadgeTooltipContent} className="euiPanel__betaBadge" />
       </span>
     )
   }
@@ -88,7 +88,7 @@ EuiPanel.propTypes = {
   panelRef: PropTypes.func,
   onClick: PropTypes.func,
   /**
-   * Add a badge to the card to label it as "Beta" or other non-GA state
+   * Add a badge to the panel to label it as "Beta" or other non-GA state
    */
   betaBadgeLabel: PropTypes.string,
 

From 9157b018ca8c06f29291bfaa66adbd801562483b Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 29 May 2018 16:39:44 -0700
Subject: [PATCH 4/5] changelog and feedback

---
 CHANGELOG.md                                 | 1 +
 src-docs/src/views/panel/panel_example.js    | 2 +-
 src/components/badge/beta_badge/_mixins.scss | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43755a9cfce..c8fbe404bd6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Added `textStyle="reverse"` prop to `EuiDescriptionList` as well as a class (`.eui-definitionListReverse`) for `dl`'s within `EuiText` ([#882](https://github.com/elastic/eui/pull/882))
 - Added `inspect` icon ([#886](https://github.com/elastic/eui/pull/886))
 - Added `layout` prop to `EuiCard` ([#885](https://github.com/elastic/eui/pull/885))
+- Added the ability for `EuiBetaBadge` to appear on `EuiPanel` similar to `EuiCard` ([#885](https://github.com/elastic/eui/pull/888))
 
 **Bug fixes**
 
diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js
index c1bd998fd83..6a9c732abd9 100644
--- a/src-docs/src/views/panel/panel_example.js
+++ b/src-docs/src/views/panel/panel_example.js
@@ -71,7 +71,7 @@ export const PanelExample = {
     }],
     text: (
       <p>
-        Similar to <Link to="/display/card">EuiCard</Link> panels can also accept
+        Similar to <Link to="/display/card">EuiCard</Link>, panels can also accept
         an <Link to="/display/badge">EuiBetaBadge</Link>.
       </p>
     ),
diff --git a/src/components/badge/beta_badge/_mixins.scss b/src/components/badge/beta_badge/_mixins.scss
index a07c59f3f58..0848db92701 100644
--- a/src/components/badge/beta_badge/_mixins.scss
+++ b/src/components/badge/beta_badge/_mixins.scss
@@ -1,6 +1,6 @@
 
 /**
- * 1. Extend beta badges to at least 40% of the card's width
+ * 1. Extend beta badges to at least 40% of the container's width
  */
 
 @mixin hasBetaBadge($selector, $spacing: $euiSize) {

From dce1ee7d4a9695aa46b245c6b8919fc2d82b07b2 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 1 Jun 2018 14:23:38 -0700
Subject: [PATCH 5/5] changelog

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8fbe404bd6..452a5e85e1c 100644
--- a/CHANGELOG.md
+++ b/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))
@@ -9,7 +11,6 @@
 - Added `textStyle="reverse"` prop to `EuiDescriptionList` as well as a class (`.eui-definitionListReverse`) for `dl`'s within `EuiText` ([#882](https://github.com/elastic/eui/pull/882))
 - Added `inspect` icon ([#886](https://github.com/elastic/eui/pull/886))
 - Added `layout` prop to `EuiCard` ([#885](https://github.com/elastic/eui/pull/885))
-- Added the ability for `EuiBetaBadge` to appear on `EuiPanel` similar to `EuiCard` ([#885](https://github.com/elastic/eui/pull/888))
 
 **Bug fixes**