From efe2fde3a7446a050cdc34056ea8b3922b5437df Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 15 Feb 2018 14:18:12 -0500 Subject: [PATCH 1/7] Fixing panel doc --- src-docs/src/views/panel/panel.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/panel/panel.js b/src-docs/src/views/panel/panel.js index 3b69f47240c..0d56a37a86a 100644 --- a/src-docs/src/views/panel/panel.js +++ b/src-docs/src/views/panel/panel.js @@ -9,31 +9,31 @@ import { export default () => (
- sizePadding="none" + paddingSize="none" - sizePadding="s" + paddingSize="s" - sizePadding="m" + paddingSize="m" - sizePadding="l" + paddingSize="l" - sizePadding="l", hasShadow + paddingSize="l", hasShadow
); From d9805607fccfc07bb958e00936f8134163cad00d Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 15 Feb 2018 14:19:55 -0500 Subject: [PATCH 2/7] Comitting for posterity MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Having EuiPanel > EuiCard doesn’t work because it still needs `display: flex` on EuiPanel but the order in which the SASS files are loaded doesn’t allow for EuiCard styles to override EuiPanel. --- src-docs/src/views/card/card.js | 2 +- .../card/__snapshots__/card.test.js.snap | 42 ++++++++++--------- src/components/card/_card.scss | 3 ++ src/components/card/card.js | 41 ++++++++++-------- 4 files changed, 50 insertions(+), 38 deletions(-) diff --git a/src-docs/src/views/card/card.js b/src-docs/src/views/card/card.js index eadc9f474df..de38c918bbb 100644 --- a/src-docs/src/views/card/card.js +++ b/src-docs/src/views/card/card.js @@ -15,7 +15,7 @@ const cardNodes = icons.map(function (item, index) { } title={`Elastic ${item}`} - description="Example of a card's description. Stick to one or two sentences." + description="Example of a card." onClick={() => window.alert('Card clicked')} /> diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap index b8ebee521a8..20e0224cc44 100644 --- a/src/components/card/__snapshots__/card.test.js.snap +++ b/src/components/card/__snapshots__/card.test.js.snap @@ -2,31 +2,35 @@ exports[`EuiCard is rendered 1`] = `
-
- - Card title -
+
-

- Card description -

+ + Card title + +
+

+ Card description +

+
+
-
`; diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index f60cb3e2d5d..69a257fac2b 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -6,6 +6,7 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium"); display: flex; flex-direction: column; overflow: hidden; + padding: $euiCardSpacing; &.euiCard--leftAligned, &.euiCard--isClickable.euiCard--leftAligned { @@ -23,6 +24,8 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium"); } &.euiCard--isClickable { + display: flex; // override panel + &:focus, &:hover { .euiCard__title { diff --git a/src/components/card/card.js b/src/components/card/card.js index 5d24fe0dd54..1c651b3cff2 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -30,7 +30,6 @@ export const EuiCard = ({ textAlignToClassNameMap[textAlign], { 'euiCard--isClickable': onClick, - 'euiCard--textAlign': textAlign, }, className, ); @@ -50,30 +49,36 @@ export const EuiCard = ({ ); } + const InnerElement = onClick ? 'span' : 'div'; + return ( -
- {imageNode} - {iconNode} -
+ + + {imageNode} + {iconNode} + -
- - {title} - + + + {title} + - -

{description}

- -
+ +

{description}

+ + -
- {footer} -
+ + {footer} + + ); }; From bf602bf3151c229e47617f1a01e90573cf4fd7c4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 15 Feb 2018 14:21:03 -0500 Subject: [PATCH 3/7] Revert "Comitting for posterity" This reverts commit d9805607fccfc07bb958e00936f8134163cad00d. --- src-docs/src/views/card/card.js | 2 +- .../card/__snapshots__/card.test.js.snap | 42 +++++++++---------- src/components/card/_card.scss | 3 -- src/components/card/card.js | 41 ++++++++---------- 4 files changed, 38 insertions(+), 50 deletions(-) diff --git a/src-docs/src/views/card/card.js b/src-docs/src/views/card/card.js index de38c918bbb..eadc9f474df 100644 --- a/src-docs/src/views/card/card.js +++ b/src-docs/src/views/card/card.js @@ -15,7 +15,7 @@ const cardNodes = icons.map(function (item, index) { } title={`Elastic ${item}`} - description="Example of a card." + description="Example of a card's description. Stick to one or two sentences." onClick={() => window.alert('Card clicked')} /> diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap index 20e0224cc44..b8ebee521a8 100644 --- a/src/components/card/__snapshots__/card.test.js.snap +++ b/src/components/card/__snapshots__/card.test.js.snap @@ -2,35 +2,31 @@ exports[`EuiCard is rendered 1`] = `
+
+ + Card title +
-
- - Card title - -
-

- Card description -

-
+

+ Card description +

-
+
`; diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 69a257fac2b..f60cb3e2d5d 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -6,7 +6,6 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium"); display: flex; flex-direction: column; overflow: hidden; - padding: $euiCardSpacing; &.euiCard--leftAligned, &.euiCard--isClickable.euiCard--leftAligned { @@ -24,8 +23,6 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium"); } &.euiCard--isClickable { - display: flex; // override panel - &:focus, &:hover { .euiCard__title { diff --git a/src/components/card/card.js b/src/components/card/card.js index 1c651b3cff2..5d24fe0dd54 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -30,6 +30,7 @@ export const EuiCard = ({ textAlignToClassNameMap[textAlign], { 'euiCard--isClickable': onClick, + 'euiCard--textAlign': textAlign, }, className, ); @@ -49,36 +50,30 @@ export const EuiCard = ({ ); } - const InnerElement = onClick ? 'span' : 'div'; - return ( - - - {imageNode} - {iconNode} - +
+ {imageNode} + {iconNode} +
- - - {title} - +
+ + {title} + - -

{description}

- - + +

{description}

+ +
- - {footer} - - +
+ {footer} +
); }; From 9c9cffc5e2f4d9cafaaadc769700b8a5e7217734 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 15 Feb 2018 15:50:23 -0500 Subject: [PATCH 4/7] Fixing EuiCard inheritance of EuiPanel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit EuiPanel now has a mixin that can be used by any component. EuiCard uses this mixin to inherit the styles of EuiPanel but doesn’t have specificity/order issues. --- .../card/__snapshots__/card.test.js.snap | 2 +- src/components/card/_card.scss | 16 +++++++ src/components/card/card.js | 39 ++++++++++----- src/components/panel/_index.scss | 3 +- src/components/panel/_mixins.scss | 48 +++++++++++++++++++ src/components/panel/_panel.scss | 42 +++------------- 6 files changed, 101 insertions(+), 49 deletions(-) create mode 100644 src/components/panel/_mixins.scss diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap index b8ebee521a8..8fcc7ac1935 100644 --- a/src/components/card/__snapshots__/card.test.js.snap +++ b/src/components/card/__snapshots__/card.test.js.snap @@ -3,7 +3,7 @@ exports[`EuiCard is rendered 1`] = `
* { + display: block; + width: 100%; + } &.euiCard--leftAligned, &.euiCard--isClickable.euiCard--leftAligned { text-align: left; + align-items: flex-start; } &.euiCard--centerAligned, &.euiCard--isClickable.euiCard--centerAligned { text-align: center; + align-items: center; } &.euiCard--rightAligned, &.euiCard--isClickable.euiCard--rightAligned { text-align: right; + align-items: flex-end; } &.euiCard--isClickable { + display: flex; + &:focus, &:hover { .euiCard__title { diff --git a/src/components/card/card.js b/src/components/card/card.js index 5d24fe0dd54..fb4ebe3d891 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { EuiPanel } from '../panel'; import { EuiText } from '../text'; import { EuiTitle } from '../title'; @@ -30,7 +29,6 @@ export const EuiCard = ({ textAlignToClassNameMap[textAlign], { 'euiCard--isClickable': onClick, - 'euiCard--textAlign': textAlign, }, className, ); @@ -50,18 +48,21 @@ export const EuiCard = ({ ); } + const OuterElement = onClick ? 'button' : 'div'; + const InnerElement = onClick ? 'span' : 'div'; + return ( - -
+ {imageNode} {iconNode} -
+ -
+ {title} @@ -69,22 +70,38 @@ export const EuiCard = ({

{description}

 -
+ -
+ {footer} -
- + + ); }; EuiCard.propTypes = { className: PropTypes.string, - description: PropTypes.string.isRequired, title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + + /** + * Requires a node + */ icon: PropTypes.node, + + /** + * Accepts a url in string form + */ image: PropTypes.string, + + /** + * Accepts any combination of elements + */ footer: PropTypes.node, + + /** + * Use only if you want to forego a button in the footer and make the whole card clickable + */ onClick: PropTypes.func, textAlign: PropTypes.oneOf(ALIGNMENTS), }; diff --git a/src/components/panel/_index.scss b/src/components/panel/_index.scss index 5479b062422..4721672682b 100644 --- a/src/components/panel/_index.scss +++ b/src/components/panel/_index.scss @@ -1,2 +1,3 @@ @import 'variables'; -@import 'panel'; \ No newline at end of file +@import 'mixins'; +@import 'panel'; diff --git a/src/components/panel/_mixins.scss b/src/components/panel/_mixins.scss new file mode 100644 index 00000000000..08712f7da5e --- /dev/null +++ b/src/components/panel/_mixins.scss @@ -0,0 +1,48 @@ +/** + * Mixin for use in: + * - EuiCard +*/ +@mixin euiPanel($selector){ + @if variable-exists(selector) == false { + @error "A $selector must be provided."; + } + @else { + .#{$selector} { + + @include euiBottomShadowSmall; + background-color: $euiColorEmptyShade; + border: $euiBorderThin; + border-radius: $euiBorderRadius; + flex-grow: 1; + &.#{$selector}--flexGrowZero { + flex-grow: 0; + } + + &.#{$selector}--isClickable { + // in case of button wrapper which inherently is inline-block and no width + display: block; + width: 100%; + text-align: left; + + // transition the shadow + @include euiSlightShadow; + transition: all $euiAnimSpeedFast $euiAnimSlightResistance; + + &:hover, + &:focus { + @include euiSlightShadowHover; + transform: translateY(-2px); + cursor: pointer; + } + } + + &.#{$selector}--shadow { + &, + &:hover, + &:focus { + @include euiBottomShadow; + } + } + } + } +} diff --git a/src/components/panel/_panel.scss b/src/components/panel/_panel.scss index 01c037d00b9..f895d2b354d 100644 --- a/src/components/panel/_panel.scss +++ b/src/components/panel/_panel.scss @@ -1,39 +1,9 @@ -.euiPanel { - @include euiBottomShadowSmall; - background-color: $euiColorEmptyShade; - border: $euiBorderThin; - border-radius: $euiBorderRadius; - flex-grow: 1; +// Export basic class & modifiers +@include euiPanel($selector: 'euiPanel'); - @each $modifier, $amount in $euiPanelPaddingModifiers { - &.euiPanel--#{$modifier} { - padding: $amount; - } - } - - &.euiPanel--shadow { - @include euiBottomShadow; - } - - &.euiPanel--flexGrowZero { - flex-grow: 0; - } - - &.euiPanel--isClickable { - // in case of button wrapper which inherently is inline-block and no width - display: block; - width: 100%; - text-align: left; - - // transition the shadow - @include euiSlightShadow; - transition: all $euiAnimSpeedFast $euiAnimSlightResistance; - - &:hover, - &:focus { - @include euiSlightShadowHover; - transform: translateY(-2px); - cursor: pointer; - } +// Specific +@each $modifier, $amount in $euiPanelPaddingModifiers { + .euiPanel.euiPanel--#{$modifier} { + padding: $amount; } } From ab03ad09b17c8022a44329c81cc115b7e5e36b41 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 15 Feb 2018 15:54:11 -0500 Subject: [PATCH 5/7] changelog --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e4a5a30c25..24e40c698d5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Fix appearance of checked checkeboxes and radios in IE ([#407](https://github.com/elastic/eui/pull/407)) - Fix disabled vs enabled appearance of checked checkeboxes and radios ([#407](https://github.com/elastic/eui/pull/407)) - Fix disabled & checked state of switches ([#407](https://github.com/elastic/eui/pull/407)) +- Fix EuiCard content alignment when content is short. ([#415](https://github.com/elastic/eui/pull/415)) # [`0.0.21`](https://github.com/elastic/eui/tree/v0.0.21) @@ -21,7 +22,7 @@ - Added importAction and exportAction icons ([#394](https://github.com/elastic/eui/pull/394)) - Added `EuiCard` for UI patterns that need an icon/image, title and description with some sort of action. ([#380](https://github.com/elastic/eui/pull/380)) - Add TypeScript definitions for the `` component. ([#403](https://github.com/elastic/eui/pull/403)) -- Added `SearchBar` component - introduces a simple yet rich query language to search for objects + search box and filter controls to construct/manipulate it. ([#379](https://github.com/elastic/eui/pull/379)) +- Added `SearchBar` component - introduces a simple yet rich query language to search for objects + search box and filter controls to construct/manipulate it. ([#379](https://github.com/elastic/eui/pull/379)) **Bug fixes** From 11e4690b577b0e464577c715d57a9a0c9124b3bd Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 15 Feb 2018 15:56:11 -0500 Subject: [PATCH 6/7] Better error message --- src/components/panel/_mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/panel/_mixins.scss b/src/components/panel/_mixins.scss index 08712f7da5e..4cb7dc41d8d 100644 --- a/src/components/panel/_mixins.scss +++ b/src/components/panel/_mixins.scss @@ -4,7 +4,7 @@ */ @mixin euiPanel($selector){ @if variable-exists(selector) == false { - @error "A $selector must be provided."; + @error "A $selector must be provided to @mixin euiPanel()."; } @else { .#{$selector} { From ecdcfd81f7954ddc70c43c7b54e8e560f6b86713 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 16 Feb 2018 11:33:59 -0500 Subject: [PATCH 7/7] Address PR comments Spans always and no universal selector --- .../card/__snapshots__/card.test.js.snap | 8 ++--- src/components/card/_card.scss | 30 ++++++++++--------- src/components/card/card.js | 13 ++++---- 3 files changed, 26 insertions(+), 25 deletions(-) diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap index 8fcc7ac1935..50aac9fc20a 100644 --- a/src/components/card/__snapshots__/card.test.js.snap +++ b/src/components/card/__snapshots__/card.test.js.snap @@ -6,10 +6,10 @@ 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 6f05d9192c1..0ecbbf07d76 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -13,7 +13,9 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium"); overflow: hidden; padding: $euiCardSpacing; - > * { + .euiCard__top, + .euiCard__content, + .euiCard__footer { display: block; width: 100%; } @@ -52,19 +54,6 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium"); * 1. Footer is always at the bottom. */ -.euiCard__content { - flex-grow: 1; /* 1 */ - - .euiCard__title { - display: block; - margin-top: $euiCardSpacing; - } - - .euiCard__description { - margin-top: $euiCardSpacing/2; - } -} - .euiCard__top { flex-grow: 0; /* 1 */ position: relative; @@ -90,6 +79,19 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium"); } } +.euiCard__content { + flex-grow: 1; /* 1 */ + + .euiCard__title { + display: block; + margin-top: $euiCardSpacing; + } + + .euiCard__description { + margin-top: $euiCardSpacing/2; + } +} + .euiCard__footer:not(:empty) { flex-grow: 0; /* 1 */ margin-top: $euiCardSpacing; diff --git a/src/components/card/card.js b/src/components/card/card.js index fb4ebe3d891..08f0547b089 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -49,7 +49,6 @@ export const EuiCard = ({ } const OuterElement = onClick ? 'button' : 'div'; - const InnerElement = onClick ? 'span' : 'div'; return ( - + {imageNode} {iconNode} - + - + {title} @@ -70,11 +69,11 @@ export const EuiCard = ({

{description}

 - + - + {footer} - + ); };