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** 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
); diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap index b8ebee521a8..50aac9fc20a 100644 --- a/src/components/card/__snapshots__/card.test.js.snap +++ b/src/components/card/__snapshots__/card.test.js.snap @@ -3,13 +3,13 @@ exports[`EuiCard is rendered 1`] = `
-
-
-
-
+
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index f60cb3e2d5d..0ecbbf07d76 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -1,28 +1,46 @@ @import "../panel/variables"; +@import "../panel/mixins"; $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium"); +// Start with a base of EuiPanel styles +@include euiPanel($selector: 'euiCard'); + +// EuiCard specific .euiCard { display: flex; flex-direction: column; overflow: hidden; + padding: $euiCardSpacing; + + .euiCard__top, + .euiCard__content, + .euiCard__footer { + 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 { @@ -36,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; @@ -74,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 5d24fe0dd54..08f0547b089 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,20 @@ export const EuiCard = ({ ); } + const OuterElement = onClick ? 'button' : 'div'; + return ( - -
+ {imageNode} {iconNode} -
+ -
+ {title} @@ -69,22 +69,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..4cb7dc41d8d --- /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 to @mixin euiPanel()."; + } + @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; } }