Changing the way EuiCard inherits EuiPanel

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Fix appearance of checked checkeboxes and radios in IE ([#407](https://github.com/elastic/eui/pull/407))
 - Fix disabled vs enabled appearance of checked checkeboxes and radios ([#407](https://github.com/elastic/eui/pull/407))
 - Fix disabled & checked state of switches ([#407](https://github.com/elastic/eui/pull/407))
+- Fix EuiCard content alignment when content is short. ([#415](https://github.com/elastic/eui/pull/415))
 
 # [`0.0.21`](https://github.com/elastic/eui/tree/v0.0.21)
 
@@ -21,7 +22,7 @@
 - Added importAction and exportAction icons ([#394](https://github.com/elastic/eui/pull/394))
 - Added `EuiCard` for UI patterns that need an icon/image, title and description with some sort of action. ([#380](https://github.com/elastic/eui/pull/380))
 - Add TypeScript definitions for the `<EuiHealth>` component. ([#403](https://github.com/elastic/eui/pull/403))
-- Added `SearchBar` component - introduces a simple yet rich query language to search for objects + search box and filter controls to construct/manipulate it. ([#379](https://github.com/elastic/eui/pull/379))  
+- Added `SearchBar` component - introduces a simple yet rich query language to search for objects + search box and filter controls to construct/manipulate it. ([#379](https://github.com/elastic/eui/pull/379))
 
 **Bug fixes**
 

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

@@ -9,31 +9,31 @@ import {
 export default () => (
   <div>
     <EuiPanel paddingSize="none">
-      <EuiCode>sizePadding=&quot;none&quot;</EuiCode>
+      <EuiCode>paddingSize=&quot;none&quot;</EuiCode>
     </EuiPanel>
 
     <EuiSpacer size="l"/>
 
     <EuiPanel paddingSize="s">
-      <EuiCode>sizePadding=&quot;s&quot;</EuiCode>
+      <EuiCode>paddingSize=&quot;s&quot;</EuiCode>
     </EuiPanel>
 
     <EuiSpacer size="l"/>
 
     <EuiPanel paddingSize="m">
-      <EuiCode>sizePadding=&quot;m&quot;</EuiCode>
+      <EuiCode>paddingSize=&quot;m&quot;</EuiCode>
     </EuiPanel>
 
     <EuiSpacer size="l"/>
 
     <EuiPanel paddingSize="l">
-      <EuiCode>sizePadding=&quot;l&quot;</EuiCode>
+      <EuiCode>paddingSize=&quot;l&quot;</EuiCode>
     </EuiPanel>
 
     <EuiSpacer size="l"/>
 
     <EuiPanel paddingSize="l" hasShadow>
-      <EuiCode>sizePadding=&quot;l&quot;</EuiCode>, <EuiCode>hasShadow</EuiCode>
+      <EuiCode>paddingSize=&quot;l&quot;</EuiCode>, <EuiCode>hasShadow</EuiCode>
     </EuiPanel>
   </div>
 );

src/components/card/__snapshots__/card.test.js.snap

@@ -3,13 +3,13 @@
 exports[`EuiCard is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPanel euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--textAlign testClass1 testClass2"
+  class="euiCard euiCard--centerAligned testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <div
+  <span
     class="euiCard__top"
   />
-  <div
+  <span
     class="euiCard__content"
   >
     <span
@@ -24,8 +24,8 @@ exports[`EuiCard is rendered 1`] = `
         Card description
       </p>
     </div>
-  </div>
-  <div
+  </span>
+  <span
     class="euiCard__footer"
   />
 </div>

src/components/card/_card.scss

@@ -1,28 +1,46 @@
 @import "../panel/variables";
+@import "../panel/mixins";
 
 $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium");
 
+// Start with a base of EuiPanel styles
+@include euiPanel($selector: 'euiCard');
+
+// EuiCard specific
 .euiCard {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  padding: $euiCardSpacing;
+
+  .euiCard__top,
+  .euiCard__content,
+  .euiCard__footer {
+    display: block;
+    width: 100%;
+  }
 
   &.euiCard--leftAligned,
   &.euiCard--isClickable.euiCard--leftAligned {
     text-align: left;
+    align-items: flex-start;
   }
 
   &.euiCard--centerAligned,
   &.euiCard--isClickable.euiCard--centerAligned {
     text-align: center;
+    align-items: center;
   }
 
   &.euiCard--rightAligned,
   &.euiCard--isClickable.euiCard--rightAligned {
     text-align: right;
+    align-items: flex-end;
   }
 
   &.euiCard--isClickable {
+    display: flex;
+
     &:focus,
     &:hover {
       .euiCard__title {
@@ -36,19 +54,6 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium");
  * 1. Footer is always at the bottom.
  */
 
-.euiCard__content {
-  flex-grow: 1; /* 1 */
-
-  .euiCard__title {
-    display: block;
-    margin-top: $euiCardSpacing;
-  }
-
-  .euiCard__description {
-    margin-top: $euiCardSpacing/2;
-  }
-}
-
 .euiCard__top {
   flex-grow: 0; /* 1 */
   position: relative;
@@ -74,6 +79,19 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium");
   }
 }
 
+.euiCard__content {
+  flex-grow: 1; /* 1 */
+
+  .euiCard__title {
+    display: block;
+    margin-top: $euiCardSpacing;
+  }
+
+  .euiCard__description {
+    margin-top: $euiCardSpacing/2;
+  }
+}
+
 .euiCard__footer:not(:empty) {
   flex-grow: 0; /* 1 */
   margin-top: $euiCardSpacing;

src/components/card/card.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import { EuiPanel } from '../panel';
 import { EuiText } from '../text';
 import { EuiTitle } from '../title';
 
@@ -30,7 +29,6 @@ export const EuiCard = ({
     textAlignToClassNameMap[textAlign],
     {
       'euiCard--isClickable': onClick,
-      'euiCard--textAlign': textAlign,
     },
     className,
   );
@@ -50,41 +48,59 @@ export const EuiCard = ({
     );
   }
 
+  const OuterElement = onClick ? 'button' : 'div';
+
   return (
-    <EuiPanel
+    <OuterElement
       onClick={onClick}
       className={classes}
       {...rest}
     >
-      <div className="euiCard__top">
+      <span className="euiCard__top">
         {imageNode}
         {iconNode}
-      </div>
+      </span>
 
-      <div className="euiCard__content">
+      <span className="euiCard__content">
         <EuiTitle size="s" className="euiCard__title">
           <span>{title}</span>
         </EuiTitle>
 
         <EuiText size="s" className="euiCard__description">
           <p>{description}</p>
         </EuiText>
-      </div>
+      </span>
 
-      <div className="euiCard__footer">
+      <span className="euiCard__footer">
         {footer}
-      </div>
-    </EuiPanel>
+      </span>
+    </OuterElement>
   );
 };
 
 EuiCard.propTypes = {
   className: PropTypes.string,
-  description: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+
+  /**
+   * Requires a <EuiIcon> node
+   */
   icon: PropTypes.node,
+
+  /**
+   * Accepts a url in string form
+   */
   image: PropTypes.string,
+
+  /**
+   * Accepts any combination of elements
+   */
   footer: PropTypes.node,
+
+  /**
+   * Use only if you want to forego a button in the footer and make the whole card clickable
+   */
   onClick: PropTypes.func,
   textAlign: PropTypes.oneOf(ALIGNMENTS),
 };

src/components/panel/_index.scss

@@ -1,2 +1,3 @@
 @import 'variables';
-@import 'panel';
+@import 'mixins';
+@import 'panel';

src/components/panel/_mixins.scss

@@ -0,0 +1,48 @@
+/**
+ *  Mixin for use in:
+ *  - EuiCard
+*/
+@mixin euiPanel($selector){
+  @if variable-exists(selector) == false {
+    @error "A $selector must be provided to @mixin euiPanel().";
+  }
+  @else {
+    .#{$selector} {
+
+      @include euiBottomShadowSmall;
+      background-color: $euiColorEmptyShade;
+      border: $euiBorderThin;
+      border-radius: $euiBorderRadius;
+      flex-grow: 1;
+      &.#{$selector}--flexGrowZero {
+        flex-grow: 0;
+      }
+
+      &.#{$selector}--isClickable {
+        // in case of button wrapper which inherently is inline-block and no width
+        display: block;
+        width: 100%;
+        text-align: left;
+
+        // transition the shadow
+        @include euiSlightShadow;
+        transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
+
+        &:hover,
+        &:focus {
+          @include euiSlightShadowHover;
+          transform: translateY(-2px);
+          cursor: pointer;
+        }
+      }
+
+      &.#{$selector}--shadow {
+        &,
+        &:hover,
+        &:focus {
+          @include euiBottomShadow;
+        }
+      }
+    }
+  }
+}

src/components/panel/_panel.scss

@@ -1,39 +1,9 @@
-.euiPanel {
-  @include euiBottomShadowSmall;
-  background-color: $euiColorEmptyShade;
-  border: $euiBorderThin;
-  border-radius: $euiBorderRadius;
-  flex-grow: 1;
+// Export basic class & modifiers
+@include euiPanel($selector: 'euiPanel');
 
-  @each $modifier, $amount in $euiPanelPaddingModifiers {
-    &.euiPanel--#{$modifier} {
-      padding: $amount;
-    }
-  }
-
-  &.euiPanel--shadow {
-    @include euiBottomShadow;
-  }
-
-  &.euiPanel--flexGrowZero {
-    flex-grow: 0;
-  }
-
-  &.euiPanel--isClickable {
-    // in case of button wrapper which inherently is inline-block and no width
-    display: block;
-    width: 100%;
-    text-align: left;
-
-    // transition the shadow
-    @include euiSlightShadow;
-    transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-
-    &:hover,
-    &:focus {
-      @include euiSlightShadowHover;
-      transform: translateY(-2px);
-      cursor: pointer;
-    }
+// Specific
+@each $modifier, $amount in $euiPanelPaddingModifiers {
+  .euiPanel.euiPanel--#{$modifier} {
+    padding: $amount;
   }
 }