EuiCard updates

CHANGELOG.md

@@ -4,15 +4,14 @@
 - Added a visual pattern for Kibana's Global Date Picker ([#1026](https://github.com/elastic/eui/pull/1026))
 - Added `responsive` prop to `EuiFlexGrid` ([#1026](https://github.com/elastic/eui/pull/1026))
 - Added `expand` prop to `EuiTabs` and `EuiTabbedContent` ([#1026](https://github.com/elastic/eui/pull/1026))
+- Allow `titleElement` to be passed to `EuiCard` ([#1032](https://github.com/elastic/eui/pull/1032))
 
 **Bug fixes**
 
 - Fixed `EuiContextMenuPanel` calling `ref` after being unmounted ([#1038](https://github.com/elastic/eui/pull/1038))
 - `EuiOutsideClickDetector` supports nested detectors in the DOM tree ([#1039](https://github.com/elastic/eui/pull/1039))
-
-**Bug Fixes**
-
 - To make it more accessible, added a random id to `EuiSwitch`'s id prop if none is passed.  ([#779](https://github.com/elastic/eui/pull/779))
+- `BetaBadge` now shows outside of `EuiPanel` bounds in IE ([#1032](https://github.com/elastic/eui/pull/1032))
 
 ## [`3.1.0`](https://github.com/elastic/eui/tree/v3.1.0)
 

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

@@ -50,6 +50,11 @@ export const CardExample = {
           <EuiCode>description</EuiCode>, and an <EuiCode>icon</EuiCode>. You can make the whole card
           clickable by giving it an <EuiCode>onClick</EuiCode> handler.
         </p>
+        <p>
+          By default a card&apos;s title element is a <EuiCode>span</EuiCode>. This can be changed via
+          the <EuiCode>titleElement</EuiCode> prop. However, if an <EuiCode>onClick</EuiCode> function is
+          also passed, the title element will be forced back to a span.
+        </p>
         <p>
           By default a card&apos;s content is center aligned. To change the alignment
           set <EuiCode>textAlign</EuiCode> to <EuiCode>left</EuiCode> or <EuiCode>right</EuiCode>.

src/components/badge/beta_badge/_mixins.scss

@@ -1,11 +1,13 @@
 
 /**
  * 1. Extend beta badges to at least 40% of the container's width
+ * 2. Fix for IE to ensure badges are visible outside of a <button> tag
  */
 
 @mixin hasBetaBadge($selector, $spacing: $euiSize) {
   &.#{$selector}--hasBetaBadge {
     position: relative;
+    overflow: visible; /* 2 */
 
     .#{$selector}__betaBadgeWrapper {
       position: absolute;

src/components/card/_card.scss

@@ -10,20 +10,17 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
 
 /**
  * 1. Footer is always at the bottom.
- * 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
+ * 2. 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)
- * 4. Horizontal layouts should always top left align no matter the textAlign prop
+ * 3. Horizontal layouts should always top left align no matter the textAlign prop
  */
 
 // EuiCard specific
 .euiCard {
   display: flex;
   flex-direction: column;
   padding: $euiCardSpacing;
-  overflow: visible; /* 2 */
-  min-height: 1px; /* 3 */
-
+  min-height: 1px; /* 2 */
 
   @include hasBetaBadge($selector: 'euiCard', $spacing: $euiCardSpacing);
 
@@ -67,7 +64,7 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
 .euiCard__top {
   flex-grow: 0; /* 1 */
   position: relative;
-  min-height: 1px; /* 3 */
+  min-height: 1px; /* 2 */
 
   .euiCard__icon {
     margin-top: $euiCardSpacing/2;
@@ -123,15 +120,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; /* 4 */
+    text-align: left; /* 3 */
   }
 }
 
 // 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; /* 4 */
+  align-items: flex-start !important; /* 3 */
 
   .euiCard__top,
   .euiCard__content {

src/components/card/card.js

@@ -40,6 +40,7 @@ export const EuiCard = ({
   className,
   description,
   title,
+  titleElement,
   icon,
   image,
   footer,
@@ -94,6 +95,11 @@ export const EuiCard = ({
     OuterElement = 'button';
   }
 
+  let TitleElement = titleElement;
+  if (OuterElement === 'button') {
+    TitleElement = 'span';
+  }
+
   let optionalCardTop;
   if (imageNode || iconNode) {
     optionalCardTop = (
@@ -133,7 +139,7 @@ export const EuiCard = ({
 
       <span className="euiCard__content">
         <EuiTitle className="euiCard__title">
-          <span>{title}</span>
+          <TitleElement>{title}</TitleElement>
         </EuiTitle>
 
         <EuiText size="s" className="euiCard__description">
@@ -153,6 +159,11 @@ export const EuiCard = ({
 EuiCard.propTypes = {
   className: PropTypes.string,
   title: PropTypes.node.isRequired,
+  /**
+   * Determines the title's heading element. Will force to 'span' if
+   * the card is a button.
+   */
+  titleElement: PropTypes.oneOf(['h2', 'h3', 'h4', 'h5', 'h6', 'span']),
   description: PropTypes.node.isRequired,
 
   /**
@@ -203,4 +214,5 @@ EuiCard.propTypes = {
 EuiCard.defaultProps = {
   textAlign: 'center',
   layout: 'vertical',
+  titleElement: 'span',
 };