diff --git a/CHANGELOG.md b/CHANGELOG.md index 773e353afa1..df6f733cfc9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `0.0.44`. +- Added `EuiBetaBadge` for non-GA labelling including options to add it to `EuiCard` and `EuiKeyPadMenuItem` ([#705](https://github.com/elastic/eui/pull/705)) + ## [`0.0.44`](https://github.com/elastic/eui/tree/v0.0.44) diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index a63326ef564..c8358ed3ab0 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -9,6 +9,8 @@ import { import { EuiBadge, EuiCode, + EuiBetaBadge, + EuiLink, } from '../../../../src/components'; import Badge from './badge'; @@ -23,6 +25,10 @@ import BadgeButton from './badge_button'; const badgeButtonSource = require('!!raw-loader!./badge_button'); const badgeButtonHtml = renderToHtml(BadgeButton); +import BetaBadge from './beta_badge'; +const betaBadgeSource = require('!!raw-loader!./beta_badge'); +const betaBadgeHtml = renderToHtml(BetaBadge); + export const BadgeExample = { title: 'Badge', sections: [{ @@ -76,5 +82,36 @@ export const BadgeExample = {

), demo: , + }, { + title: 'Beta badge type', + source: [{ + type: GuideSectionTypes.JS, + code: betaBadgeSource, + }, { + type: GuideSectionTypes.HTML, + code: betaBadgeHtml, + }], + text: ( +
+

+ The EuiBetaBadge was created specifically to call out + modules that are not in GA. Generally the labels used are "Beta" or "Lab". + They require an extra tooltipContent to describe the purpose of the badge. + You can pass an optional title prop to populate the tooltip title or html title + attribute but by default it will use the label. +

+

+ If you pass in an iconType, only the icon will be used in the badge itself and + the label will be applied as the title. Only use an icon when attaching the beta badge to small + components like the EuiKeyPadMenuItem. +

+

+ They can also be used in conjunction + with EuiCards and EuiKeyPadMenuItems. +

+
+ ), + props: { EuiBetaBadge }, + demo: , }], }; diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js new file mode 100644 index 00000000000..04a5a2c8456 --- /dev/null +++ b/src-docs/src/views/badge/beta_badge.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import { + EuiBetaBadge, + EuiSpacer, + EuiTitle, +} from '../../../../src/components'; + +export default () => ( +
+ +   + +   + + + + +

Beta badges will also line up nicely with titles

+ +
+); diff --git a/src-docs/src/views/card/card_beta.js b/src-docs/src/views/card/card_beta.js new file mode 100644 index 00000000000..15f4f8f78f9 --- /dev/null +++ b/src-docs/src/views/card/card_beta.js @@ -0,0 +1,32 @@ +import React from 'react'; + +import { + EuiCard, + EuiIcon, + EuiFlexGroup, + EuiFlexItem, +} from '../../../../src/components'; + +const icons = ['dashboard', 'monitoring', 'watches']; +const badges = [null, 'Beta', 'Lab']; + +const cardNodes = icons.map(function (item, index) { + return ( + + } + title={`Kibana ${item}`} + description="Example of a card's description. Stick to one or two sentences." + betaBadgeLabel={badges[index]} + betaBadgeTooltipContent={badges[index] ? "This module is not GA. Please help us by reporting any bugs." : undefined} + onClick={() => window.alert('Card clicked')} + /> + + ); +}); + +export default () => ( + + {cardNodes} + +); diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index ee2469efda0..d8baa7dee52 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -23,6 +23,10 @@ import CardFooter from './card_footer'; const cardFooterSource = require('!!raw-loader!./card_footer'); const cardFooterHtml = renderToHtml(CardFooter); +import CardBeta from './card_beta'; +const cardBetaSource = require('!!raw-loader!./card_beta'); +const cardBetaHtml = renderToHtml(CardBeta); + export const CardExample = { title: 'Card', sections: [{ @@ -91,5 +95,25 @@ export const CardExample = { ), components: { EuiCard }, demo: , + }, + { + title: 'Beta badge', + source: [{ + type: GuideSectionTypes.JS, + code: cardBetaSource, + }, { + type: GuideSectionTypes.HTML, + code: cardBetaHtml, + }], + text: ( +

+ If the card links to or references a module that is not GA (beta, lab, etc), + you can add a betaBadgeLabel and betaBadgeTooltipContent to + the card and it will properly create and position an EuiBetaBadge. If you want to + change the title of the tooltip, supply a betaBadgeTitle prop. +

+ ), + components: { EuiCard }, + demo: , }], }; diff --git a/src-docs/src/views/key_pad_menu/key_pad_beta.js b/src-docs/src/views/key_pad_menu/key_pad_beta.js new file mode 100644 index 00000000000..fcfec82f735 --- /dev/null +++ b/src-docs/src/views/key_pad_menu/key_pad_beta.js @@ -0,0 +1,37 @@ +import React from 'react'; + +import { + EuiIcon, + EuiKeyPadMenu, + EuiKeyPadMenuItem, +} from '../../../../src/components'; + +export default () => ( + + + + + + + + + + + + + +); diff --git a/src-docs/src/views/key_pad_menu/key_pad_menu_example.js b/src-docs/src/views/key_pad_menu/key_pad_menu_example.js index e96e2f5b39a..4a0962d2364 100644 --- a/src-docs/src/views/key_pad_menu/key_pad_menu_example.js +++ b/src-docs/src/views/key_pad_menu/key_pad_menu_example.js @@ -20,6 +20,10 @@ import KeyPadMenuItemButton from './key_pad_menu_item_button'; const keyPadMenuItemButtonSource = require('!!raw-loader!./key_pad_menu_item_button'); const keyPadMenuItemButtonHtml = renderToHtml(KeyPadMenuItemButton); +import KeyPadBeta from './key_pad_beta'; +const keyPadBetaSource = require('!!raw-loader!./key_pad_beta'); +const keyPadBetaHtml = renderToHtml(KeyPadBeta); + export const KeyPadMenuExample = { title: 'Key Pad Menu', sections: [{ @@ -54,5 +58,29 @@ export const KeyPadMenuExample = {

), demo: , + }, { + title: 'Beta item', + source: [{ + type: GuideSectionTypes.JS, + code: keyPadBetaSource, + }, { + type: GuideSectionTypes.HTML, + code: keyPadBetaHtml, + }], + text: ( +
+

+ If the item links to a module that is not GA (beta, lab, etc), + you can add a betaBadgeLabel and betaBadgeTooltipContent to + the card and it will properly create and position an EuiBetaBadge. +

+

+ Supplying just a label will only show the first letter in the badge and supply the full label + to the tooltip. You can also pass an iconType to replace the letter only badge + and the label will still become the title. +

+
+ ), + demo: , }], }; diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss index b635706cb6f..b7d75c04dd8 100644 --- a/src/components/badge/_badge.scss +++ b/src/components/badge/_badge.scss @@ -2,7 +2,7 @@ * 1. Accounts for the border */ .euiBadge { - font-size: $euiSizeM; + font-size: $euiFontSizeXS; font-weight: $euiFontWeightMedium; line-height: $euiSize + 2px; /* 1 */ display: inline-block; diff --git a/src/components/badge/_index.scss b/src/components/badge/_index.scss index fa960083a97..d099a250c31 100644 --- a/src/components/badge/_index.scss +++ b/src/components/badge/_index.scss @@ -1 +1,2 @@ @import 'badge'; +@import 'beta_badge/index'; diff --git a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.js.snap b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.js.snap new file mode 100644 index 00000000000..fbf03346008 --- /dev/null +++ b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.js.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiBetaBadge is rendered 1`] = ` + + Beta + +`; diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss new file mode 100644 index 00000000000..8a7494d7441 --- /dev/null +++ b/src/components/badge/beta_badge/_beta_badge.scss @@ -0,0 +1,30 @@ +.euiBetaBadge { + display: inline-block; + padding: 0 $euiSizeL; + border-radius: $euiSizeL; + background-color: $euiColorAccent; + vertical-align: super; // if displayed inline with text + @include euiSlightShadowHover($euiColorAccent); + + font-size: $euiFontSizeXS; + font-weight: $euiFontWeightBold; + text-transform: uppercase; + letter-spacing: .05em; + color: chooseLightOrDarkText($euiColorAccent, $euiColorEmptyShade, $euiColorFullShade); + line-height: $euiSizeL; + text-align: center; + white-space: nowrap; + + cursor: default; + + // When it's just an icon, make it a circle + &.euiBetaBadge--iconOnly { + padding: 0; + width: $euiSizeL; + + .euiBetaBadge__icon { + position: relative; + margin-top: -1px; + } + } +} diff --git a/src/components/badge/beta_badge/_index.scss b/src/components/badge/beta_badge/_index.scss new file mode 100644 index 00000000000..10c53901b29 --- /dev/null +++ b/src/components/badge/beta_badge/_index.scss @@ -0,0 +1 @@ +@import 'beta_badge'; diff --git a/src/components/badge/beta_badge/beta_badge.js b/src/components/badge/beta_badge/beta_badge.js new file mode 100644 index 00000000000..53840de3d46 --- /dev/null +++ b/src/components/badge/beta_badge/beta_badge.js @@ -0,0 +1,101 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { EuiToolTip } from '../../tool_tip'; + +import { + ICON_TYPES, + EuiIcon, +} from '../../icon'; + +export const EuiBetaBadge = ({ + className, + label, + tooltipContent, + tooltipPosition, + title, + iconType, + ...rest, +}) => { + + const classes = classNames( + 'euiBetaBadge', + { + 'euiBetaBadge--iconOnly': iconType, + }, + className + ); + + let icon; + if (iconType) { + icon = ( +