make card with image work when paddingSize is none

elastic · Jun 23, 2020 · 652dac6 · 652dac6
1 parent 7d90d11
commit 652dac6
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 2 deletions.
diff --git a/src-docs/src/views/card/card_image.js b/src-docs/src/views/card/card_image.js
@@ -47,6 +47,7 @@ export default () => (
       <EuiCard
         textAlign="left"
         href="https://elastic.github.io/eui/"
+        paddingSize="none"
         image="https://source.unsplash.com/400x200/?City"
         icon={<EuiIcon size="xxl" type="logoBeats" />}
         title={'Beats in the City'}

diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -106,7 +106,7 @@
 // This creates a bunch of sub selectors for the beta badge
 @include euiHasBetaBadge($selector: '.euiCard', $spacing: $euiCardSpacing);
 
-@each $modifier, $paddingAmount in $euiPanelPaddingModifiers {
+@each $modifier, $paddingAmount in $euiCardPaddingModifiers {
   .euiCard--#{$modifier} {
     padding: $paddingAmount;
 

diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
@@ -163,7 +163,7 @@ export type EuiCardProps = Omit<CommonProps, 'aria-label'> & {
 };
 
 const paddingSizeToClassNameMap = {
-  none: null,
+  none: 'euiCard--paddingNone',
   s: 'euiCard--paddingSmall',
   m: 'euiCard--paddingMedium',
   l: 'euiCard--paddingLarge',

diff --git a/src/global_styling/variables/_card.scss b/src/global_styling/variables/_card.scss
@@ -0,0 +1,6 @@
+$euiCardPaddingModifiers: (
+  'paddingNone': 0,
+  'paddingSmall': $euiSizeS,
+  'paddingMedium': $euiSize,
+  'paddingLarge': $euiSizeL
+) !default;
diff --git a/src/global_styling/variables/_index.scss b/src/global_styling/variables/_index.scss
@@ -20,4 +20,5 @@
 @import 'form';
 @import 'header';
 @import 'panel';
+@import 'card';
 @import 'tool_tip';