Card theme title parity and margin fix (#704)

Adjustments for the look of card titles.
elastic · Apr 25, 2018 · f932145 · f932145
1 parent 2eb26b6
commit f932145
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 **Bug fixes**
 
 - Fixed inherited `line-height` of inputs and buttons ([#702](https://github.com/elastic/eui/pull/702))
+- Fixed card title sizing in K6 theme. ([#704](https://github.com/elastic/eui/pull/704))
 
 ## [`0.0.43`](https://github.com/elastic/eui/tree/v0.0.43)
 

diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap
@@ -126,9 +126,6 @@ exports[`EuiCard is rendered 1`] = `
   class="euiCard euiCard--centerAligned testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <span
-    class="euiCard__top"
-  />
   <span
     class="euiCard__content"
   >

diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -2,6 +2,7 @@
 @import "../panel/mixins";
 
 $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium");
+$euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
 
 // Start with a base of EuiPanel styles
 @include euiPanel($selector: 'euiCard');
@@ -79,14 +80,18 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium");
   }
 }
 
+// If an icon or image exists, add some space
+.euiCard__top + .euiCard__content {
+  margin-top: $euiCardSpacing;
+}
+
 .euiCard__content {
   flex-grow: 1; /* 1 */
 
   .euiCard__title {
     display: block;
-    margin-top: $euiCardSpacing;
-    @include euiTitle($euiFontSizeM);
-    font-weight: $euiFontWeightRegular;
+    @include euiTitle($euiCardTitleSize);
+    font-weight: $euiFontWeightMedium;
   }
 
   .euiCard__description {

diff --git a/src/components/card/card.js b/src/components/card/card.js
@@ -57,17 +57,25 @@ export const EuiCard = ({
     OuterElement = 'button';
   }
 
+  let optionalCardTop;
+  if (image || icon) {
+    optionalCardTop = (
+      <span className="euiCard__top">
+        {imageNode}
+        {iconNode}
+      </span>
+    );
+  }
+
   return (
     <OuterElement
       onClick={onClick}
       className={classes}
       href={href}
       {...rest}
     >
-      <span className="euiCard__top">
-        {imageNode}
-        {iconNode}
-      </span>
+
+      {optionalCardTop}
 
       <span className="euiCard__content">
         <EuiTitle className="euiCard__title">