From a23360915cdf639e499026ee211956221bd0040f Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 18 Jun 2020 15:44:52 -0700 Subject: [PATCH 01/10] adding paddingSize to EuiCard and display example --- src-docs/src/views/card/card_beta.js | 2 +- src-docs/src/views/card/card_display.js | 15 +++ src-docs/src/views/card/card_example.js | 31 +++++ .../card/__snapshots__/card.test.tsx.snap | 24 ++-- src/components/card/_card.scss | 108 ++++++++++-------- src/components/card/card.tsx | 16 +++ 6 files changed, 133 insertions(+), 63 deletions(-) create mode 100644 src-docs/src/views/card/card_display.js diff --git a/src-docs/src/views/card/card_beta.js b/src-docs/src/views/card/card_beta.js index 209e1966a90..77ed7abb683 100644 --- 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 () => {cardNodes}; +export default () => {cardNodes} ; diff --git a/src-docs/src/views/card/card_display.js b/src-docs/src/views/card/card_display.js new file mode 100644 index 00000000000..8386823f889 --- /dev/null +++ b/src-docs/src/views/card/card_display.js @@ -0,0 +1,15 @@ +import React from 'react'; + +import { EuiCard, EuiIcon } from '../../../../src/components'; + +export default () => ( +
+ } + title="Logs" + display="plain" + description="The Elastic Stack is the most popular open source logging platform." + /> +
+); diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index 3fa5564c6e3..5611cd784e3 100644 --- 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,32 @@ export const CardExample = { `, }, + { + title: 'Plain cards', + source: [ + { + type: GuideSectionTypes.JS, + code: cardDisplaySource, + }, + { + type: GuideSectionTypes.HTML, + code: cardDisplayHtml, + }, + ], + text: ( + +

+ If you need a card with no borders or shadows pass{' '} + {'display="plain"'}. +

+ + ), + props: { EuiCard }, + demo: , + snippet: ``, + }, ], }; diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap index 41eb65ad50b..b3c272ca201 100644 --- 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`] = `
& { /** * Card's are required to have at least a title and description @@ -154,8 +156,20 @@ type EuiCardProps = Omit & { * 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 = ({ className, description, @@ -178,6 +192,7 @@ export const EuiCard: FunctionComponent = ({ layout = 'vertical', selectable, display = 'panel', + paddingSize = 'm', ...rest }) => { /** @@ -209,6 +224,7 @@ export const EuiCard: FunctionComponent = ({ const classes = classNames( 'euiCard', + paddingSize ? paddingSizeToClassNameMap[paddingSize] : null, displayToClassNameMap[display], textAlignToClassNameMap[textAlign], layoutToClassNameMap[layout], From 635e1ba615d1ffa2960cdb1b0df5a4c97be606f8 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 18 Jun 2020 16:22:00 -0700 Subject: [PATCH 02/10] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d76fb51a1a..e5cb90849e4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Added `'any'` option to the `step` prop of the `EuiFieldNumber` ([#3562](https://github.com/elastic/eui/pull/3562)) - Moved all `EuiHeader` SASS variables to `global_styles` ([#3592](https://github.com/elastic/eui/pull/3592)) - Default `titleSize` get's implicitly set to 'm' for `EuiEmptyPrompt` ([#3598](https://github.com/elastic/eui/pull/3598)) +- Added `paddingSize` prop to `EuiCard` ([#3638](https://github.com/elastic/eui/pull/3638)) **Bug fixes** From b3d6d76b3c9a481557c75664d90bb104ba4bbfe1 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 23 Jun 2020 12:08:36 -0700 Subject: [PATCH 03/10] add more examples --- src-docs/src/views/card/card_display.js | 51 ++++++++++++++++++++----- src-docs/src/views/card/card_example.js | 8 +++- src/components/card/_card.scss | 8 ++-- 3 files changed, 53 insertions(+), 14 deletions(-) diff --git a/src-docs/src/views/card/card_display.js b/src-docs/src/views/card/card_display.js index 8386823f889..eaa1270a376 100644 --- a/src-docs/src/views/card/card_display.js +++ b/src-docs/src/views/card/card_display.js @@ -1,15 +1,48 @@ import React from 'react'; -import { EuiCard, EuiIcon } from '../../../../src/components'; +import { + EuiCard, + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiSpacer, +} from '../../../../src/components'; export default () => ( -
- } - title="Logs" - display="plain" - description="The Elastic Stack is the most popular open source logging platform." - /> +
+ + + + } + onClick={() => {}} + title="Logs" + display="plain" + description="The Elastic Stack is the most popular open source logging platform." + /> + + + } + title="Logs" + display="plain" + description="The Elastic Stack is the most popular open source logging platform." + onClick={() => {}} + /> + + + } + 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={() => {}} + /> + +
); diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index 5611cd784e3..3732b58768a 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -387,7 +387,13 @@ export const CardExample = {

If you need a card with no borders or shadows pass{' '} - {'display="plain"'}. + {'display="plain"'}. This might be + when you need to make use of the content props and layout options{' '} + EuiCard provides but do not need a border. Adding + an interaction to the card will provide the clickable styling on + hover. Note that plain display is not available + for + Selectable cards.

), diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index df262b382ae..a857e32bc3f 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -161,6 +161,10 @@ flex-grow: 0; /* 1 */ margin-top: $amount; } + + &.euiCard--hasChildren .euiCard__description { + margin-bottom: $amount; + } } } @@ -226,7 +230,3 @@ margin-right: $euiSize; } } - -.euiCard--hasChildren .euiCard__description { - margin-bottom: $euiCardSpacing; -} From a785faee4d77869e9929e007c52944f09fc9a630 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 23 Jun 2020 14:29:11 -0700 Subject: [PATCH 04/10] pr feedback --- src-docs/src/views/card/card_example.js | 3 ++- src/components/card/_card.scss | 26 ++++++++++++------------- src/components/card/card.tsx | 7 ++++--- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index 3732b58768a..b75d1f4a81d 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -401,8 +401,9 @@ export const CardExample = { demo: , snippet: ``, +/>`, }, ], }; diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index a857e32bc3f..f5d83c5e11e 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -106,13 +106,13 @@ // 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; +@each $modifier, $paddingAmount in $euiPanelPaddingModifiers { + .euiCard--#{$modifier} { + padding: $paddingAmount; &.euiCard--isSelectable { position: relative; - padding-bottom: $amount + $euiCardBottomNodeHeight; + padding-bottom: $paddingAmount + $euiCardBottomNodeHeight; } .euiCard__top { @@ -121,15 +121,15 @@ min-height: 1px; /* 2 */ .euiCard__icon { - margin-top: $amount / 2; + margin-top: $paddingAmount / 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 + 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; @@ -146,24 +146,24 @@ 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 + transform: translate(-50%, calc(-50% + #{$paddingAmount * -1})); // sass-lint:disable-line no-duplicate-properties } } } .euiCard__content { .euiCard__description { - margin-top: $amount / 2; + margin-top: $paddingAmount / 2; } } .euiCard__footer:not(:empty) { flex-grow: 0; /* 1 */ - margin-top: $amount; + margin-top: $paddingAmount; } &.euiCard--hasChildren .euiCard__description { - margin-bottom: $amount; + margin-bottom: $paddingAmount; } } } diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index 9a30c20df16..451c46b28dc 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -66,7 +66,7 @@ const displayToClassNameMap: { [display in CardDisplay]: string } = { export const DISPLAYS = keysOf(displayToClassNameMap); -export type CardPaddingSize = 's' | 'm' | 'l'; +export type CardPaddingSize = 'none' | 's' | 'm' | 'l'; type EuiCardProps = Omit & { /** @@ -157,12 +157,13 @@ type EuiCardProps = Omit & { */ display?: CardDisplay; /** - * Padding applied to the card + * Padding applied around the content of the card */ paddingSize?: CardPaddingSize; }; const paddingSizeToClassNameMap = { + none: null, s: 'euiCard--paddingSmall', m: 'euiCard--paddingMedium', l: 'euiCard--paddingLarge', @@ -224,7 +225,7 @@ export const EuiCard: FunctionComponent = ({ const classes = classNames( 'euiCard', - paddingSize ? paddingSizeToClassNameMap[paddingSize] : null, + paddingSizeToClassNameMap[paddingSize], displayToClassNameMap[display], textAlignToClassNameMap[textAlign], layoutToClassNameMap[layout], From 714f9e30ce442dcf07fa609381d7a8e56c3d056d Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 23 Jun 2020 15:00:04 -0700 Subject: [PATCH 05/10] make card with image work when paddingSize is none --- src/components/card/_card.scss | 2 +- src/components/card/card.tsx | 2 +- src/global_styling/variables/_card.scss | 6 ++++++ src/global_styling/variables/_index.scss | 1 + 4 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 src/global_styling/variables/_card.scss diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index f5d83c5e11e..bb49fdd8d55 100644 --- 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 index 065fb0754cc..2c1e714d2c7 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -163,7 +163,7 @@ export type EuiCardProps = Omit & { }; 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 new file mode 100644 index 00000000000..b1bd1b43b61 --- /dev/null +++ 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 index 61d74dfcec3..e2205066ee7 100644 --- 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'; From 64a85fd16f707bafee19fae84cecfa6a0ae3f00c Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 24 Jun 2020 14:10:40 -0700 Subject: [PATCH 06/10] removed margins from loop --- src-docs/src/views/card/card_example.js | 12 ++++---- src/components/card/_card.scss | 35 ++++++++++++------------ src/components/card/_variables.scss | 7 +++++ src/global_styling/variables/_card.scss | 6 ---- src/global_styling/variables/_index.scss | 1 - 5 files changed, 30 insertions(+), 31 deletions(-) delete mode 100644 src/global_styling/variables/_card.scss diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index b75d1f4a81d..ba314962d62 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -387,13 +387,11 @@ export const CardExample = {

If you need a card with no borders or shadows pass{' '} - {'display="plain"'}. This might be - when you need to make use of the content props and layout options{' '} - EuiCard provides but do not need a border. Adding - an interaction to the card will provide the clickable styling on - hover. Note that plain display is not available - for - Selectable cards. + {'display="plain"'}. This is a good + option to avoid nested panels. Adding an interaction to the card + will provide the clickable styling on hover. Note that{' '} + plain display is not available for + selectable cards.

), diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index bb49fdd8d55..0718381473e 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -120,10 +120,6 @@ position: relative; min-height: 1px; /* 2 */ - .euiCard__icon { - margin-top: $paddingAmount / 2; - } - .euiCard__image { position: relative; width: calc(100% + (#{$paddingAmount} * 2)); @@ -151,23 +147,24 @@ } } - .euiCard__content { - .euiCard__description { - margin-top: $paddingAmount / 2; - } - } - - .euiCard__footer:not(:empty) { - flex-grow: 0; /* 1 */ - margin-top: $paddingAmount; - } + } +} - &.euiCard--hasChildren .euiCard__description { - margin-bottom: $paddingAmount; - } +.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; @@ -193,6 +190,10 @@ .euiCard__content { flex-grow: 1; /* 1 */ + .euiCard__description { + margin-top: $euiCardSpacing / 2; + } + .euiCard__titleAnchor, .euiCard__titleButton { font: inherit; diff --git a/src/components/card/_variables.scss b/src/components/card/_variables.scss index 9f19e73ce3d..e447e9d046c 100644 --- a/src/components/card/_variables.scss +++ b/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; \ No newline at end of file diff --git a/src/global_styling/variables/_card.scss b/src/global_styling/variables/_card.scss deleted file mode 100644 index b1bd1b43b61..00000000000 --- a/src/global_styling/variables/_card.scss +++ /dev/null @@ -1,6 +0,0 @@ -$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 index e2205066ee7..61d74dfcec3 100644 --- a/src/global_styling/variables/_index.scss +++ b/src/global_styling/variables/_index.scss @@ -20,5 +20,4 @@ @import 'form'; @import 'header'; @import 'panel'; -@import 'card'; @import 'tool_tip'; From 12d38334541ab7dccbb1c478da2d124123f1e469 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 24 Jun 2020 14:25:42 -0700 Subject: [PATCH 07/10] add one more line to docs --- src-docs/src/views/card/card_example.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index ba314962d62..611106e9789 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -393,6 +393,10 @@ export const CardExample = { plain display is not available for selectable cards.

+

+ For non-interactive cards, reduce or eliminate the padding as needed + to suit your layout. +

), props: { EuiCard }, From 19cae153592ea5d32d34dde4af80c7f6afe63900 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Fri, 26 Jun 2020 12:53:21 -0700 Subject: [PATCH 08/10] broken test --- src-docs/src/views/card/card_example.js | 2 +- .../card/__snapshots__/card.test.tsx.snap | 100 ++++++++++++++++++ src/components/card/_card.scss | 45 +++++--- src/components/card/card.test.tsx | 18 +++- src/components/card/card.tsx | 24 +++-- 5 files changed, 159 insertions(+), 30 deletions(-) diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index 611106e9789..f89f23679bf 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -395,7 +395,7 @@ export const CardExample = {

For non-interactive cards, reduce or eliminate the padding as needed - to suit your layout. + to suit your layout with the prop paddingSize.

), diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap index b3c272ca201..e08ad399874 100644 --- a/src/components/card/__snapshots__/card.test.tsx.snap +++ b/src/components/card/__snapshots__/card.test.tsx.snap @@ -244,6 +244,106 @@ exports[`EuiCard props icon 1`] = `
`; +exports[`EuiCard props paddingSize l is applied 1`] = ` +
+
+ + Card title + +
+

+ Card description +

+
+
+
+`; + +exports[`EuiCard props paddingSize m is applied 1`] = ` +
+
+ + Card title + +
+

+ Card description +

+
+
+
+`; + +exports[`EuiCard props paddingSize none is applied 1`] = ` +
+
+ + Card title + +
+

+ Card description +

+
+
+
+`; + +exports[`EuiCard props paddingSize s is applied 1`] = ` +
+
+ + Card title + +
+

+ Card description +

+
+
+
+`; + exports[`EuiCard props selectable 1`] = `
{ expect(component).toMatchSnapshot(); }); + + describe('paddingSize', () => { + SIZES.forEach(size => { + test(`${size} is applied`, () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); }); }); diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index 2c1e714d2c7..2b522e1ad13 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -66,7 +66,7 @@ const displayToClassNameMap: { [display in CardDisplay]: string } = { export const DISPLAYS = keysOf(displayToClassNameMap); -export type CardPaddingSize = 'none' | 's' | 'm' | 'l'; +type CardPaddingSize = 'none' | 's' | 'm' | 'l'; export type EuiCardProps = Omit & { /** @@ -114,8 +114,8 @@ export type EuiCardProps = Omit & { * Use only if you want to forego a button in the footer and make the whole card clickable */ onClick?: - | React.MouseEventHandler - | React.MouseEventHandler; + | React.MouseEventHandler + | React.MouseEventHandler; isDisabled?: boolean; href?: string; target?: string; @@ -163,11 +163,13 @@ export type EuiCardProps = Omit & { }; const paddingSizeToClassNameMap = { - none: 'euiCard--paddingNone', - s: 'euiCard--paddingSmall', - m: 'euiCard--paddingMedium', - l: 'euiCard--paddingLarge', -}; + [paddingSize in CardPaddingSize]: string, +} = { + none: 'euiCard--paddingNone', + s: 'euiCard--paddingSmall', + m: 'euiCard--paddingMedium', + l: 'euiCard--paddingLarge', + }; export const SIZES = Object.keys(paddingSizeToClassNameMap); @@ -218,9 +220,9 @@ export const EuiCard: FunctionComponent = ({ const selectableColorClass = selectable ? `euiCard--isSelectable--${euiCardSelectableColor( - selectable.color, - selectable.isSelected - )}` + selectable.color, + selectable.isSelected + )}` : undefined; const classes = classNames( From 856383f81b1bafaac0923751cdec227555f9c962 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Fri, 26 Jun 2020 14:02:29 -0600 Subject: [PATCH 09/10] sizes ts --- src/components/card/card.tsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index 2b522e1ad13..7a680d30741 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -114,8 +114,8 @@ export type EuiCardProps = Omit & { * Use only if you want to forego a button in the footer and make the whole card clickable */ onClick?: - | React.MouseEventHandler - | React.MouseEventHandler; + | React.MouseEventHandler + | React.MouseEventHandler; isDisabled?: boolean; href?: string; target?: string; @@ -162,16 +162,16 @@ export type EuiCardProps = Omit & { paddingSize?: CardPaddingSize; }; -const paddingSizeToClassNameMap = { - [paddingSize in CardPaddingSize]: string, +const paddingSizeToClassNameMap: { + [paddingSize in CardPaddingSize]: string } = { - none: 'euiCard--paddingNone', - s: 'euiCard--paddingSmall', - m: 'euiCard--paddingMedium', - l: 'euiCard--paddingLarge', - }; + none: 'euiCard--paddingNone', + s: 'euiCard--paddingSmall', + m: 'euiCard--paddingMedium', + l: 'euiCard--paddingLarge', +}; -export const SIZES = Object.keys(paddingSizeToClassNameMap); +export const SIZES = keysOf(paddingSizeToClassNameMap); export const EuiCard: FunctionComponent = ({ className, @@ -220,9 +220,9 @@ export const EuiCard: FunctionComponent = ({ const selectableColorClass = selectable ? `euiCard--isSelectable--${euiCardSelectableColor( - selectable.color, - selectable.isSelected - )}` + selectable.color, + selectable.isSelected + )}` : undefined; const classes = classNames( From 7e24e9e4160b3e11ad885af72c3198483fc29a26 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 2 Jul 2020 13:11:20 -0700 Subject: [PATCH 10/10] cl again --- CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 61536404f78..a0fb458e8eb 100644 --- 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) @@ -32,7 +32,6 @@ No public interface changes since `26.3.0`. - Optimized in-memory datagrid mount performance ([#3628](https://github.com/elastic/eui/pull/3628)) - 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)