From 2d9edaaf75ee38adaaa11e5820dd023d765ae3af Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 30 Nov 2018 11:09:46 -0600 Subject: [PATCH 1/8] adds bottom graphic to card component --- src/components/card/_card.scss | 15 +++++++++ src/components/card/card.js | 61 ++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+) diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 3ca3300eefc..f4b15189327 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -21,6 +21,8 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. flex-direction: column; padding: $euiCardSpacing; min-height: 1px; /* 2 */ + position: relative; + overflow: hidden; // This creates a bunch of sub selectors for the beta badge @include hasBetaBadge($selector: 'euiCard', $spacing: $euiCardSpacing); // sass-lint:disable-line mixins-before-declarations @@ -60,6 +62,10 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. } } } + + &.euiCard--hasBottomGraphic { + padding-bottom: $euiCardSpacing + $euiSizeXXL; + } } .euiCard__top { @@ -144,3 +150,12 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. margin-right: $euiSize; } } + +// Optional decorative graphics +.euiCard__graphicBottom { + position: absolute; + bottom: 0; + left: 0; + height: $euiSizeXXL; + width: 100%; +} diff --git a/src/components/card/card.js b/src/components/card/card.js index dd8316c2ae4..5f96c5ec8d9 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -15,6 +15,14 @@ const textAlignToClassNameMap = { export const ALIGNMENTS = Object.keys(textAlignToClassNameMap); +const graphicColorsToCodes = [ + { color: 'blue', start: '#0079A5', end: '#3185FC', path: 'M3.79856147e-10,22.9906998 C127.450324,22.9906998 150.476037,4 213.348797,4 C276.221558,4 298.768469,12.0470661 700,14.0470661 L700,40 L108.569037,40 L0,40 L3.79856147e-10,22.9906998 Z', pathLight: 'M1.35371469e-08,7.95601173 C127.450324,7.95601173 102.647209,17.9667644 174.198268,17.9667644 C245.749327,17.9667644 298.768469,2.23349117e-13 700,1.42108547e-14 L700,37 C700,38.6568542 358.656854,40 357,40 L108.569037,40 L3,40 C1.34314575,40 -3.74826549e-09,38.6568543 -4.14273948e-09,37 L1.35371469e-08,7.95601173 Z' }, // eslint-disable-line max-len + { color: 'green', start: '#00B3A4', end: '#017F75', path: 'M3.14689825e-06,14.6239758 C26.8316503,16.6239758 59.5180176,25.7863641 146.281974,25.7864412 C233.045931,25.7865184 294.268472,3 700.000003,3 L700.000003,40 L108.56904,40 L3.14689058e-06,40 L3.14689825e-06,14.6239758 Z', pathLight: 'M3.13729941e-06,24.4746094 C127.450326,24.4746094 164.698941,0 236.25,0 C307.801058,0 298.76847,17.4941406 700,17.4941406 L700.000003,40 L108.569039,39.5058594 L3.01365718,39.9862837 C1.35682009,39.9938246 0.00757513054,38.6568059 3.42096185e-05,36.9999688 C1.34947659e-05,36.9954175 3.13729938e-06,36.9908661 3.13729938e-06,36.9863147 L3.13729941e-06,24.4746094 Z' }, // eslint-disable-line max-len + { color: 'purple', start: '#490092', end: '#DD0A73', path: 'M0,7 C85.1894531,9 157.96592,25.9853066 223.281971,25.9853638 C288.598022,25.9854211 306.490234,12.5448566 700,12.5448566 L700,40 L108.569037,40 L0,40 L0,7 Z', pathLight: 'M700,24.4746094 L700,40 L1.76214598e-12,40 L1.12746009e-08,17.4941406 C61.2315307,17.4941406 52.5540432,0 124.105102,0 C195.656161,0 232.549676,24.4746094 700,24.4746094 Z' }, // eslint-disable-line max-len +]; + +export const GRAPHIC_COLORS = graphicColorsToCodes.map(function (colorObj) {return colorObj.color;}); + const layoutToClassNameMap = { vertical: '', horizontal: 'euiCard--horizontal', @@ -54,6 +62,8 @@ export const EuiCard = ({ betaBadgeTooltipContent, betaBadgeTitle, layout, + bottomGraphic, + bottomGraphicColor, ...rest, }) => { const classes = classNames( @@ -64,6 +74,7 @@ export const EuiCard = ({ 'euiCard--isClickable': onClick || href || isClickable, 'euiCard--hasBetaBadge': betaBadgeLabel, 'euiCard--hasIcon': icon, + 'euiCard--hasBottomGraphic': bottomGraphic, }, className, ); @@ -124,6 +135,46 @@ export const EuiCard = ({ ); } + let optionalBottomGraphic; + let graphicStartColor; + let graphicEndColor; + let graphicSVGPath; + let graphicSVGPathLight; + if (bottomGraphic) { + // Set the svg gradient colors + graphicStartColor = graphicColorsToCodes.find(w => w.color === bottomGraphicColor).start; + graphicEndColor = graphicColorsToCodes.find(x => x.color === bottomGraphicColor).end; + graphicSVGPath = graphicColorsToCodes.find(y => y.color === bottomGraphicColor).path; + graphicSVGPathLight = graphicColorsToCodes.find(z => z.color === bottomGraphicColor).pathLight; + + optionalBottomGraphic = ( + + + + + + + + + + + + + + + + + + + ); + } + return ( } + + {optionalBottomGraphic} ); }; @@ -209,10 +262,18 @@ EuiCard.propTypes = { * Optional title will be supplied as tooltip title or title attribute otherwise the label will be used */ betaBadgeTitle: PropTypes.string, + + /** + * Add a decorative bottom graphic to the card + * This should be used sparingly, consult the Kibana design team before use + */ + bottomGraphic: PropTypes.bool, + bottomGraphicColor: PropTypes.oneOf(GRAPHIC_COLORS), }; EuiCard.defaultProps = { textAlign: 'center', layout: 'vertical', titleElement: 'span', + bottomGraphicColor: 'blue', }; From 3437eea359a5a3b7c9dd1e74b07fcce7d106c645 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 30 Nov 2018 12:31:17 -0600 Subject: [PATCH 2/8] dark theme fixes --- src/components/card/card.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/card/card.js b/src/components/card/card.js index 5f96c5ec8d9..afa62ddb31d 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -16,9 +16,9 @@ const textAlignToClassNameMap = { export const ALIGNMENTS = Object.keys(textAlignToClassNameMap); const graphicColorsToCodes = [ - { color: 'blue', start: '#0079A5', end: '#3185FC', path: 'M3.79856147e-10,22.9906998 C127.450324,22.9906998 150.476037,4 213.348797,4 C276.221558,4 298.768469,12.0470661 700,14.0470661 L700,40 L108.569037,40 L0,40 L3.79856147e-10,22.9906998 Z', pathLight: 'M1.35371469e-08,7.95601173 C127.450324,7.95601173 102.647209,17.9667644 174.198268,17.9667644 C245.749327,17.9667644 298.768469,2.23349117e-13 700,1.42108547e-14 L700,37 C700,38.6568542 358.656854,40 357,40 L108.569037,40 L3,40 C1.34314575,40 -3.74826549e-09,38.6568543 -4.14273948e-09,37 L1.35371469e-08,7.95601173 Z' }, // eslint-disable-line max-len - { color: 'green', start: '#00B3A4', end: '#017F75', path: 'M3.14689825e-06,14.6239758 C26.8316503,16.6239758 59.5180176,25.7863641 146.281974,25.7864412 C233.045931,25.7865184 294.268472,3 700.000003,3 L700.000003,40 L108.56904,40 L3.14689058e-06,40 L3.14689825e-06,14.6239758 Z', pathLight: 'M3.13729941e-06,24.4746094 C127.450326,24.4746094 164.698941,0 236.25,0 C307.801058,0 298.76847,17.4941406 700,17.4941406 L700.000003,40 L108.569039,39.5058594 L3.01365718,39.9862837 C1.35682009,39.9938246 0.00757513054,38.6568059 3.42096185e-05,36.9999688 C1.34947659e-05,36.9954175 3.13729938e-06,36.9908661 3.13729938e-06,36.9863147 L3.13729941e-06,24.4746094 Z' }, // eslint-disable-line max-len - { color: 'purple', start: '#490092', end: '#DD0A73', path: 'M0,7 C85.1894531,9 157.96592,25.9853066 223.281971,25.9853638 C288.598022,25.9854211 306.490234,12.5448566 700,12.5448566 L700,40 L108.569037,40 L0,40 L0,7 Z', pathLight: 'M700,24.4746094 L700,40 L1.76214598e-12,40 L1.12746009e-08,17.4941406 C61.2315307,17.4941406 52.5540432,0 124.105102,0 C195.656161,0 232.549676,24.4746094 700,24.4746094 Z' }, // eslint-disable-line max-len + { color: 'blue', start: '#0079A5', end: '#3185FC', path: 'M3.79856147e-10,22.9906998 C127.450324,22.9906998 159.656579,4 213.348797,4 C267.041016,4 288.265625,13.4882812 700,17.0470661 L700,40 L108.569037,40 L0,40 L3.79856147e-10,22.9906998 Z', pathLight: 'M1.35371469e-08,7.95601173 C127.450324,7.95601173 102.647209,17.9667644 174.198268,17.9667644 C245.749327,17.9667644 298.768469,2.23349117e-13 700,1.42108547e-14 L700,37 C700,38.6568542 358.656854,40 357,40 L108.569037,40 L3,40 C1.34314575,40 -3.74826549e-09,38.6568543 -4.14273948e-09,37 L1.35371469e-08,7.95601173 Z' }, // eslint-disable-line max-len + { color: 'green', start: '#017F75', end: '#00B3A4', path: 'M3.14689825e-06,13.6239758 C26.8316503,17.6239758 55.6152344,25 116.542969,25 C177.470703,25 263.972656,4 297.017578,4 C330.0625,4 348.589288,7.23392617 700.000003,9 L700.000003,40 L108.56904,40 L3.14689058e-06,40 L3.14689825e-06,13.6239758 Z', pathLight: 'M3.1372994e-06,24.4746094 C127.450326,24.4746094 108.698941,3 180.25,3 C251.801058,3 298.76847,17.4941406 700,17.4941406 L700.000003,40 L108.569039,39.5058594 L3.01365718,39.9862837 C1.35682009,39.9938246 0.00757513054,38.6568059 3.42096185e-05,36.9999688 C1.34947659e-05,36.9954175 3.13729938e-06,36.9908661 3.13729938e-06,36.9863147 L3.1372994e-06,24.4746094 Z' }, // eslint-disable-line max-len + { color: 'purple', start: '#490092', end: '#DD0A73', path: 'M0,5 C85.1894531,9 157.96592,25.9853066 223.281971,25.9853638 C288.598022,25.9854211 306.490234,12.5448566 700,12.5448566 L700,40 L108.569037,40 L0,40 L0,5 Z', pathLight: 'M700,21.4746094 L700,40 L1.76214598e-12,40 L1.12746648e-08,18.4941406 C9.35694419,18.5359805 41.1418261,21.0181774 102.519531,21.4746094 C163.897236,21.9310414 216.210205,5 260.105102,5 C304,5 339.77443,21.6752984 700,21.4746094 Z' }, // eslint-disable-line max-len ]; export const GRAPHIC_COLORS = graphicColorsToCodes.map(function (colorObj) {return colorObj.color;}); @@ -151,9 +151,9 @@ export const EuiCard = ({ - - - + + + @@ -164,10 +164,9 @@ export const EuiCard = ({ From 8e8017c55a0be95f9d7e80abc2bf4cd20f40ab6f Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 30 Nov 2018 13:26:23 -0600 Subject: [PATCH 3/8] add changelog entry --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 37ad1815de2..dee70a9e776 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `5.3.0`. +- Added `bottomGraphic` prop to `EuiCard` for Kibana home page ([#1338](https://github.com/elastic/eui/pull/1338)) ## [`5.3.0`](https://github.com/elastic/eui/tree/v5.3.0) From 0df8efcf74c02597c95e17b451bda3decb9756dc Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 30 Nov 2018 14:14:51 -0600 Subject: [PATCH 4/8] fix overflow --- src/components/card/_card.scss | 3 ++- src/components/card/card.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index f4b15189327..498c2f18433 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -22,7 +22,6 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. padding: $euiCardSpacing; min-height: 1px; /* 2 */ position: relative; - overflow: hidden; // This creates a bunch of sub selectors for the beta badge @include hasBetaBadge($selector: 'euiCard', $spacing: $euiCardSpacing); // sass-lint:disable-line mixins-before-declarations @@ -158,4 +157,6 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. left: 0; height: $euiSizeXXL; width: 100%; + overflow: hidden; + border-radius: 0 0 $euiBorderRadius $euiBorderRadius; } diff --git a/src/components/card/card.js b/src/components/card/card.js index afa62ddb31d..9bf79ff126f 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -153,7 +153,7 @@ export const EuiCard = ({ - + From ca5068c637857710afedc823fdf85719ecda15aa Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Mon, 3 Dec 2018 10:03:02 -0600 Subject: [PATCH 5/8] move svg to component --- src/components/card/card.js | 47 ++++------------------------- src/components/card/card_bg.js | 55 ++++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 42 deletions(-) create mode 100644 src/components/card/card_bg.js diff --git a/src/components/card/card.js b/src/components/card/card.js index 9bf79ff126f..8e8f4f0e1e0 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -6,6 +6,7 @@ import { getSecureRelForTarget } from '../../services'; import { EuiText } from '../text'; import { EuiTitle } from '../title'; import { EuiBetaBadge } from '../badge/beta_badge'; +import { EuiCardBg } from './card_bg'; const textAlignToClassNameMap = { left: 'euiCard--leftAligned', @@ -15,14 +16,6 @@ const textAlignToClassNameMap = { export const ALIGNMENTS = Object.keys(textAlignToClassNameMap); -const graphicColorsToCodes = [ - { color: 'blue', start: '#0079A5', end: '#3185FC', path: 'M3.79856147e-10,22.9906998 C127.450324,22.9906998 159.656579,4 213.348797,4 C267.041016,4 288.265625,13.4882812 700,17.0470661 L700,40 L108.569037,40 L0,40 L3.79856147e-10,22.9906998 Z', pathLight: 'M1.35371469e-08,7.95601173 C127.450324,7.95601173 102.647209,17.9667644 174.198268,17.9667644 C245.749327,17.9667644 298.768469,2.23349117e-13 700,1.42108547e-14 L700,37 C700,38.6568542 358.656854,40 357,40 L108.569037,40 L3,40 C1.34314575,40 -3.74826549e-09,38.6568543 -4.14273948e-09,37 L1.35371469e-08,7.95601173 Z' }, // eslint-disable-line max-len - { color: 'green', start: '#017F75', end: '#00B3A4', path: 'M3.14689825e-06,13.6239758 C26.8316503,17.6239758 55.6152344,25 116.542969,25 C177.470703,25 263.972656,4 297.017578,4 C330.0625,4 348.589288,7.23392617 700.000003,9 L700.000003,40 L108.56904,40 L3.14689058e-06,40 L3.14689825e-06,13.6239758 Z', pathLight: 'M3.1372994e-06,24.4746094 C127.450326,24.4746094 108.698941,3 180.25,3 C251.801058,3 298.76847,17.4941406 700,17.4941406 L700.000003,40 L108.569039,39.5058594 L3.01365718,39.9862837 C1.35682009,39.9938246 0.00757513054,38.6568059 3.42096185e-05,36.9999688 C1.34947659e-05,36.9954175 3.13729938e-06,36.9908661 3.13729938e-06,36.9863147 L3.1372994e-06,24.4746094 Z' }, // eslint-disable-line max-len - { color: 'purple', start: '#490092', end: '#DD0A73', path: 'M0,5 C85.1894531,9 157.96592,25.9853066 223.281971,25.9853638 C288.598022,25.9854211 306.490234,12.5448566 700,12.5448566 L700,40 L108.569037,40 L0,40 L0,5 Z', pathLight: 'M700,21.4746094 L700,40 L1.76214598e-12,40 L1.12746648e-08,18.4941406 C9.35694419,18.5359805 41.1418261,21.0181774 102.519531,21.4746094 C163.897236,21.9310414 216.210205,5 260.105102,5 C304,5 339.77443,21.6752984 700,21.4746094 Z' }, // eslint-disable-line max-len -]; - -export const GRAPHIC_COLORS = graphicColorsToCodes.map(function (colorObj) {return colorObj.color;}); - const layoutToClassNameMap = { vertical: '', horizontal: 'euiCard--horizontal', @@ -136,40 +129,10 @@ export const EuiCard = ({ } let optionalBottomGraphic; - let graphicStartColor; - let graphicEndColor; - let graphicSVGPath; - let graphicSVGPathLight; if (bottomGraphic) { - // Set the svg gradient colors - graphicStartColor = graphicColorsToCodes.find(w => w.color === bottomGraphicColor).start; - graphicEndColor = graphicColorsToCodes.find(x => x.color === bottomGraphicColor).end; - graphicSVGPath = graphicColorsToCodes.find(y => y.color === bottomGraphicColor).path; - graphicSVGPathLight = graphicColorsToCodes.find(z => z.color === bottomGraphicColor).pathLight; - optionalBottomGraphic = ( - - - - - - - - - - - - - - - - + ); } @@ -263,11 +226,11 @@ EuiCard.propTypes = { betaBadgeTitle: PropTypes.string, /** - * Add a decorative bottom graphic to the card - * This should be used sparingly, consult the Kibana design team before use + * Add a decorative bottom graphic to the card. + * This should be used sparingly, consult the Kibana Design team before use. */ bottomGraphic: PropTypes.bool, - bottomGraphicColor: PropTypes.oneOf(GRAPHIC_COLORS), + bottomGraphicColor: PropTypes.string, }; EuiCard.defaultProps = { diff --git a/src/components/card/card_bg.js b/src/components/card/card_bg.js new file mode 100644 index 00000000000..3bd20569e6c --- /dev/null +++ b/src/components/card/card_bg.js @@ -0,0 +1,55 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const graphicColorsToCodes = [ + { color: 'blue', start: '#0079A5', end: '#3185FC', path: 'M3.79856147e-10,22.9906998 C127.450324,22.9906998 159.656579,4 213.348797,4 C267.041016,4 288.265625,13.4882812 700,17.0470661 L700,40 L108.569037,40 L0,40 L3.79856147e-10,22.9906998 Z', pathLight: 'M1.35371469e-08,7.95601173 C127.450324,7.95601173 102.647209,17.9667644 174.198268,17.9667644 C245.749327,17.9667644 298.768469,2.23349117e-13 700,1.42108547e-14 L700,37 C700,38.6568542 358.656854,40 357,40 L108.569037,40 L3,40 C1.34314575,40 -3.74826549e-09,38.6568543 -4.14273948e-09,37 L1.35371469e-08,7.95601173 Z' }, // eslint-disable-line max-len + { color: 'green', start: '#017F75', end: '#00B3A4', path: 'M3.14689825e-06,13.6239758 C26.8316503,17.6239758 55.6152344,25 116.542969,25 C177.470703,25 263.972656,4 297.017578,4 C330.0625,4 348.589288,7.23392617 700.000003,9 L700.000003,40 L108.56904,40 L3.14689058e-06,40 L3.14689825e-06,13.6239758 Z', pathLight: 'M3.1372994e-06,24.4746094 C127.450326,24.4746094 108.698941,3 180.25,3 C251.801058,3 298.76847,17.4941406 700,17.4941406 L700.000003,40 L108.569039,39.5058594 L3.01365718,39.9862837 C1.35682009,39.9938246 0.00757513054,38.6568059 3.42096185e-05,36.9999688 C1.34947659e-05,36.9954175 3.13729938e-06,36.9908661 3.13729938e-06,36.9863147 L3.1372994e-06,24.4746094 Z' }, // eslint-disable-line max-len + { color: 'purple', start: '#490092', end: '#DD0A73', path: 'M0,5 C85.1894531,9 157.96592,25.9853066 223.281971,25.9853638 C288.598022,25.9854211 306.490234,12.5448566 700,12.5448566 L700,40 L108.569037,40 L0,40 L0,5 Z', pathLight: 'M700,21.4746094 L700,40 L1.76214598e-12,40 L1.12746648e-08,18.4941406 C9.35694419,18.5359805 41.1418261,21.0181774 102.519531,21.4746094 C163.897236,21.9310414 216.210205,5 260.105102,5 C304,5 339.77443,21.6752984 700,21.4746094 Z' }, // eslint-disable-line max-len +]; + +export const GRAPHIC_COLORS = graphicColorsToCodes.map(({ color }) => color); + +export const EuiCardBg = ({ + graphicColor, +}) => { + // Set the svg gradient colors + const graphicStartColor = graphicColorsToCodes.find(w => w.color === graphicColor).start; + const graphicEndColor = graphicColorsToCodes.find(x => x.color === graphicColor).end; + const graphicSVGPath = graphicColorsToCodes.find(y => y.color === graphicColor).path; + const graphicSVGPathLight = graphicColorsToCodes.find(z => z.color === graphicColor).pathLight; + + return ( + + + + + + + + + + + + + + + + + ); +}; + +EuiCardBg.propTypes = { + /** + * Determines the brand-driven color codes used in the SVG + */ + graphicColor: PropTypes.oneOf(GRAPHIC_COLORS), +}; + +EuiCardBg.defaultProps = { + graphicColor: 'blue', +}; From 09da7ba5e6b46d16717348d85e01f2ca91230cae Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Mon, 3 Dec 2018 12:49:18 -0600 Subject: [PATCH 6/8] rearrange for better splitting --- src/components/card/card.js | 8 ++------ src/components/card/index.js | 4 ++++ src/components/index.js | 1 + 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/card/card.js b/src/components/card/card.js index 8e8f4f0e1e0..edbe995d728 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -6,7 +6,6 @@ import { getSecureRelForTarget } from '../../services'; import { EuiText } from '../text'; import { EuiTitle } from '../title'; import { EuiBetaBadge } from '../badge/beta_badge'; -import { EuiCardBg } from './card_bg'; const textAlignToClassNameMap = { left: 'euiCard--leftAligned', @@ -56,7 +55,6 @@ export const EuiCard = ({ betaBadgeTitle, layout, bottomGraphic, - bottomGraphicColor, ...rest, }) => { const classes = classNames( @@ -132,7 +130,7 @@ export const EuiCard = ({ if (bottomGraphic) { optionalBottomGraphic = ( - + {bottomGraphic} ); } @@ -229,13 +227,11 @@ EuiCard.propTypes = { * Add a decorative bottom graphic to the card. * This should be used sparingly, consult the Kibana Design team before use. */ - bottomGraphic: PropTypes.bool, - bottomGraphicColor: PropTypes.string, + bottomGraphic: PropTypes.node, }; EuiCard.defaultProps = { textAlign: 'center', layout: 'vertical', titleElement: 'span', - bottomGraphicColor: 'blue', }; diff --git a/src/components/card/index.js b/src/components/card/index.js index ff970aadb2c..a1b0ada069a 100644 --- a/src/components/card/index.js +++ b/src/components/card/index.js @@ -1,3 +1,7 @@ export { EuiCard, } from './card'; + +export { + EuiCardBg, +} from './card_bg'; diff --git a/src/components/index.js b/src/components/index.js index c09b340e33d..d89c651c43f 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -39,6 +39,7 @@ export { export { EuiCard, + EuiCardBg, } from './card'; export { From e56e49b0b2c67525ae862190ec06e469470b4f16 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Mon, 3 Dec 2018 16:28:21 -0600 Subject: [PATCH 7/8] renaming things, clean up svg, etc. --- src/components/card/_card.scss | 12 +++++++----- src/components/card/card.js | 2 +- .../card/{card_bg.js => card_graphic.js} | 14 +++++++------- src/components/card/index.js | 4 ++-- src/components/index.js | 2 +- 5 files changed, 18 insertions(+), 16 deletions(-) rename src/components/card/{card_bg.js => card_graphic.js} (89%) diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 498c2f18433..c5f6a5b2048 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -4,6 +4,7 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, 'paddingMedium'); $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. +$euiCardGraphicHeight: 40px; // Actual height of the svg used in EuiCardGraphic // Start with a base of EuiPanel styles @include euiPanel($selector: 'euiCard'); @@ -21,7 +22,6 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. flex-direction: column; padding: $euiCardSpacing; min-height: 1px; /* 2 */ - position: relative; // This creates a bunch of sub selectors for the beta badge @include hasBetaBadge($selector: 'euiCard', $spacing: $euiCardSpacing); // sass-lint:disable-line mixins-before-declarations @@ -63,7 +63,8 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. } &.euiCard--hasBottomGraphic { - padding-bottom: $euiCardSpacing + $euiSizeXXL; + position: relative; + padding-bottom: $euiCardSpacing + $euiCardGraphicHeight; } } @@ -151,12 +152,13 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. } // Optional decorative graphics -.euiCard__graphicBottom { +.euiCard__graphic { position: absolute; bottom: 0; left: 0; - height: $euiSizeXXL; + height: $euiCardGraphicHeight; width: 100%; overflow: hidden; - border-radius: 0 0 $euiBorderRadius $euiBorderRadius; + border-bottom-left-radius: $euiBorderRadius; + border-bottom-right-radius: $euiBorderRadius; } diff --git a/src/components/card/card.js b/src/components/card/card.js index edbe995d728..e270523bdd1 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -129,7 +129,7 @@ export const EuiCard = ({ let optionalBottomGraphic; if (bottomGraphic) { optionalBottomGraphic = ( - + {bottomGraphic} ); diff --git a/src/components/card/card_bg.js b/src/components/card/card_graphic.js similarity index 89% rename from src/components/card/card_bg.js rename to src/components/card/card_graphic.js index 3bd20569e6c..82129a4704b 100644 --- a/src/components/card/card_bg.js +++ b/src/components/card/card_graphic.js @@ -9,7 +9,7 @@ const graphicColorsToCodes = [ export const GRAPHIC_COLORS = graphicColorsToCodes.map(({ color }) => color); -export const EuiCardBg = ({ +export const EuiCardGraphic = ({ graphicColor, }) => { // Set the svg gradient colors @@ -19,11 +19,11 @@ export const EuiCardBg = ({ const graphicSVGPathLight = graphicColorsToCodes.find(z => z.color === graphicColor).pathLight; return ( - + - - - + + + @@ -43,13 +43,13 @@ export const EuiCardBg = ({ ); }; -EuiCardBg.propTypes = { +EuiCardGraphic.propTypes = { /** * Determines the brand-driven color codes used in the SVG */ graphicColor: PropTypes.oneOf(GRAPHIC_COLORS), }; -EuiCardBg.defaultProps = { +EuiCardGraphic.defaultProps = { graphicColor: 'blue', }; diff --git a/src/components/card/index.js b/src/components/card/index.js index a1b0ada069a..027f377b079 100644 --- a/src/components/card/index.js +++ b/src/components/card/index.js @@ -3,5 +3,5 @@ export { } from './card'; export { - EuiCardBg, -} from './card_bg'; + EuiCardGraphic, +} from './card_graphic'; diff --git a/src/components/index.js b/src/components/index.js index d89c651c43f..147ffa13cbc 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -39,7 +39,7 @@ export { export { EuiCard, - EuiCardBg, + EuiCardGraphic, } from './card'; export { From 2a40e7dba7b109a91a1091cbc5b3a532059a865f Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Mon, 3 Dec 2018 17:24:30 -0600 Subject: [PATCH 8/8] change prop to color, svg to solid fill --- src/components/card/card_graphic.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/src/components/card/card_graphic.js b/src/components/card/card_graphic.js index 82129a4704b..4734566d225 100644 --- a/src/components/card/card_graphic.js +++ b/src/components/card/card_graphic.js @@ -10,30 +10,26 @@ const graphicColorsToCodes = [ export const GRAPHIC_COLORS = graphicColorsToCodes.map(({ color }) => color); export const EuiCardGraphic = ({ - graphicColor, + color, }) => { // Set the svg gradient colors - const graphicStartColor = graphicColorsToCodes.find(w => w.color === graphicColor).start; - const graphicEndColor = graphicColorsToCodes.find(x => x.color === graphicColor).end; - const graphicSVGPath = graphicColorsToCodes.find(y => y.color === graphicColor).path; - const graphicSVGPathLight = graphicColorsToCodes.find(z => z.color === graphicColor).pathLight; + const graphicStartColor = graphicColorsToCodes.find(w => w.color === color).start; + const graphicEndColor = graphicColorsToCodes.find(x => x.color === color).end; + const graphicSVGPath = graphicColorsToCodes.find(y => y.color === color).path; + const graphicSVGPathLight = graphicColorsToCodes.find(z => z.color === color).pathLight; return ( - - - - - + - +