From 27b9433f91fe6a33ac23c1d354c72b859c9fcac4 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 11 May 2021 19:37:00 -0700 Subject: [PATCH 01/11] need cleanup --- src-docs/src/views/badge/beta_badge.js | 10 + .../__snapshots__/beta_badge.test.tsx.snap | 2 +- .../badge/beta_badge/_beta_badge.scss | 16 ++ .../badge/beta_badge/beta_badge.tsx | 185 +++++++++++++++--- 4 files changed, 186 insertions(+), 27 deletions(-) diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js index f956c8e8765..092992b2ec8 100644 --- a/src-docs/src/views/badge/beta_badge.js +++ b/src-docs/src/views/badge/beta_badge.js @@ -16,6 +16,16 @@ export default () => ( />   + + + { + alert('okay'); + }} + color="accent" + /> +

diff --git a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap index fbf03346008..de3316ccf44 100644 --- a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap +++ b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiBetaBadge is rendered 1`] = ` diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss index e38fd0349f9..fb2f96ba6dc 100644 --- a/src/components/badge/beta_badge/_beta_badge.scss +++ b/src/components/badge/beta_badge/_beta_badge.scss @@ -17,6 +17,10 @@ &:focus { @include euiFocusRing; } + + &:not(.euiBetaBadge--hollow) { + box-shadow: none; + } } // When it's just an icon, make it a circle @@ -29,3 +33,15 @@ margin-top: -1px; } } + +.euiBetaBadge--subdued { + $backgroundColor: tint($euiColorLightShade, 30%); + background: $backgroundColor; + color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); +} + +.euiBetaBadge--accent { + $backgroundColor: $euiColorAccent; + background: $backgroundColor; + color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); +} \ No newline at end of file diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx index 295efb4baaf..db410a259c0 100644 --- a/src/components/badge/beta_badge/beta_badge.tsx +++ b/src/components/badge/beta_badge/beta_badge.tsx @@ -17,14 +17,58 @@ * under the License. */ -import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; +import React, { + AriaAttributes, + Fragment, + FunctionComponent, + HTMLAttributes, + MouseEventHandler, + ReactNode, + Ref, +} from 'react'; import classNames from 'classnames'; -import { CommonProps, ExclusiveUnion } from '../../common'; +import { CommonProps, ExclusiveUnion, keysOf } from '../../common'; + +import { getSecureRelForTarget } from '../../../services'; import { EuiToolTip, ToolTipPositions } from '../../tool_tip'; import { EuiIcon, IconType } from '../../icon'; +import { EuiInnerText } from '../../inner_text'; + +const colorToClassMap = { + accent: 'euiBetaBadge--accent', + subdued: 'euiBetaBadge--subdued', + hollow: 'euiBetaBadge--hollow', +}; + +export const COLORS: BadgeNotificationColor[] = keysOf(colorToClassMap); +export type BadgeNotificationColor = keyof typeof colorToClassMap; + +type WithButtonProps = { + /** + * Will apply an onclick to the badge itself + */ + onClick?: MouseEventHandler; + + /** + * Aria label applied to the onClick button + */ + onClickAriaLabel?: AriaAttributes['aria-label']; +} & Omit, 'onClick' | 'color'>; + +type WithAnchorProps = { + href: string; + target?: string; + rel?: string; +} & Omit, 'href' | 'color' | 'onClick'>; + +type WithSpanProps = Omit< + HTMLAttributes, + 'onClick' | 'color' | 'title' +>; + // `label` prop can be a `ReactNode` only if `title` or `tooltipContent` is provided type LabelAsNode = ( | { @@ -72,19 +116,29 @@ type BadgeProps = { * otherwise the label will be used */ title?: string; + color?: BadgeNotificationColor; } & ExclusiveUnion; export type EuiBetaBadgeProps = CommonProps & - Omit, 'title'> & + ExclusiveUnion< + ExclusiveUnion, + WithSpanProps + > & BadgeProps; export const EuiBetaBadge: FunctionComponent = ({ className, label, + color = 'hollow', tooltipContent, tooltipPosition = 'top', title, iconType, + onClick, + onClickAriaLabel, + href, + rel, + target, ...rest }) => { const classes = classNames( @@ -92,10 +146,11 @@ export const EuiBetaBadge: FunctionComponent = ({ { 'euiBetaBadge--iconOnly': iconType, }, + colorToClassMap[color], className ); - let icon; + let icon: JSX.Element | undefined; if (iconType) { icon = ( = ({ ); } - if (tooltipContent) { - return ( - - - {icon || label} - - + const Element = href ? 'a' : 'button'; + const relObj: { + href?: string; + target?: string; + rel?: string; + onClick?: + | ((event: React.MouseEvent) => void) + | ((event: React.MouseEvent) => void); + } = {}; + + if (href) { + relObj.href = href; + relObj.target = target; + relObj.rel = getSecureRelForTarget({ href, target, rel }); + } + if (onClick) { + relObj.onClick = onClick; + } + + let content; + if (onClick || href) { + content = ( + + {(ref, innerText) => ( + } + title={innerText} + {...(relObj as HTMLAttributes)} + {...(rest as HTMLAttributes)}> + {icon || label} + + )} + ); + if (tooltipContent) { + return ( + + {content} + + ); + } else { + return {content}; + } } else { - const spanTitle = title || label; - if (spanTitle && typeof spanTitle !== 'string') { - console.warn( - `Only string titles are permitted on badges that do not use tooltips. Found: ${typeof spanTitle}` + if (tooltipContent) { + return ( + + + {icon || label} + + + ); + } else { + const spanTitle = title || label; + if (spanTitle && typeof spanTitle !== 'string') { + console.warn( + `Only string titles are permitted on badges that do not use tooltips. Found: ${typeof spanTitle}` + ); + } + return ( + + {icon || label} + ); } - return ( - - {icon || label} - - ); } + + // if (tooltipContent) { + // return ( + // + // + // {icon || label} + // + // + // ); + // } else { + // const spanTitle = title || label; + // if (spanTitle && typeof spanTitle !== 'string') { + // console.warn( + // `Only string titles are permitted on badges that do not use tooltips. Found: ${typeof spanTitle}` + // ); + // } + // return ( + // + // {icon || label} + // + // ); + // } }; From 16579efdd04ab1eb19d5be26cc89cc68d344ef1d Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 12 May 2021 16:15:58 -0700 Subject: [PATCH 02/11] update colors --- src/components/badge/beta_badge/_beta_badge.scss | 2 +- .../badge/notification_badge/_notification_badge.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss index fb2f96ba6dc..f03008e5983 100644 --- a/src/components/badge/beta_badge/_beta_badge.scss +++ b/src/components/badge/beta_badge/_beta_badge.scss @@ -41,7 +41,7 @@ } .euiBetaBadge--accent { - $backgroundColor: $euiColorAccent; + $backgroundColor: $euiColorAccentText; background: $backgroundColor; color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); } \ No newline at end of file diff --git a/src/components/badge/notification_badge/_notification_badge.scss b/src/components/badge/notification_badge/_notification_badge.scss index 14db7416aa2..78cdd44ca8f 100644 --- a/src/components/badge/notification_badge/_notification_badge.scss +++ b/src/components/badge/notification_badge/_notification_badge.scss @@ -14,7 +14,7 @@ transition: all $euiAnimSpeedFast ease-in; cursor: default; - $backgroundColor: $euiColorAccent; + $backgroundColor: $euiColorAccentText; background: $backgroundColor; color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); } From ca3ae831fb2adadb4fbb7ec51f2635fa176d47f5 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 13 May 2021 18:05:15 -0700 Subject: [PATCH 03/11] update snaps --- src-docs/src/views/badge/badge_example.js | 2 + src-docs/src/views/badge/beta_badge.js | 43 +++++++++----- .../__snapshots__/beta_badge.test.tsx.snap | 45 ++++++++++++++ .../badge/beta_badge/_beta_badge.scss | 21 +++++++ .../badge/beta_badge/beta_badge.test.tsx | 24 +++++++- .../badge/beta_badge/beta_badge.tsx | 59 +++++++++---------- 6 files changed, 146 insertions(+), 48 deletions(-) diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index 2013d9dace4..708b12563a8 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -308,6 +308,8 @@ export const BadgeExample = { 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. + Beta badges can also be made clickable by passing{' '} + href or onClick as needed.

They can also be used in conjunction with{' '} diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js index b5a66e96d75..e87c16091ca 100644 --- a/src-docs/src/views/badge/beta_badge.js +++ b/src-docs/src/views/badge/beta_badge.js @@ -2,23 +2,36 @@ import React from 'react'; import { EuiBetaBadge, EuiSpacer, EuiTitle } from '../../../../src/components'; +const colors = ['hollow', 'accent', 'subdued']; + export default () => (

- -   - -   - -   - - + {colors.map((item, index) => ( +
+ +   + +   + +   + +   + +   + + +
+ ))} +

Beta badges will also line up nicely with titles   diff --git a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap index de3316ccf44..6b3d4c7b8c2 100644 --- a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap +++ b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap @@ -10,3 +10,48 @@ exports[`EuiBetaBadge is rendered 1`] = ` Beta `; + +exports[`EuiBetaBadge props color accent is rendered 1`] = ` + + Beta + +`; + +exports[`EuiBetaBadge props color hollow is rendered 1`] = ` + + Beta + +`; + +exports[`EuiBetaBadge props color subdued is rendered 1`] = ` + + Beta + +`; + +exports[`EuiBetaBadge props size m is rendered 1`] = ` + + Beta + +`; + +exports[`EuiBetaBadge props size s is rendered 1`] = ` + + Beta + +`; diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss index f03008e5983..cd25ce2f74a 100644 --- a/src/components/badge/beta_badge/_beta_badge.scss +++ b/src/components/badge/beta_badge/_beta_badge.scss @@ -21,6 +21,12 @@ &:not(.euiBetaBadge--hollow) { box-shadow: none; } + + &.euiBetaBadge--small { + @include fontSize($euiFontSize * .625) + line-height: $euiSize + $euiSizeXS; + padding: 0 $euiSizeM; + } } // When it's just an icon, make it a circle @@ -32,6 +38,21 @@ position: relative; margin-top: -1px; } + + &.euiBetaBadge--small { + width: $euiSize + $euiSizeXS; + padding: 0; + } +} + +.euiBetaBadge--singleLetter { + padding: 0 0 0 1px; + width: $euiSizeL; + + &.euiBetaBadge--small { + width: $euiSize + $euiSizeXS; + padding: 0 0 0 1px; + } } .euiBetaBadge--subdued { diff --git a/src/components/badge/beta_badge/beta_badge.test.tsx b/src/components/badge/beta_badge/beta_badge.test.tsx index 25a01d31b32..7bd45323947 100644 --- a/src/components/badge/beta_badge/beta_badge.test.tsx +++ b/src/components/badge/beta_badge/beta_badge.test.tsx @@ -21,7 +21,7 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../../test'; -import { EuiBetaBadge } from './beta_badge'; +import { EuiBetaBadge, COLORS, SIZES } from './beta_badge'; describe('EuiBetaBadge', () => { test('is rendered', () => { @@ -29,4 +29,26 @@ describe('EuiBetaBadge', () => { expect(component).toMatchSnapshot(); }); + + describe('props', () => { + describe('color', () => { + COLORS.forEach((color) => { + test(`${color} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); + + describe('size', () => { + SIZES.forEach((size) => { + test(`${size} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); + }); }); diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx index 92e578b33d8..fa7c83d9689 100644 --- a/src/components/badge/beta_badge/beta_badge.tsx +++ b/src/components/badge/beta_badge/beta_badge.tsx @@ -43,8 +43,17 @@ const colorToClassMap = { hollow: 'euiBetaBadge--hollow', }; -export const COLORS: BadgeNotificationColor[] = keysOf(colorToClassMap); -export type BadgeNotificationColor = keyof typeof colorToClassMap; +export const COLORS: BetaBadgeColor[] = keysOf(colorToClassMap); +export type BetaBadgeColor = keyof typeof colorToClassMap; + +export type BetaBadgeSize = 's' | 'm'; + +export const sizeToClassMap: { [size in BetaBadgeSize]: string | null } = { + s: 'euiBetaBadge--small', + m: null, +}; + +export const SIZES = keysOf(sizeToClassMap); type WithButtonProps = { /** @@ -116,7 +125,11 @@ type BadgeProps = { * otherwise the label will be used */ title?: string; - color?: BadgeNotificationColor; + /** + * Accepts accent, subdued and hollow. + */ + color?: BetaBadgeColor; + size?: BetaBadgeSize; } & ExclusiveUnion; export type EuiBetaBadgeProps = CommonProps & @@ -139,14 +152,24 @@ export const EuiBetaBadge: FunctionComponent = ({ href, rel, target, + size = 'm', ...rest }) => { + let singleLetter = false; + if (typeof label === 'string' && label.length === 1) { + singleLetter = true; + } + const classes = classNames( 'euiBetaBadge', { 'euiBetaBadge--iconOnly': iconType, }, + { + 'euiBetaBadge--singleLetter': singleLetter, + }, colorToClassMap[color], + sizeToClassMap[size], className ); @@ -156,7 +179,7 @@ export const EuiBetaBadge: FunctionComponent = ({

+ +

Clickable beta badges

+ + + alert('Goes to Lens')} + /> +   +
); diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss index cd25ce2f74a..6434ac57488 100644 --- a/src/components/badge/beta_badge/_beta_badge.scss +++ b/src/components/badge/beta_badge/_beta_badge.scss @@ -23,10 +23,15 @@ } &.euiBetaBadge--small { - @include fontSize($euiFontSize * .625) + @include fontSize($euiFontSize * .625); line-height: $euiSize + $euiSizeXS; padding: 0 $euiSizeM; } + + &.euiBetaBadge-isClickable { + color: inherit; + } + } // When it's just an icon, make it a circle @@ -59,10 +64,18 @@ $backgroundColor: tint($euiColorLightShade, 30%); background: $backgroundColor; color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); + + &.euiBetaBadge-isClickable { + color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); + } } .euiBetaBadge--accent { $backgroundColor: $euiColorAccentText; background: $backgroundColor; color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); + + &.euiBetaBadge-isClickable { + color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); + } } \ No newline at end of file diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx index fa7c83d9689..244b0bb13ba 100644 --- a/src/components/badge/beta_badge/beta_badge.tsx +++ b/src/components/badge/beta_badge/beta_badge.tsx @@ -168,6 +168,9 @@ export const EuiBetaBadge: FunctionComponent = ({ { 'euiBetaBadge--singleLetter': singleLetter, }, + { + 'euiBetaBadge-isClickable': onClick || href, + }, colorToClassMap[color], sizeToClassMap[size], className diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap index f2597f4b472..51e530b358f 100644 --- a/src/components/card/__snapshots__/card.test.tsx.snap +++ b/src/components/card/__snapshots__/card.test.tsx.snap @@ -1,5 +1,42 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`EuiCard betaBadgeProps renders href 1`] = ` +
+
+ + Card title + +
+

+ Card description +

+
+
+ + + Link + + +
+`; + exports[`EuiCard horizontal selectable 1`] = `
{ expect(component).toMatchSnapshot(); }); + + test('betaBadgeProps renders href', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); }); diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index 98964edb53a..d1a69d7cb31 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -30,7 +30,7 @@ import { CommonProps, ExclusiveUnion, keysOf } from '../common'; import { getSecureRelForTarget } from '../../services'; import { EuiText } from '../text'; import { EuiTitle } from '../title'; -import { EuiBetaBadge } from '../badge/beta_badge'; +import { EuiBetaBadge, EuiBetaBadgeProps } from '../badge/beta_badge'; import { EuiIconProps } from '../icon'; import { EuiCardSelect, @@ -147,6 +147,10 @@ export type EuiCardProps = Omit & * Optional title will be supplied as tooltip title or title attribute otherwise the label will be used */ betaBadgeTitle?: string; + betaBadgeProps?: Omit< + EuiBetaBadgeProps, + 'label' | 'tooltipContent' | 'title' + >; /** * Matches to the color property of EuiPanel. If defined, removes any border & shadow. * Leave as `undefined` to display as a default panel. @@ -192,6 +196,7 @@ export const EuiCard: FunctionComponent = ({ betaBadgeLabel, betaBadgeTooltipContent, betaBadgeTitle, + betaBadgeProps, layout = 'vertical', selectable, display, @@ -298,6 +303,7 @@ export const EuiCard: FunctionComponent = ({ label={betaBadgeLabel} title={betaBadgeTitle} tooltipContent={betaBadgeTooltipContent} + {...betaBadgeProps} className="euiCard__betaBadge" /> diff --git a/src/global_styling/mixins/_beta_badge.scss b/src/global_styling/mixins/_beta_badge.scss index c75f526c349..b7c676b4682 100644 --- a/src/global_styling/mixins/_beta_badge.scss +++ b/src/global_styling/mixins/_beta_badge.scss @@ -24,7 +24,11 @@ #{$selector}__betaBadge { overflow: hidden; text-overflow: ellipsis; - background-color: $euiColorEmptyShade; + + &.euiBetaBadge--hollow { + background-color: $euiColorEmptyShade; + color: inherit; + } } } } From d53379d0f00583ae3f13cd9ba4a0d14e26fa30cf Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 20 May 2021 17:06:46 -0700 Subject: [PATCH 06/11] clickable badge, disabled card --- src-docs/src/views/card/card_beta.js | 25 ++++++++++++++++--- .../badge/beta_badge/_beta_badge.scss | 11 +++++--- .../badge/beta_badge/beta_badge.tsx | 4 --- src/components/card/_card.scss | 15 +++++++++++ src/global_styling/mixins/_beta_badge.scss | 5 ---- 5 files changed, 44 insertions(+), 16 deletions(-) diff --git a/src-docs/src/views/card/card_beta.js b/src-docs/src/views/card/card_beta.js index 2397e1ad2b3..610eb50d04b 100644 --- a/src-docs/src/views/card/card_beta.js +++ b/src-docs/src/views/card/card_beta.js @@ -7,8 +7,8 @@ import { EuiFlexItem, } from '../../../../src/components'; -const icons = ['dashboard', 'monitoring', 'watches']; -const badges = [null, 'Beta', 'Lab']; +const icons = ['dashboard', 'monitoring']; +const badges = [null, 'Beta']; const cardNodes = icons.map(function (item, index) { return ( @@ -29,4 +29,23 @@ const cardNodes = icons.map(function (item, index) { ); }); -export default () => {cardNodes} ; +export default () => ( + + {cardNodes} + + } + title="Lens" + isDisabled + description="Disabled cards can have active links using EuiBetaBadge." + betaBadgeProps={{ + href: 'http://www.elastic.co/subscriptions', + target: '_blank', + }} + betaBadgeLabel="Basic" + betaBadgeTooltipContent="This feature requires a Basic License" + onClick={() => {}} + /> + + +); diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss index 6434ac57488..6010065f358 100644 --- a/src/components/badge/beta_badge/_beta_badge.scss +++ b/src/components/badge/beta_badge/_beta_badge.scss @@ -28,10 +28,6 @@ padding: 0 $euiSizeM; } - &.euiBetaBadge-isClickable { - color: inherit; - } - } // When it's just an icon, make it a circle @@ -70,6 +66,13 @@ } } +.euiBetaBadge--hollow { + &.euiBetaBadge-isClickable { + $backgroundColor: tint($euiColorLightShade, 30%); + color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); + } +} + .euiBetaBadge--accent { $backgroundColor: $euiColorAccentText; background: $backgroundColor; diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx index 244b0bb13ba..e9bb3b5db10 100644 --- a/src/components/badge/beta_badge/beta_badge.tsx +++ b/src/components/badge/beta_badge/beta_badge.tsx @@ -164,11 +164,7 @@ export const EuiBetaBadge: FunctionComponent = ({ 'euiBetaBadge', { 'euiBetaBadge--iconOnly': iconType, - }, - { 'euiBetaBadge--singleLetter': singleLetter, - }, - { 'euiBetaBadge-isClickable': onClick || href, }, colorToClassMap[color], diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 3a5ace0e969..070d0521110 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -29,6 +29,16 @@ color: $euiColorDisabledText; cursor: inherit; } + + .euiCard__betaBadge:not(.euiBetaBadge-isClickable):not(.euiBetaBadge--hollow) { + box-shadow: inset 0 0 0 1px $euiBorderColor; + background: transparent; + color: inherit; + } + + .euiCard__betaBadge:not(.euiBetaBadge-isClickable).euiBetaBadge--hollow { + background-color: $euiColorEmptyShade; + } } &.euiCard--isClickable { @@ -91,10 +101,15 @@ // This creates a bunch of sub selectors for the beta badge @include euiHasBetaBadge($selector: '.euiCard', $spacing: $euiCardSpacing); +.euiCard__betaBadge.euiBetaBadge--hollow { + background-color: $euiColorEmptyShade; +} + .euiCard--isSelectable { position: relative; } + @each $modifier, $paddingAmount in $euiPanelPaddingModifiers { .euiCard[class*='#{$modifier}'] { padding: $paddingAmount; diff --git a/src/global_styling/mixins/_beta_badge.scss b/src/global_styling/mixins/_beta_badge.scss index b7c676b4682..8900d3c5900 100644 --- a/src/global_styling/mixins/_beta_badge.scss +++ b/src/global_styling/mixins/_beta_badge.scss @@ -24,11 +24,6 @@ #{$selector}__betaBadge { overflow: hidden; text-overflow: ellipsis; - - &.euiBetaBadge--hollow { - background-color: $euiColorEmptyShade; - color: inherit; - } } } } From 954d63c7540a7f9615b27fededa18e6256d81f90 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 25 May 2021 12:56:02 -0700 Subject: [PATCH 07/11] allowing for all props under EuiBetaBadgeProps --- src/components/card/card.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index d1a69d7cb31..8d28c96ee08 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -147,10 +147,7 @@ export type EuiCardProps = Omit & * Optional title will be supplied as tooltip title or title attribute otherwise the label will be used */ betaBadgeTitle?: string; - betaBadgeProps?: Omit< - EuiBetaBadgeProps, - 'label' | 'tooltipContent' | 'title' - >; + betaBadgeProps?: Partial; /** * Matches to the color property of EuiPanel. If defined, removes any border & shadow. * Leave as `undefined` to display as a default panel. @@ -300,11 +297,14 @@ export const EuiCard: FunctionComponent = ({ ); From b139957bd6923e9b327b8e8fbc9ab39f4d6ff564 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 26 May 2021 11:20:36 -0700 Subject: [PATCH 08/11] Update src/components/card/card.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/components/card/card.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index 8d28c96ee08..dcd25ca208e 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -144,7 +144,8 @@ export type EuiCardProps = Omit & betaBadgeTooltipContent?: ReactNode; /** - * Optional title will be supplied as tooltip title or title attribute otherwise the label will be used + * Optional title will be supplied as tooltip title or title attribute otherwise the label will be used. + * **DEPRECATED: Use `betaBadgeProps.title` instead.** */ betaBadgeTitle?: string; betaBadgeProps?: Partial; From b9c0e612a3adf2a7a757301cbfb115fec5a9d419 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 26 May 2021 11:20:54 -0700 Subject: [PATCH 09/11] Update src/components/badge/beta_badge/beta_badge.tsx Co-authored-by: Greg Thompson --- src/components/badge/beta_badge/beta_badge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx index e9bb3b5db10..802c75f3c1b 100644 --- a/src/components/badge/beta_badge/beta_badge.tsx +++ b/src/components/badge/beta_badge/beta_badge.tsx @@ -212,7 +212,7 @@ export const EuiBetaBadge: FunctionComponent = ({ } + ref={ref} title={innerText} {...(relObj as HTMLAttributes)} {...(rest as HTMLAttributes)}> From e7e478d4cdbc9335daa9205a19b544c66ceb16bb Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 26 May 2021 12:31:11 -0700 Subject: [PATCH 10/11] fix axe error --- .../badge/beta_badge/beta_badge.tsx | 25 +++++++------------ .../card/__snapshots__/card.test.tsx.snap | 1 + 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx index 802c75f3c1b..7d0cb932f7a 100644 --- a/src/components/badge/beta_badge/beta_badge.tsx +++ b/src/components/badge/beta_badge/beta_badge.tsx @@ -24,7 +24,6 @@ import React, { HTMLAttributes, MouseEventHandler, ReactNode, - Ref, } from 'react'; import classNames from 'classnames'; import { CommonProps, ExclusiveUnion, keysOf } from '../../common'; @@ -35,8 +34,6 @@ import { EuiToolTip, ToolTipPositions } from '../../tool_tip'; import { EuiIcon, IconType } from '../../icon'; -import { EuiInnerText } from '../../inner_text'; - const colorToClassMap = { accent: 'euiBetaBadge--accent', subdued: 'euiBetaBadge--subdued', @@ -206,20 +203,16 @@ export const EuiBetaBadge: FunctionComponent = ({ let content; if (onClick || href) { + const spanTitle = title || label; content = ( - - {(ref, innerText) => ( - )} - {...(rest as HTMLAttributes)}> - {icon || label} - - )} - + )} + {...(rest as HTMLAttributes)}> + {icon || label} + ); if (tooltipContent) { return ( diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap index 51e530b358f..36de13e3b12 100644 --- a/src/components/card/__snapshots__/card.test.tsx.snap +++ b/src/components/card/__snapshots__/card.test.tsx.snap @@ -30,6 +30,7 @@ exports[`EuiCard betaBadgeProps renders href 1`] = ` href="http://www.elastic.co/" id="generated-idBetaBadge" rel="" + title="Link" > Link From 36ea7abe8692e6609d42b8c35c282a785e0ad1c3 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 27 May 2021 10:03:51 -0500 Subject: [PATCH 11/11] ts --- .../badge/beta_badge/beta_badge.tsx | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx index 7d0cb932f7a..58bcf2193af 100644 --- a/src/components/badge/beta_badge/beta_badge.tsx +++ b/src/components/badge/beta_badge/beta_badge.tsx @@ -76,16 +76,16 @@ type WithSpanProps = Omit< >; // `label` prop can be a `ReactNode` only if `title` or `tooltipContent` is provided -type LabelAsNode = ( - | { - title: string; - tooltipContent?: ReactNode; - } - | { - tooltipContent: ReactNode; - title?: string; - } -) & { +type LabelAsNode = ExclusiveUnion< + { + title: string; + tooltipContent?: ReactNode; + }, + { + tooltipContent: ReactNode; + title?: string; + } +> & { label: ReactNode; }; @@ -203,12 +203,11 @@ export const EuiBetaBadge: FunctionComponent = ({ let content; if (onClick || href) { - const spanTitle = title || label; content = ( )} {...(rest as HTMLAttributes)}> {icon || label} @@ -246,10 +245,7 @@ export const EuiBetaBadge: FunctionComponent = ({ ); } return ( - + {icon || label} );