Fixes elastic#979 Allowing title element to be passed

cchaos · Jul 19, 2018 · 40ef694 · 40ef694
1 parent d669644
commit 40ef694
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src-docs/src/views/card/card_example.js b/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>.

diff --git a/src/components/card/card.js b/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',
 };