Add paddingSize prop to EuiCard and display example to docs (#3638)

* adding paddingSize to EuiCard and display example * cl * add more examples * pr feedback * make card with image work when paddingSize is none * removed margins from loop * broken test * sizes ts * cl again Co-authored-by: Greg Thompson <[email protected]>
elastic · Jul 2, 2020 · 64b63c5 · 64b63c5
1 parent 75892ae
commit 64b63c5
Show file tree

Hide file tree

Showing 9 changed files with 305 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `26.3.0`.
+- Added `paddingSize` prop to `EuiCard` ([#3638](https://github.com/elastic/eui/pull/3638))
 
 ## [`26.3.0`](https://github.com/elastic/eui/tree/v26.3.0)
 

diff --git a/src-docs/src/views/card/card_beta.js b/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>;
diff --git a/src-docs/src/views/card/card_display.js b/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>
+);
diff --git a/src-docs/src/views/card/card_example.js b/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 with the prop <EuiCode>paddingSize</EuiCode>.
+          </p>
+        </Fragment>
+      ),
+      props: { EuiCard },
+      demo: <CardDisplay />,
+      snippet: `<EuiCard
+  title="title"
+  description="description" 
+  display="plain"
+/>`,
+    },
   ],
 };
diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/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"
@@ -244,9 +244,109 @@ exports[`EuiCard props icon 1`] = `
 </div>
 `;
 
+exports[`EuiCard props paddingSize l is applied 1`] = `
+<div
+  class="euiCard euiCard--paddingLarge euiCard--centerAligned"
+>
+  <div
+    class="euiCard__content"
+  >
+    <span
+      class="euiTitle euiTitle--small euiCard__title"
+      id="generated-idTitle"
+    >
+      Card title
+    </span>
+    <div
+      class="euiText euiText--small euiCard__description"
+      id="generated-idDescription"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiCard props paddingSize m is applied 1`] = `
+<div
+  class="euiCard euiCard--paddingMedium euiCard--centerAligned"
+>
+  <div
+    class="euiCard__content"
+  >
+    <span
+      class="euiTitle euiTitle--small euiCard__title"
+      id="generated-idTitle"
+    >
+      Card title
+    </span>
+    <div
+      class="euiText euiText--small euiCard__description"
+      id="generated-idDescription"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiCard props paddingSize none is applied 1`] = `
+<div
+  class="euiCard euiCard--paddingNone euiCard--centerAligned"
+>
+  <div
+    class="euiCard__content"
+  >
+    <span
+      class="euiTitle euiTitle--small euiCard__title"
+      id="generated-idTitle"
+    >
+      Card title
+    </span>
+    <div
+      class="euiText euiText--small euiCard__description"
+      id="generated-idDescription"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiCard props paddingSize s is applied 1`] = `
+<div
+  class="euiCard euiCard--paddingSmall euiCard--centerAligned"
+>
+  <div
+    class="euiCard__content"
+  >
+    <span
+      class="euiTitle euiTitle--small euiCard__title"
+      id="generated-idTitle"
+    >
+      Card title
+    </span>
+    <div
+      class="euiText euiText--small euiCard__description"
+      id="generated-idDescription"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 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 +388,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 +413,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 +438,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"
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>;