Add paddingSize prop to EuiCard and display example to docs

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Exported `EuiCardProps` and `EuiCheckableCardProps` types ([#3640](https://github.com/elastic/eui/pull/3640))
+- Added `paddingSize` prop to `EuiCard` ([#3638](https://github.com/elastic/eui/pull/3638))
 
 ## [`26.0.1`](https://github.com/elastic/eui/tree/v26.0.1)
 

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

@@ -29,4 +29,4 @@ const cardNodes = icons.map(function(item, index) {
   );
 });
 
-export default () => <EuiFlexGroup gutterSize="l">{cardNodes}</EuiFlexGroup>;
+export default () => <EuiFlexGroup gutterSize="l">{cardNodes} </EuiFlexGroup>;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import {
+  EuiCard,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiSpacer size="s" />
+    <EuiFlexGroup gutterSize="l">
+      <EuiFlexItem>
+        <EuiCard
+          layout="horizontal"
+          icon={<EuiIcon size="xl" type="logoLogging" />}
+          onClick={() => {}}
+          title="Logs"
+          display="plain"
+          description="The Elastic Stack is the most popular open source logging platform."
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiCard
+          icon={<EuiIcon size="xl" type="logoLogging" />}
+          title="Logs"
+          display="plain"
+          description="The Elastic Stack is the most popular open source logging platform."
+          onClick={() => {}}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiCard
+          layout="horizontal"
+          icon={<EuiIcon size="xl" type="logoLogging" />}
+          title="Logs"
+          display="plain"
+          description="The Elastic Stack is the most popular open source logging platform."
+          betaBadgeLabel="Beta"
+          betaBadgeTooltipContent="This module is not GA. Please help us by reporting any bugs."
+          onClick={() => {}}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </div>
+);

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

@@ -45,6 +45,10 @@ import CardCheckable from './card_checkable';
 const cardCheckableSource = require('!!raw-loader!./card_checkable');
 const cardCheckableHtml = renderToHtml(CardCheckable);
 
+import CardDisplay from './card_display';
+const cardDisplaySource = require('!!raw-loader!./card_display');
+const cardDisplayHtml = renderToHtml(CardDisplay);
+
 export const CardExample = {
   title: 'Card',
   sections: [
@@ -367,5 +371,41 @@ export const CardExample = {
   </EuiText>
 </EuiCard>`,
     },
+    {
+      title: 'Plain cards',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: cardDisplaySource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: cardDisplayHtml,
+        },
+      ],
+      text: (
+        <Fragment>
+          <p>
+            If you need a card with no borders or shadows pass{' '}
+            <EuiCode language="ts">{'display="plain"'}</EuiCode>. This is a good
+            option to avoid nested panels. Adding an interaction to the card
+            will provide the clickable styling on hover. Note that{' '}
+            <EuiCode>plain</EuiCode> display is not available for
+            <EuiCode>selectable</EuiCode> cards.
+          </p>
+          <p>
+            For non-interactive cards, reduce or eliminate the padding as needed
+            to suit your layout.
+          </p>
+        </Fragment>
+      ),
+      props: { EuiCard },
+      demo: <CardDisplay />,
+      snippet: `<EuiCard
+  title="title"
+  description="description" 
+  display="plain"
+/>`,
+    },
   ],
 };

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

@@ -3,7 +3,7 @@
 exports[`EuiCard is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiCard euiCard--centerAligned testClass1 testClass2"
+  class="euiCard euiCard--paddingMedium euiCard--centerAligned testClass1 testClass2"
   data-test-subj="test subject string"
 >
   <div
@@ -29,7 +29,7 @@ exports[`EuiCard is rendered 1`] = `
 
 exports[`EuiCard props a null icon 1`] = `
 <div
-  class="euiCard euiCard--centerAligned"
+  class="euiCard euiCard--paddingMedium euiCard--centerAligned"
 >
   <div
     class="euiCard__content"
@@ -54,7 +54,7 @@ exports[`EuiCard props a null icon 1`] = `
 
 exports[`EuiCard props children 1`] = `
 <div
-  class="euiCard euiCard--centerAligned euiCard--hasChildren"
+  class="euiCard euiCard--paddingMedium euiCard--centerAligned euiCard--hasChildren"
 >
   <div
     class="euiCard__content"
@@ -80,7 +80,7 @@ exports[`EuiCard props children 1`] = `
 
 exports[`EuiCard props display 1`] = `
 <div
-  class="euiCard euiCard--plain euiCard--centerAligned"
+  class="euiCard euiCard--paddingMedium euiCard--plain euiCard--centerAligned"
 >
   <div
     class="euiCard__content"
@@ -105,7 +105,7 @@ exports[`EuiCard props display 1`] = `
 
 exports[`EuiCard props footer 1`] = `
 <div
-  class="euiCard euiCard--centerAligned"
+  class="euiCard euiCard--paddingMedium euiCard--centerAligned"
 >
   <div
     class="euiCard__content"
@@ -137,7 +137,7 @@ exports[`EuiCard props footer 1`] = `
 
 exports[`EuiCard props horizontal 1`] = `
 <div
-  class="euiCard euiCard--centerAligned euiCard--horizontal"
+  class="euiCard euiCard--paddingMedium euiCard--centerAligned euiCard--horizontal"
 >
   <div
     class="euiCard__content"
@@ -167,7 +167,7 @@ exports[`EuiCard props href supports href as a link 1`] = `
   title="Hoi"
 >
   <div
-    className="euiCard euiCard--centerAligned euiCard--isClickable"
+    className="euiCard euiCard--paddingMedium euiCard--centerAligned euiCard--isClickable"
     onClick={[Function]}
   >
     <div
@@ -213,7 +213,7 @@ exports[`EuiCard props href supports href as a link 1`] = `
 
 exports[`EuiCard props icon 1`] = `
 <div
-  class="euiCard euiCard--centerAligned euiCard--hasIcon"
+  class="euiCard euiCard--paddingMedium euiCard--centerAligned euiCard--hasIcon"
 >
   <div
     class="euiCard__top"
@@ -246,7 +246,7 @@ exports[`EuiCard props icon 1`] = `
 
 exports[`EuiCard props selectable 1`] = `
 <div
-  class="euiCard euiCard--centerAligned euiCard--isClickable euiCard--isSelectable euiCard--isSelectable--text"
+  class="euiCard euiCard--paddingMedium euiCard--centerAligned euiCard--isClickable euiCard--isSelectable euiCard--isSelectable--text"
 >
   <div
     class="euiCard__content"
@@ -288,7 +288,7 @@ exports[`EuiCard props selectable 1`] = `
 
 exports[`EuiCard props textAlign 1`] = `
 <div
-  class="euiCard euiCard--rightAligned"
+  class="euiCard euiCard--paddingMedium euiCard--rightAligned"
 >
   <div
     class="euiCard__content"
@@ -313,7 +313,7 @@ exports[`EuiCard props textAlign 1`] = `
 
 exports[`EuiCard props titleElement 1`] = `
 <div
-  class="euiCard euiCard--centerAligned"
+  class="euiCard euiCard--paddingMedium euiCard--centerAligned"
 >
   <div
     class="euiCard__content"
@@ -338,7 +338,7 @@ exports[`EuiCard props titleElement 1`] = `
 
 exports[`EuiCard props titleSize 1`] = `
 <div
-  class="euiCard euiCard--centerAligned"
+  class="euiCard euiCard--paddingMedium euiCard--centerAligned"
 >
   <div
     class="euiCard__content"

src/components/card/_card.scss

@@ -12,7 +12,6 @@
 .euiCard {
   display: flex;
   flex-direction: column;
-  padding: $euiCardSpacing;
   min-height: 1px; /* 2 */// sass-lint:disable-line mixins-before-declarations
 
   &.euiCard-isDisabled {
@@ -99,11 +98,6 @@
     }
   }
 
-  &.euiCard--isSelectable {
-    position: relative;
-    padding-bottom: $euiCardSpacing + $euiCardBottomNodeHeight;
-  }
-
   &.euiCard-isSelected {
     transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
   }
@@ -112,6 +106,65 @@
 // This creates a bunch of sub selectors for the beta badge
 @include euiHasBetaBadge($selector: '.euiCard', $spacing: $euiCardSpacing);
 
+@each $modifier, $paddingAmount in $euiCardPaddingModifiers {
+  .euiCard--#{$modifier} {
+    padding: $paddingAmount;
+
+    &.euiCard--isSelectable {
+      position: relative;
+      padding-bottom: $paddingAmount + $euiCardBottomNodeHeight;
+    }
+
+    .euiCard__top {
+      flex-grow: 0; /* 1 */
+      position: relative;
+      min-height: 1px; /* 2 */
+
+      .euiCard__image {
+        position: relative;
+        width: calc(100% + (#{$paddingAmount} * 2));
+        left: $paddingAmount * -1;
+        top: $paddingAmount * -1;
+        margin-bottom: $paddingAmount * -1; // ensure the parent is only as tall as the image
+
+        // match border radius, minus 1px because it's inside a border
+        border-top-left-radius: $euiBorderRadius - 1px;
+        border-top-right-radius: $euiBorderRadius - 1px;
+        overflow: hidden;
+
+        img {
+          width: 100%;
+        }
+
+        // IF both exist, position the icon centered on top of image
+        + .euiCard__icon {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -75%); // Fallback for IE as it doesn't accept calcs in translates
+          transform: translate(-50%, calc(-50% + #{$paddingAmount * -1})); // sass-lint:disable-line no-duplicate-properties
+        }
+      }
+    }
+
+  }
+}
+
+.euiCard__top {
+  .euiCard__icon {
+    margin-top: $euiCardSpacing / 2;
+  }
+}
+
+.euiCard__footer:not(:empty) {
+  flex-grow: 0; /* 1 */
+  margin-top: $euiCardSpacing;
+}
+
+.euiCard--hasChildren .euiCard__description {
+  margin-bottom: $euiCardSpacing;
+}
+
 // Selectable cards don't work well without a border
 .euiCard--plain:not(.euiCard--isSelectable) {
   border: none;
@@ -129,42 +182,6 @@
   }
 }
 
-.euiCard__top {
-  flex-grow: 0; /* 1 */
-  position: relative;
-  min-height: 1px; /* 2 */
-
-  .euiCard__icon {
-    margin-top: $euiCardSpacing / 2;
-  }
-
-  .euiCard__image {
-    position: relative;
-    width: calc(100% + (#{$euiCardSpacing} * 2));
-    left: $euiCardSpacing * -1;
-    top: $euiCardSpacing * -1;
-    margin-bottom: $euiCardSpacing * -1; // ensure the parent is only as tall as the image
-
-    // match border radius, minus 1px because it's inside a border
-    border-top-left-radius: $euiBorderRadius - 1px;
-    border-top-right-radius: $euiBorderRadius - 1px;
-    overflow: hidden;
-
-    img {
-      width: 100%;
-    }
-
-    // IF both exist, position the icon centered on top of image
-    + .euiCard__icon {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -75%); // Fallback for IE as it doesn't accept calcs in translates
-      transform: translate(-50%, calc(-50% + #{$euiCardSpacing * -1})); // sass-lint:disable-line no-duplicate-properties
-    }
-  }
-}
-
 // If an icon or image exists, add some space
 .euiCard__top + .euiCard__content {
   margin-top: $euiCardSpacing;
@@ -173,6 +190,10 @@
 .euiCard__content {
   flex-grow: 1; /* 1 */
 
+  .euiCard__description {
+    margin-top: $euiCardSpacing / 2;
+  }
+
   .euiCard__titleAnchor,
   .euiCard__titleButton {
     font: inherit;
@@ -184,14 +205,6 @@
     }
   }
 
-  .euiCard__description {
-    margin-top: $euiCardSpacing / 2;
-  }
-}
-
-.euiCard__footer:not(:empty) {
-  flex-grow: 0; /* 1 */
-  margin-top: $euiCardSpacing;
 }
 
 .euiCard.euiCard--horizontal {
@@ -218,7 +231,3 @@
     margin-right: $euiSize;
   }
 }
-
-.euiCard--hasChildren .euiCard__description {
-  margin-bottom: $euiCardSpacing;
-}

src/components/card/_variables.scss

@@ -16,3 +16,10 @@ $euiCardSelectButtonBackgrounds: (
   danger: tintOrShade($euiColorDanger, 90%, 70%),
   ghost: $euiColorDarkShade,
 );
+
+$euiCardPaddingModifiers: (
+  'paddingNone': 0,
+  'paddingSmall': $euiSizeS,
+  'paddingMedium': $euiSize,
+  'paddingLarge': $euiSizeL
+) !default;