Comitting for posterity

Having EuiPanel > EuiCard doesn’t work because it still needs `display: flex` on EuiPanel but the order in which the SASS files are loaded doesn’t allow for EuiCard styles to override EuiPanel.
cchaos · Feb 15, 2018 · d980560 · d980560
1 parent efe2fde
commit d980560
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 38 deletions.
diff --git a/src-docs/src/views/card/card.js b/src-docs/src/views/card/card.js
@@ -15,7 +15,7 @@ const cardNodes = icons.map(function (item, index) {
       <EuiCard
         icon={<EuiIcon size="xxl" type={`logo${item}`} />}
         title={`Elastic ${item}`}
-        description="Example of a card's description. Stick to one or two sentences."
+        description="Example of a card."
         onClick={() => window.alert('Card clicked')}
       />
     </EuiFlexItem>

diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap
@@ -2,31 +2,35 @@
 
 exports[`EuiCard is rendered 1`] = `
 <div
-  aria-label="aria-label"
-  class="euiPanel euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--textAlign testClass1 testClass2"
-  data-test-subj="test subject string"
+  class="euiPanel"
 >
   <div
-    class="euiCard__top"
-  />
-  <div
-    class="euiCard__content"
+    aria-label="aria-label"
+    class="euiCard euiCard--centerAligned testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <span
-      class="euiTitle euiTitle--small euiCard__title"
-    >
-      Card title
-    </span>
     <div
-      class="euiText euiText--small euiCard__description"
+      class="euiCard__top"
+    />
+    <div
+      class="euiCard__content"
     >
-      <p>
-        Card description
-      </p>
+      <span
+        class="euiTitle euiTitle--small euiCard__title"
+      >
+        Card title
+      </span>
+      <div
+        class="euiText euiText--small euiCard__description"
+      >
+        <p>
+          Card description
+        </p>
+      </div>
     </div>
+    <div
+      class="euiCard__footer"
+    />
   </div>
-  <div
-    class="euiCard__footer"
-  />
 </div>
 `;
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -6,6 +6,7 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium");
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  padding: $euiCardSpacing;
 
   &.euiCard--leftAligned,
   &.euiCard--isClickable.euiCard--leftAligned {
@@ -23,6 +24,8 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium");
   }
 
   &.euiCard--isClickable {
+    display: flex; // override panel
+
     &:focus,
     &:hover {
       .euiCard__title {

diff --git a/src/components/card/card.js b/src/components/card/card.js
@@ -30,7 +30,6 @@ export const EuiCard = ({
     textAlignToClassNameMap[textAlign],
     {
       'euiCard--isClickable': onClick,
-      'euiCard--textAlign': textAlign,
     },
     className,
   );
@@ -50,30 +49,36 @@ export const EuiCard = ({
     );
   }
 
+  const InnerElement = onClick ? 'span' : 'div';
+
   return (
     <EuiPanel
       onClick={onClick}
-      className={classes}
-      {...rest}
+      paddingSize="none"
     >
-      <div className="euiCard__top">
-        {imageNode}
-        {iconNode}
-      </div>
+      <InnerElement
+        className={classes}
+        {...rest}
+      >
+        <InnerElement className="euiCard__top">
+          {imageNode}
+          {iconNode}
+        </InnerElement>
 
-      <div className="euiCard__content">
-        <EuiTitle size="s" className="euiCard__title">
-          <span>{title}</span>
-        </EuiTitle>
+        <InnerElement className="euiCard__content">
+          <EuiTitle size="s" className="euiCard__title">
+            <span>{title}</span>
+          </EuiTitle>
 
-        <EuiText size="s" className="euiCard__description">
-          <p>{description}</p>
-        </EuiText>
-      </div>
+          <EuiText size="s" className="euiCard__description">
+            <p>{description}</p>
+          </EuiText>
+        </InnerElement>
 
-      <div className="euiCard__footer">
-        {footer}
-      </div>
+        <InnerElement className="euiCard__footer">
+          {footer}
+        </InnerElement>
+      </InnerElement>
     </EuiPanel>
   );
 };