Add paddingSize prop to EuiCard and display example to docs

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `26.0.1`.
+- 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,15 @@
+import React from 'react';
+
+import { EuiCard, EuiIcon } from '../../../../src/components';
+
+export default () => (
+  <div style={{ maxWidth: 350 }}>
+    <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."
+    />
+  </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,32 @@ 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>.
+          </p>
+        </Fragment>
+      ),
+      props: { EuiCard },
+      demo: <CardDisplay />,
+      snippet: `<EuiCard
+  title="title"
+  display="plain"
+  description="description" />`,
+    },
   ],
 };

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,64 @@
 // This creates a bunch of sub selectors for the beta badge
 @include euiHasBetaBadge($selector: '.euiCard', $spacing: $euiCardSpacing);
 
+@each $modifier, $amount in $euiPanelPaddingModifiers {
+  &.euiCard--#{$modifier} {
+    padding: $amount;
+
+    &.euiCard--isSelectable {
+      position: relative;
+      padding-bottom: $amount + $euiCardBottomNodeHeight;
+    }
+
+    .euiCard__top {
+      flex-grow: 0; /* 1 */
+      position: relative;
+      min-height: 1px; /* 2 */
+
+      .euiCard__icon {
+        margin-top: $amount / 2;
+      }
+
+      .euiCard__image {
+        position: relative;
+        width: calc(100% + (#{$amount} * 2));
+        left: $amount * -1;
+        top: $amount * -1;
+        margin-bottom: $amount * -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% + #{$amount * -1})); // sass-lint:disable-line no-duplicate-properties
+        }
+      }
+    }
+
+    .euiCard__content {
+      .euiCard__description {
+        margin-top: $amount / 2;
+      }
+    }
+
+    .euiCard__footer:not(:empty) {
+      flex-grow: 0; /* 1 */
+      margin-top: $amount;
+    }
+  }
+}
+
 // Selectable cards don't work well without a border
 .euiCard--plain:not(.euiCard--isSelectable) {
   border: none;
@@ -129,42 +181,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;
@@ -184,14 +200,6 @@
     }
   }
 
-  .euiCard__description {
-    margin-top: $euiCardSpacing / 2;
-  }
-}
-
-.euiCard__footer:not(:empty) {
-  flex-grow: 0; /* 1 */
-  margin-top: $euiCardSpacing;
 }
 
 .euiCard.euiCard--horizontal {

src/components/card/card.tsx

@@ -66,6 +66,8 @@ const displayToClassNameMap: { [display in CardDisplay]: string } = {
 
 export const DISPLAYS = keysOf(displayToClassNameMap);
 
+export type CardPaddingSize = 's' | 'm' | 'l';
+
 type EuiCardProps = Omit<CommonProps, 'aria-label'> & {
   /**
    * Card's are required to have at least a title and description
@@ -154,8 +156,20 @@ type EuiCardProps = Omit<CommonProps, 'aria-label'> & {
    * Selectable cards will always display as 'panel'.
    */
   display?: CardDisplay;
+  /**
+   * Padding applied to the card
+   */
+  paddingSize?: CardPaddingSize;
 };
 
+const paddingSizeToClassNameMap = {
+  s: 'euiCard--paddingSmall',
+  m: 'euiCard--paddingMedium',
+  l: 'euiCard--paddingLarge',
+};
+
+export const SIZES = Object.keys(paddingSizeToClassNameMap);
+
 export const EuiCard: FunctionComponent<EuiCardProps> = ({
   className,
   description,
@@ -178,6 +192,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   layout = 'vertical',
   selectable,
   display = 'panel',
+  paddingSize = 'm',
   ...rest
 }) => {
   /**
@@ -209,6 +224,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
 
   const classes = classNames(
     'euiCard',
+    paddingSize ? paddingSizeToClassNameMap[paddingSize] : null,
     displayToClassNameMap[display],
     textAlignToClassNameMap[textAlign],
     layoutToClassNameMap[layout],