diff --git a/CHANGELOG.md b/CHANGELOG.md index e9223b998b8..91f39e66b99 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ # [`master`](https://github.com/elastic/eui/tree/master) +- Badges can now accept onClicks and custom colors. They were changed stylistically to be bolder and smaller by default. ([#381](https://github.com/elastic/eui/pull/381)) - Added component to wrap blocks of substeps `EuiSubSteps` in a shaded container. ([#375](https://github.com/elastic/eui/pull/375)) - Added horizontal steps component ([#375](https://github.com/elastic/eui/pull/375)) - Changed look and feel of pagination. Added compressed prop for smaller footprint pagination. ([#380](https://github.com/elastic/eui/pull/380)) diff --git a/src-docs/src/views/badge/badge.js b/src-docs/src/views/badge/badge.js index 63aaedb5088..6117de2b2cc 100644 --- a/src-docs/src/views/badge/badge.js +++ b/src-docs/src/views/badge/badge.js @@ -2,43 +2,32 @@ import React from 'react'; import { EuiBadge, + EuiFlexItem, + EuiFlexGroup, } from '../../../../src/components'; -export default () => ( -
- - Default - - -    - - - Primary - - -    - - - Secondary - - -    +const badges = [ + 'default', + 'primary', + 'secondary', + 'accent', + 'warning', + 'danger', + '#fea27f', + '#000' +]; - - Accent - - -    - - - Warning - - -    - - - Danger - -
+export default () => ( + + { + badges.map(badge => ( + + + {badge} + + + )) + } + ); diff --git a/src-docs/src/views/badge/badge_button.js b/src-docs/src/views/badge/badge_button.js new file mode 100644 index 00000000000..20d65b0908e --- /dev/null +++ b/src-docs/src/views/badge/badge_button.js @@ -0,0 +1,25 @@ +import React from 'react'; + +import { + EuiBadge, +} from '../../../../src/components'; + +export default () => ( +
+ window.alert('Badge clicked')} + > + onClick on badge itself + + + window.alert('Icon inside badge clicked')} + > + onClick on icon within badge + +
+); diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index 145526a09a8..b062f3e9135 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -8,6 +8,7 @@ import { import { EuiBadge, + EuiCode, } from '../../../../src/components'; import Badge from './badge'; @@ -18,6 +19,10 @@ import BadgeWithIcon from './badge_with_icon'; const badgeWithIconSource = require('!!raw-loader!./badge_with_icon'); const badgeWithIconHtml = renderToHtml(BadgeWithIcon); +import BadgeButton from './badge_button'; +const badgeButtonSource = require('!!raw-loader!./badge_button'); +const badgeButtonHtml = renderToHtml(BadgeButton); + export const BadgeExample = { title: 'Badge', sections: [{ @@ -31,7 +36,11 @@ export const BadgeExample = { }], text: (

- Badges are used to focus on important bits of information. + Badges are used to focus on important bits of information. Although they + will automatically space themselves if you use them in a repetitive fashion + it is good form to wrap them using a FlexGroup so + that they will wrap when width is constrained (as is done artificially in + the example below).

), props: { EuiBadge }, @@ -51,5 +60,22 @@ export const BadgeExample = {

), demo: , + }, { + title: 'Badge with onClick events', + source: [{ + type: GuideSectionTypes.JS, + code: badgeButtonSource, + }, { + type: GuideSectionTypes.HTML, + code: badgeButtonHtml, + }], + text: ( +

+ Badges can have onClick events applied to the badge itself or the icon within the badge. + The later option is useful for when you might use badges in other components (like a tag + system with autocomplete where you need close events). +

+ ), + demo: , }], }; diff --git a/src-docs/src/views/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.js index c815493616a..c836b55dfd5 100644 --- a/src-docs/src/views/badge/badge_with_icon.js +++ b/src-docs/src/views/badge/badge_with_icon.js @@ -6,14 +6,12 @@ import { export default () => (
- - Primary + + Default -    - - - Secondary + + Primary
); diff --git a/src/components/badge/__snapshots__/badge.test.js.snap b/src/components/badge/__snapshots__/badge.test.js.snap index 6e0220bb4b2..4c58bc5fb44 100644 --- a/src/components/badge/__snapshots__/badge.test.js.snap +++ b/src/components/badge/__snapshots__/badge.test.js.snap @@ -108,7 +108,7 @@ exports[`EuiBadge props iconSide left is rendered 1`] = ` class="euiBadge__content" > 50) { + color: #000; + } @else { + color: #FFF; + } } } diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js index 3d7775e1b46..d5328b52c62 100644 --- a/src/components/badge/badge.js +++ b/src/components/badge/badge.js @@ -2,6 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import { isColorDark, hexToRgb } from '../../services/color'; +import { EuiKeyboardAccessible } from '../accessibility'; + import { ICON_TYPES, EuiIcon, @@ -31,42 +34,112 @@ export const EuiBadge = ({ iconType, iconSide, className, + onClick, + iconOnClick, ...rest }) => { + + let optionalColorClass = null; + let optionalCustomStyles = null; + let textColor = null; + + if (COLORS.indexOf(color) > -1) { + optionalColorClass = colorToClassNameMap[color]; + } else { + + if (isColorDark(...hexToRgb(color))) { + textColor = '#FFFFFF'; + } else { + textColor = '#000000'; + } + + optionalCustomStyles = { backgroundColor: color, color: textColor }; + } + + const classes = classNames( 'euiBadge', - colorToClassNameMap[color], iconSideToClassNameMap[iconSide], + optionalColorClass, className ); let optionalIcon = null; if (iconType) { - optionalIcon = ( - - ); + if (iconOnClick) { + optionalIcon = ( + + + + ); + + } else { + optionalIcon = ( + + ); + } } - return ( -
- - {optionalIcon} - - {children} + if (onClick) { + return ( +
- ); + + ); + } else { + return ( +
+ + {optionalIcon} + + {children} + + +
+ ); + } }; EuiBadge.propTypes = { children: PropTypes.node, className: PropTypes.string, + + /** + * Accepts any string from our icon library + */ iconType: PropTypes.oneOf(ICON_TYPES), + + /** + * The side of the badge the icon should sit + */ iconSide: PropTypes.string, + /** + * Will apply an onclick to icon within the badge + */ + iconOnClick: PropTypes.func, + + /** + * Will apply an onclick to the badge itself + */ + onClick: PropTypes.func, + + /** + * Accepts either our palette colors (primary, secondary ..etc) or a hex value `#FFFFFF`, `#000`. + */ color: PropTypes.string, }; diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss index be5cf234072..d386ddca5e3 100644 --- a/src/global_styling/variables/_colors.scss +++ b/src/global_styling/variables/_colors.scss @@ -55,6 +55,19 @@ $euiTitleColor: $euiColorFullShade !default; $euiLinkColor: $euiColorPrimary !default; $euiFocusBackgroundColor: tintOrShade($euiColorPrimary, 90%, 50%) !default; +// Visualization colors + +$euiColorVis0: #00B3A4 !default; +$euiColorVis1: #3185FC !default; +$euiColorVis2: #DB1374 !default; +$euiColorVis3: #490092 !default; +$euiColorVis4: #FEB6DB !default; +$euiColorVis5: #E6C220 !default; +$euiColorVis6: #BFA180 !default; +$euiColorVis7: #F98510 !default; +$euiColorVis8: #461A0A !default; +$euiColorVis9: #920000 !default; + // Code $euiCodeBlockBackgroundColor: $euiColorLightestShade !default; diff --git a/src/services/color/hex_to_rgb.js b/src/services/color/hex_to_rgb.js new file mode 100644 index 00000000000..af90c448fd9 --- /dev/null +++ b/src/services/color/hex_to_rgb.js @@ -0,0 +1,14 @@ +// Modified from https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb + +function hexToRgb(hex) { + // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") + const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + hex = hex.replace(shorthandRegex, function (m, r, g, b) { + return r + r + g + g + b + b; + }); + + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]; +} + +export { hexToRgb }; diff --git a/src/services/color/index.js b/src/services/color/index.js index 09f0df7d5d9..589bc7b25bb 100644 --- a/src/services/color/index.js +++ b/src/services/color/index.js @@ -1,2 +1,3 @@ export { isColorDark } from './is_color_dark'; +export { hexToRgb } from './hex_to_rgb.js'; export { VISUALIZATION_COLORS } from './visualization_colors';