From c20b97a8702f6a1a6bc615a84929d4f316ae1b9e Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 26 Apr 2018 10:58:26 -0400 Subject: [PATCH 1/4] Added beta badges to cards and keypad menu items --- src-docs/src/views/badge/badge_example.js | 30 ++++++++ src-docs/src/views/badge/beta_badge.js | 13 ++++ src-docs/src/views/card/card_beta.js | 32 ++++++++ src-docs/src/views/card/card_example.js | 23 ++++++ .../src/views/key_pad_menu/key_pad_beta.js | 36 +++++++++ .../key_pad_menu/key_pad_menu_example.js | 21 ++++++ src/components/badge/_index.scss | 1 + .../__snapshots__/beta_badge.test.js.snap | 11 +++ .../badge/beta_badge/_beta_badge.scss | 19 +++++ src/components/badge/beta_badge/_index.scss | 1 + src/components/badge/beta_badge/beta_badge.js | 75 +++++++++++++++++++ .../badge/beta_badge/beta_badge.test.js | 16 ++++ src/components/badge/beta_badge/index.js | 3 + src/components/badge/index.js | 4 + src/components/card/_card.scss | 32 ++++++-- src/components/card/card.js | 24 ++++++ src/components/index.js | 1 + .../key_pad_menu/_key_pad_menu.scss | 19 +++++ .../key_pad_menu/key_pad_menu_item.js | 44 +++++++++-- 19 files changed, 393 insertions(+), 12 deletions(-) create mode 100644 src-docs/src/views/badge/beta_badge.js create mode 100644 src-docs/src/views/card/card_beta.js create mode 100644 src-docs/src/views/key_pad_menu/key_pad_beta.js create mode 100644 src/components/badge/beta_badge/__snapshots__/beta_badge.test.js.snap create mode 100644 src/components/badge/beta_badge/_beta_badge.scss create mode 100644 src/components/badge/beta_badge/_index.scss create mode 100644 src/components/badge/beta_badge/beta_badge.js create mode 100644 src/components/badge/beta_badge/beta_badge.test.js create mode 100644 src/components/badge/beta_badge/index.js diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index a63326ef564..a8fdaaae9cd 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,29 @@ 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 description that will be presented in a tooltip. +

+

+ 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..d3180d2f4a6 --- /dev/null +++ b/src-docs/src/views/badge/beta_badge.js @@ -0,0 +1,13 @@ +import React from 'react'; + +import { + EuiBetaBadge, +} from '../../../../src/components'; + +export default () => ( +
+ +   + +
+); 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..d5796aaf130 --- /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." + betaLabel={badges[index]} + betaDescription={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..7ea2670d2eb 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,24 @@ 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 betaLabel and betaDescription to + the card and it will properly create and position an EuiBetaBadge. +

+ ), + 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..8571eac6584 --- /dev/null +++ b/src-docs/src/views/key_pad_menu/key_pad_beta.js @@ -0,0 +1,36 @@ +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..06a85de2bd1 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,22 @@ 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 betaLabel and betaDescription to + the card and it will properly create and position an EuiBetaBadge. +

+ ), + demo: , }], }; 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..5bdebee34c8 --- /dev/null +++ b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.js.snap @@ -0,0 +1,11 @@ +// 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..f4a6eaa0626 --- /dev/null +++ b/src/components/badge/beta_badge/_beta_badge.scss @@ -0,0 +1,19 @@ +.euiBetaBadge { + display: inline-block; + padding: 0 $euiSizeL; + border-radius: $euiSizeL; + background-color: $euiColorAccent; + vertical-align: text-bottom; // if displayed inline with text + @include euiSlightShadowHover($euiColorAccent); + + font-size: $euiSizeM; + font-weight: $euiFontWeightBold; + letter-spacing: .05em; + color: chooseLightOrDarkText($euiColorAccent, $euiColorEmptyShade, $euiColorFullShade); + text-transform: uppercase; + line-height: $euiSizeL; + text-align: center; + white-space: nowrap; + + cursor: default; +} 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..98d43e20f05 --- /dev/null +++ b/src/components/badge/beta_badge/beta_badge.js @@ -0,0 +1,75 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { EuiToolTip } from '../../tool_tip'; + +export const EuiBetaBadge = ({ + className, + label, + description, + tooltipPosition, + title, + ...rest, +}) => { + + const classes = classNames( + 'euiBetaBadge', + className + ); + + if (description) { + return ( + + + {label} + + + ); + } else { + return ( + + {label} + + ) + } +} + +EuiBetaBadge.propTypes = { + className: PropTypes.string, + + /** + * One word label like "Beta" or "Lab" + */ + label: PropTypes.string.isRequired, + + /** + * Description for the tooltip + */ + description: PropTypes.node, + + /** + * Custom position of the tooltip + */ + tooltipPosition: PropTypes.string, + + /** + * Optional title will be supplied as tooltip title or title attribute + */ + title: PropTypes.string, +} + +EuiBetaBadge.defaultProps = { + tooltipPosition: 'top', +}; diff --git a/src/components/badge/beta_badge/beta_badge.test.js b/src/components/badge/beta_badge/beta_badge.test.js new file mode 100644 index 00000000000..6e9eb53ff46 --- /dev/null +++ b/src/components/badge/beta_badge/beta_badge.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../../test'; + +import { EuiBetaBadge } from './beta_badge'; + +describe('EuiBetaBadge', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/badge/beta_badge/index.js b/src/components/badge/beta_badge/index.js new file mode 100644 index 00000000000..8e5ce331d70 --- /dev/null +++ b/src/components/badge/beta_badge/index.js @@ -0,0 +1,3 @@ +export { + EuiBetaBadge, +} from './beta_badge'; diff --git a/src/components/badge/index.js b/src/components/badge/index.js index ffa171a99fa..1603fdc3abb 100644 --- a/src/components/badge/index.js +++ b/src/components/badge/index.js @@ -1,3 +1,7 @@ export { EuiBadge, } from './badge'; + +export { + EuiBetaBadge, +} from './beta_badge'; diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 678bade623a..cc3c2c37c6b 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -7,13 +7,35 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. // Start with a base of EuiPanel styles @include euiPanel($selector: 'euiCard'); +/** + * 1. Footer is always at the bottom. + * 2. Extend beta badges to at least 40% of the card's width + */ + // EuiCard specific .euiCard { display: flex; flex-direction: column; - overflow: hidden; padding: $euiCardSpacing; + &.euiCard--hasBetaBadge { + position: relative; + + .euiCard__betaBadgeWrapper { + position: absolute; + top: $euiSizeL/-2; + left: 50%; + transform: translateX(-50%); + z-index: 3; // get above abs positioned image + min-width: 40%; /* 2 */ + + .euiToolTipAnchor, + .euiCard__betaBadge { + width: 100%; /* 2 */ + } + } + } + .euiCard__top, .euiCard__content, .euiCard__footer { @@ -51,10 +73,6 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. } } -/** - * 1. Footer is always at the bottom. - */ - .euiCard__top { flex-grow: 0; /* 1 */ position: relative; @@ -70,6 +88,10 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. top: $euiCardSpacing * -1; margin-bottom: $euiCardSpacing * -1; // ensure the parent is only as tall as the image + // match border radius, minus 1px because it's inside a border + border-top-left-radius: $euiBorderRadius - 1px; + border-top-right-radius: $euiBorderRadius - 1px; + // IF both exist, position the icon centered on top of image + .euiCard__icon { position: absolute; diff --git a/src/components/card/card.js b/src/components/card/card.js index 8bfe6b9c895..a81fb7bdb33 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import { EuiText } from '../text'; import { EuiTitle } from '../title'; +import { EuiBetaBadge } from '../badge/beta_badge'; const textAlignToClassNameMap = { left: 'euiCard--leftAligned', @@ -24,6 +25,8 @@ export const EuiCard = ({ href, textAlign, isClickable, + betaLabel, + betaDescription, ...rest, }) => { const classes = classNames( @@ -31,6 +34,7 @@ export const EuiCard = ({ textAlignToClassNameMap[textAlign], { 'euiCard--isClickable': onClick || href || isClickable, + 'euiCard--hasBetaBadge': betaLabel, }, className, ); @@ -67,6 +71,15 @@ export const EuiCard = ({ ); } + let optionalBetaBadge; + if (betaLabel) { + optionalBetaBadge = ( + + + + ) + } + return ( + {optionalBetaBadge} {optionalCardTop} @@ -120,6 +134,16 @@ EuiCard.propTypes = { onClick: PropTypes.func, href: PropTypes.string, textAlign: PropTypes.oneOf(ALIGNMENTS), + + /** + * Add a badge to the card to label it as "Beta" or other non-GA state + */ + betaLabel: PropTypes.string, + + /** + * Add a description to the beta label (will appear in a tooltip) + */ + betaDescription: PropTypes.node, }; EuiCard.defaultProps = { diff --git a/src/components/index.js b/src/components/index.js index 3e13c841aaf..d5d34becdff 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -23,6 +23,7 @@ export { export { EuiBadge, + EuiBetaBadge, } from './badge'; export { diff --git a/src/components/key_pad_menu/_key_pad_menu.scss b/src/components/key_pad_menu/_key_pad_menu.scss index ec5a9d3194a..c26af1176a3 100644 --- a/src/components/key_pad_menu/_key_pad_menu.scss +++ b/src/components/key_pad_menu/_key_pad_menu.scss @@ -14,6 +14,7 @@ /** * 1. If this class is applied to a button, we need to override the Chrome default font. + * 2. If it has a BetaBadge, make sure only the first letter shows */ .euiKeyPadMenuItem { display: block; @@ -51,6 +52,24 @@ flex-direction: column; align-items: center; justify-content: center; + + .euiKeyPadMenuItem--hasBetaBadge & { + position: relative; + + .euiKeyPadMenuItem__betaBadgeWrapper { + position: absolute; + top: $euiSizeM * -.5; + right: $euiSizeM * -.5; + z-index: 3; + + .euiKeyPadMenuItem__betaBadge { + width: $euiSizeL; + padding: 0 8px; /* 2 */ + overflow: hidden; /* 2 */ + letter-spacing: 3rem; /* 2 */ + } + } + } } .euiKeyPadMenuItem__icon { diff --git a/src/components/key_pad_menu/key_pad_menu_item.js b/src/components/key_pad_menu/key_pad_menu_item.js index 839f2349ed2..de2e22cb764 100644 --- a/src/components/key_pad_menu/key_pad_menu_item.js +++ b/src/components/key_pad_menu/key_pad_menu_item.js @@ -2,8 +2,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -const renderContent = (children, label) => ( +import { EuiBetaBadge } from '../../components/badge/beta_badge'; + +const renderContent = (children, label, betaLabel, betaDescription) => (
+ {betaLabel && + + + + } +
{children}
@@ -17,10 +25,26 @@ const renderContent = (children, label) => ( const commonPropTypes = { children: PropTypes.node.isRequired, label: PropTypes.node.isRequired, + + /** + * Add a badge to the card to label it as "Beta" or other non-GA state + */ + betaLabel: PropTypes.string, + + /** + * Add a description to the beta label (will appear in a tooltip) + */ + betaDescription: PropTypes.node, }; -export const EuiKeyPadMenuItem = ({ href, label, children, className, ...rest }) => { - const classes = classNames('euiKeyPadMenuItem', className); +export const EuiKeyPadMenuItem = ({ href, label, children, className, betaLabel, betaDescription, ...rest }) => { + const classes = classNames( + 'euiKeyPadMenuItem', + { + 'euiKeyPadMenuItem--hasBetaBadge': betaLabel, + }, + className + ); return ( - {renderContent(children, label)} + {renderContent(children, label, betaLabel, betaDescription)} ); }; @@ -37,8 +61,14 @@ EuiKeyPadMenuItem.propTypes = ({ ...{ href: PropTypes.string, }, ...commonPropTypes }); -export const EuiKeyPadMenuItemButton = ({ onClick, label, children, className, ...rest }) => { - const classes = classNames('euiKeyPadMenuItem', className); +export const EuiKeyPadMenuItemButton = ({ onClick, label, children, className, betaLabel, betaDescription, ...rest }) => { + const classes = classNames( + 'euiKeyPadMenuItem', + { + 'euiKeyPadMenuItem--hasBetaBadge': betaLabel, + }, + className + ); return ( ); }; From 3e60fc9a00c20e487a7134d22c7dbdf6d7f8fa40 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 26 Apr 2018 13:02:39 -0400 Subject: [PATCH 2/4] Adding link --- src-docs/src/views/badge/badge_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index a8fdaaae9cd..8fee1ae6cce 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -100,7 +100,7 @@ export const BadgeExample = {

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

), From 8ef6bcbb0806396f1c11a4ab007d659c8246ce82 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 26 Apr 2018 13:05:50 -0400 Subject: [PATCH 3/4] changelog --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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) From e1fa667a178a8b6978f8d57cd18683f0489bfe54 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 26 Apr 2018 14:42:23 -0400 Subject: [PATCH 4/4] Addressing PR comments - Fixing use of font-size variables - Adding example of badge inline with title - Max-widthed the card version - Now always using the label as the tooltip title or title attr if title is not supplied - Fixing naming conventions to better suit imported components - Allowing icon only badges --- src-docs/src/views/badge/badge_example.js | 9 +++- src-docs/src/views/badge/beta_badge.js | 13 ++++- src-docs/src/views/card/card_beta.js | 4 +- src-docs/src/views/card/card_example.js | 5 +- .../src/views/key_pad_menu/key_pad_beta.js | 9 ++-- .../key_pad_menu/key_pad_menu_example.js | 17 +++++-- src/components/badge/_badge.scss | 2 +- .../__snapshots__/beta_badge.test.js.snap | 1 + .../badge/beta_badge/_beta_badge.scss | 17 +++++-- src/components/badge/beta_badge/beta_badge.js | 48 ++++++++++++++----- src/components/card/_card.scss | 6 +++ src/components/card/card.js | 22 +++++---- .../key_pad_menu/_key_pad_menu.scss | 4 +- .../key_pad_menu/key_pad_menu_item.js | 38 ++++++++++----- 14 files changed, 142 insertions(+), 53 deletions(-) diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index 8fee1ae6cce..c8358ed3ab0 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -96,7 +96,14 @@ export const BadgeExample = {

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 description that will be presented in a tooltip. + 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 diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js index d3180d2f4a6..04a5a2c8456 100644 --- a/src-docs/src/views/badge/beta_badge.js +++ b/src-docs/src/views/badge/beta_badge.js @@ -2,12 +2,21 @@ 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 index d5796aaf130..15f4f8f78f9 100644 --- a/src-docs/src/views/card/card_beta.js +++ b/src-docs/src/views/card/card_beta.js @@ -17,8 +17,8 @@ const cardNodes = icons.map(function (item, index) { icon={} title={`Kibana ${item}`} description="Example of a card's description. Stick to one or two sentences." - betaLabel={badges[index]} - betaDescription={badges[index] ? "This module is not GA. Please help us by reporting any bugs." : undefined} + betaBadgeLabel={badges[index]} + betaBadgeTooltipContent={badges[index] ? "This module is not GA. Please help us by reporting any bugs." : undefined} onClick={() => window.alert('Card clicked')} /> diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index 7ea2670d2eb..d8baa7dee52 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -108,8 +108,9 @@ export const CardExample = { text: (

If the card links to or references a module that is not GA (beta, lab, etc), - you can add a betaLabel and betaDescription to - the card and it will properly create and position an EuiBetaBadge. + 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 }, 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 index 8571eac6584..fcfec82f735 100644 --- a/src-docs/src/views/key_pad_menu/key_pad_beta.js +++ b/src-docs/src/views/key_pad_menu/key_pad_beta.js @@ -18,8 +18,8 @@ export default () => ( @@ -27,8 +27,9 @@ 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 06a85de2bd1..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 @@ -68,11 +68,18 @@ export const KeyPadMenuExample = { code: keyPadBetaHtml, }], text: ( -

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

+
+

+ 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/beta_badge/__snapshots__/beta_badge.test.js.snap b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.js.snap index 5bdebee34c8..fbf03346008 100644 --- a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.js.snap +++ b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.js.snap @@ -5,6 +5,7 @@ exports[`EuiBetaBadge is rendered 1`] = ` aria-label="aria-label" class="euiBetaBadge testClass1 testClass2" data-test-subj="test subject string" + title="Beta" > Beta diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss index f4a6eaa0626..8a7494d7441 100644 --- a/src/components/badge/beta_badge/_beta_badge.scss +++ b/src/components/badge/beta_badge/_beta_badge.scss @@ -3,17 +3,28 @@ padding: 0 $euiSizeL; border-radius: $euiSizeL; background-color: $euiColorAccent; - vertical-align: text-bottom; // if displayed inline with text + vertical-align: super; // if displayed inline with text @include euiSlightShadowHover($euiColorAccent); - font-size: $euiSizeM; + font-size: $euiFontSizeXS; font-weight: $euiFontWeightBold; + text-transform: uppercase; letter-spacing: .05em; color: chooseLightOrDarkText($euiColorAccent, $euiColorEmptyShade, $euiColorFullShade); - text-transform: uppercase; 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/beta_badge.js b/src/components/badge/beta_badge/beta_badge.js index 98d43e20f05..53840de3d46 100644 --- a/src/components/badge/beta_badge/beta_badge.js +++ b/src/components/badge/beta_badge/beta_badge.js @@ -4,32 +4,53 @@ import classNames from 'classnames'; import { EuiToolTip } from '../../tool_tip'; +import { + ICON_TYPES, + EuiIcon, +} from '../../icon'; + export const EuiBetaBadge = ({ className, label, - description, + tooltipContent, tooltipPosition, title, + iconType, ...rest, }) => { const classes = classNames( 'euiBetaBadge', + { + 'euiBetaBadge--iconOnly': iconType, + }, className ); - if (description) { + let icon; + if (iconType) { + icon = ( +