From a7409a544278103da8ac759513f83323a12d5c9f Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 25 Apr 2018 14:51:50 -0700 Subject: [PATCH 1/3] card theme parity --- .../card/__snapshots__/card.test.js.snap | 3 --- src/components/card/_card.scss | 12 +++++++++--- src/components/card/card.js | 16 ++++++++++++---- 3 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap index 8448479109d..1746900d97e 100644 --- a/src/components/card/__snapshots__/card.test.js.snap +++ b/src/components/card/__snapshots__/card.test.js.snap @@ -126,9 +126,6 @@ exports[`EuiCard is rendered 1`] = ` class="euiCard euiCard--centerAligned testClass1 testClass2" data-test-subj="test subject string" > - diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 6c6cbd0e16b..bbf64af9dd0 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -2,6 +2,7 @@ @import "../panel/mixins"; $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium"); +$euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. // Start with a base of EuiPanel styles @include euiPanel($selector: 'euiCard'); @@ -52,6 +53,7 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium"); /** * 1. Footer is always at the bottom. + * 2. Footer is always at the bottom. */ .euiCard__top { @@ -79,14 +81,18 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium"); } } +// If an icon or image exists, add some space +.euiCard__top + .euiCard__content { + margin-top: $euiSize; +} + .euiCard__content { flex-grow: 1; /* 1 */ .euiCard__title { display: block; - margin-top: $euiCardSpacing; - @include euiTitle($euiFontSizeM); - font-weight: $euiFontWeightRegular; + @include euiTitle($euiCardTitleSize); + font-weight: $euiFontWeightMedium; } .euiCard__description { diff --git a/src/components/card/card.js b/src/components/card/card.js index a6ae8518a08..8bfe6b9c895 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -57,6 +57,16 @@ export const EuiCard = ({ OuterElement = 'button'; } + let optionalCardTop; + if (image || icon) { + optionalCardTop = ( + + {imageNode} + {iconNode} + + ); + } + return ( - - {imageNode} - {iconNode} - + + {optionalCardTop} From 1fd0d1b9f0ea93d01fc9a6dde6ec73efaf34b580 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 25 Apr 2018 14:54:31 -0700 Subject: [PATCH 2/3] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f6f184a712d..6ad2276efa5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ **Bug fixes** - Fixed inherited `line-height` of inputs and buttons ([#702](https://github.com/elastic/eui/pull/702)) +- Fixed card title sizing in K6 theme. ([#704](https://github.com/elastic/eui/pull/704)) ## [`0.0.43`](https://github.com/elastic/eui/tree/v0.0.43) From 00bb5299449fe66b45835ccda5b9122b7eb72408 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 25 Apr 2018 15:02:45 -0700 Subject: [PATCH 3/3] feedback --- src/components/card/_card.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index bbf64af9dd0..678bade623a 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -53,7 +53,6 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. /** * 1. Footer is always at the bottom. - * 2. Footer is always at the bottom. */ .euiCard__top { @@ -83,7 +82,7 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. // If an icon or image exists, add some space .euiCard__top + .euiCard__content { - margin-top: $euiSize; + margin-top: $euiCardSpacing; } .euiCard__content {