diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index 7dc67786983..2e4f0ca88d4 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -248,7 +248,7 @@ export const BadgeExample = { title: 'Beta badge type', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: betaBadgeSource, }, ], diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js deleted file mode 100644 index 9db3c717b9b..00000000000 --- a/src-docs/src/views/badge/beta_badge.js +++ /dev/null @@ -1,60 +0,0 @@ -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   - -

- - -

Clickable beta badges

- - - alert('Goes to Lens')} - /> -   - -
-); diff --git a/src-docs/src/views/badge/beta_badge.tsx b/src-docs/src/views/badge/beta_badge.tsx new file mode 100644 index 00000000000..8f0c6213dec --- /dev/null +++ b/src-docs/src/views/badge/beta_badge.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { css } from '@emotion/react'; + +import { EuiBetaBadge, EuiSpacer, EuiTitle } from '../../../../src/components'; + +const colors = ['hollow', 'accent', 'subdued'] as const; + +export default () => ( + <> +
+ {colors.map((item) => ( + <> + + + + + + + + ))} +
+ + +

+ Beta badges will also line up nicely with titles   + +

+ + + +

Clickable beta badges

+ + +
+ alert('Goes to Lens')} + /> + +
+ +); diff --git a/src/components/badge/_index.scss b/src/components/badge/_index.scss deleted file mode 100644 index f35a82d92fb..00000000000 --- a/src/components/badge/_index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'badge_group/index'; -@import 'beta_badge/index'; -@import 'notification_badge/index'; diff --git a/src/components/badge/badge_group/__snapshots__/badge_group.test.tsx.snap b/src/components/badge/badge_group/__snapshots__/badge_group.test.tsx.snap index 18b270c05e1..e77c89dd12f 100644 --- a/src/components/badge/badge_group/__snapshots__/badge_group.test.tsx.snap +++ b/src/components/badge/badge_group/__snapshots__/badge_group.test.tsx.snap @@ -2,43 +2,39 @@ exports[`EuiBadgeGroup gutterSize none is rendered 1`] = `
`; exports[`EuiBadgeGroup gutterSize s is rendered 1`] = `
`; exports[`EuiBadgeGroup gutterSize xs is rendered 1`] = `
`; exports[`EuiBadgeGroup is rendered 1`] = `
- - Content - + Content diff --git a/src/components/badge/badge_group/_badge_group.scss b/src/components/badge/badge_group/_badge_group.scss deleted file mode 100644 index a1a0b0ec5d3..00000000000 --- a/src/components/badge/badge_group/_badge_group.scss +++ /dev/null @@ -1,23 +0,0 @@ -$euiBadgeGroupGutterTypes: ( - gutterExtraSmall: $euiSizeXS, - gutterSmall: $euiSizeS, -); - -.euiBadgeGroup__item { - display: inline-block; - max-width: 100%; -} - -// Gutter Sizes -@each $gutterName, $gutterSize in $euiBadgeGroupGutterTypes { - $halfGutterSize: $gutterSize * .5; - - .euiBadgeGroup--#{$gutterName} { - margin: -$halfGutterSize; - - & > .euiBadgeGroup__item { - margin: $halfGutterSize; - max-width: calc(100% - #{$gutterSize}); - } - } -} diff --git a/src/components/badge/badge_group/_index.scss b/src/components/badge/badge_group/_index.scss deleted file mode 100644 index 21500c4a8cf..00000000000 --- a/src/components/badge/badge_group/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import './badge_group'; diff --git a/src/components/badge/badge_group/badge_group.styles.ts b/src/components/badge/badge_group/badge_group.styles.ts new file mode 100644 index 00000000000..2258dcc7a4c --- /dev/null +++ b/src/components/badge/badge_group/badge_group.styles.ts @@ -0,0 +1,34 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { logicalCSS } from '../../../global_styling'; +import { UseEuiTheme } from '../../../services'; + +export const euiBadgeGroupStyles = ({ euiTheme }: UseEuiTheme) => { + return { + euiBadgeGroup: css` + display: inline-flex; + flex-wrap: wrap; + ${logicalCSS('max-width', '100%')} + + // Override the .euiBadge + .euiBadge CSS in badge.styles.ts + .euiBadge { + ${logicalCSS('margin-left', 0)} + } + `, + // Gutter sizes + none: css``, + s: css` + gap: ${euiTheme.size.s}; + `, + xs: css` + gap: ${euiTheme.size.xs}; + `, + }; +}; diff --git a/src/components/badge/badge_group/badge_group.test.tsx b/src/components/badge/badge_group/badge_group.test.tsx index 455a42bc282..20d844315b7 100644 --- a/src/components/badge/badge_group/badge_group.test.tsx +++ b/src/components/badge/badge_group/badge_group.test.tsx @@ -9,11 +9,14 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../../test/required_props'; +import { shouldRenderCustomStyles } from '../../../test/internal'; import { EuiBadge } from '../badge'; import { EuiBadgeGroup, GUTTER_SIZES } from './badge_group'; describe('EuiBadgeGroup', () => { + shouldRenderCustomStyles(); + test('is rendered', () => { const component = render( diff --git a/src/components/badge/badge_group/badge_group.tsx b/src/components/badge/badge_group/badge_group.tsx index 02f64c3c663..29ae779d684 100644 --- a/src/components/badge/badge_group/badge_group.tsx +++ b/src/components/badge/badge_group/badge_group.tsx @@ -8,16 +8,13 @@ import React, { forwardRef, HTMLAttributes, Ref, ReactNode } from 'react'; import classNames from 'classnames'; -import { CommonProps, keysOf } from '../../common'; +import { CommonProps } from '../../common'; +import { useEuiTheme } from '../../../services'; -const gutterSizeToClassNameMap = { - none: null, - xs: 'euiBadgeGroup--gutterExtraSmall', - s: 'euiBadgeGroup--gutterSmall', -}; +import { euiBadgeGroupStyles } from './badge_group.styles'; -export const GUTTER_SIZES = keysOf(gutterSizeToClassNameMap); -type BadgeGroupGutterSize = keyof typeof gutterSizeToClassNameMap; +export const GUTTER_SIZES = ['none', 'xs', 's'] as const; +type BadgeGroupGutterSize = typeof GUTTER_SIZES[number]; export interface EuiBadgeGroupProps { /** @@ -25,8 +22,7 @@ export interface EuiBadgeGroupProps { */ gutterSize?: BadgeGroupGutterSize; /** - * Should be a list of EuiBadge's but can also be any other element - * Will apply an extra class to add spacing + * Should be a list of `EuiBadge`s, but can also be any other element */ children?: ReactNode; } @@ -39,17 +35,16 @@ export const EuiBadgeGroup = forwardRef< { children, className, gutterSize = 'xs', ...rest }, ref: Ref ) => { - const classes = classNames( - 'euiBadgeGroup', - gutterSizeToClassNameMap[gutterSize as BadgeGroupGutterSize], - className - ); + const euiTheme = useEuiTheme(); + + const styles = euiBadgeGroupStyles(euiTheme); + const cssStyles = [styles.euiBadgeGroup, styles[gutterSize]]; + + const classes = classNames('euiBadgeGroup', className); return ( -
- {React.Children.map(children, (child: ReactNode) => ( - {child} - ))} +
+ {children}
); } 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 aaf2530f6db..e4b97cf2866 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`] = ` @@ -13,7 +13,7 @@ exports[`EuiBetaBadge is rendered 1`] = ` exports[`EuiBetaBadge props color accent is rendered 1`] = ` Beta @@ -22,7 +22,7 @@ exports[`EuiBetaBadge props color accent is rendered 1`] = ` exports[`EuiBetaBadge props color hollow is rendered 1`] = ` Beta @@ -31,16 +31,39 @@ exports[`EuiBetaBadge props color hollow is rendered 1`] = ` exports[`EuiBetaBadge props color subdued is rendered 1`] = ` Beta `; +exports[`EuiBetaBadge props iconType 1`] = ` + + +`; + +exports[`EuiBetaBadge props single letter 1`] = ` + + B + +`; + exports[`EuiBetaBadge props size m is rendered 1`] = ` Beta @@ -49,7 +72,7 @@ exports[`EuiBetaBadge props size m is rendered 1`] = ` exports[`EuiBetaBadge props size s is rendered 1`] = ` Beta @@ -62,7 +85,7 @@ exports[`EuiBetaBadge props tooltip and anchorProps are rendered 1`] = ` data-test-subj="DTS" > diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss deleted file mode 100644 index 30609421115..00000000000 --- a/src/components/badge/beta_badge/_beta_badge.scss +++ /dev/null @@ -1,91 +0,0 @@ -.euiBetaBadge { - display: inline-block; - padding: 0 $euiSize; - border-radius: $euiSizeL; - box-shadow: inset 0 0 0 1px $euiBorderColor; - vertical-align: super; // if displayed inline with text - - font-size: $euiFontSizeXS; - font-weight: $euiFontWeightBold; - text-transform: uppercase; - letter-spacing: .05em; - line-height: $euiSizeL; - text-align: center; - white-space: nowrap; - cursor: default; - overflow: hidden; - text-overflow: ellipsis; - - &:focus { - @include euiFocusRing; - // Can't use `currentColor` because of possible white text, so always keep it black - outline-color: lightOrDarkTheme($euiColorInk, $euiColorGhost); - // The rounded corners of the badge doesn't match well with the outline, so push it outward - outline-offset: 2px; - } - - &: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 -.euiBetaBadge--iconOnly { - padding: 0; - width: $euiSizeL; - - .euiBetaBadge__icon { - position: relative; - transform: translate(0, -1px); - } - - &.euiBetaBadge--small { - width: $euiSize + $euiSizeXS; - padding: 0; - } -} - -.euiBetaBadge--singleLetter { - padding: 0; - width: $euiSizeL; - - &.euiBetaBadge--small { - width: $euiSize + $euiSizeXS; - padding: 0; - } -} - -.euiBetaBadge--subdued { - $backgroundColor: tint($euiColorLightShade, 30%); - background: $backgroundColor; - color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); - - &.euiBetaBadge-isClickable { - color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); - } -} - -.euiBetaBadge--hollow { - background-color: $euiColorEmptyShade; - - &.euiBetaBadge-isClickable { - $backgroundColor: tint($euiColorLightShade, 30%); - color: chooseLightOrDarkText($euiColorEmptyShade, $euiColorGhost, $euiColorInk); - } -} - -.euiBetaBadge--accent { - $backgroundColor: $euiColorAccentText; - background: $backgroundColor; - color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); - - &.euiBetaBadge-isClickable { - color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); - } -} diff --git a/src/components/badge/beta_badge/_index.scss b/src/components/badge/beta_badge/_index.scss deleted file mode 100644 index 10c53901b29..00000000000 --- a/src/components/badge/beta_badge/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'beta_badge'; diff --git a/src/components/badge/beta_badge/beta_badge.styles.ts b/src/components/badge/beta_badge/beta_badge.styles.ts new file mode 100644 index 00000000000..b5b5cdef519 --- /dev/null +++ b/src/components/badge/beta_badge/beta_badge.styles.ts @@ -0,0 +1,104 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { + logicalCSS, + euiFocusRing, + euiFontSizeFromScale, + euiTextTruncate, + mathWithUnits, +} from '../../../global_styling'; +import { UseEuiTheme, tint, isColorDark, hexToRgb } from '../../../services'; + +export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme, colorMode } = euiThemeContext; + + return { + euiBetaBadge: css` + display: inline-block; + vertical-align: super; // if displayed inline with text + border-radius: ${euiTheme.size.l}; + cursor: default; + + font-weight: ${euiTheme.font.weight.bold}; + text-transform: uppercase; + letter-spacing: 0.05em; + text-align: center; + ${euiTextTruncate()} + + &:focus { + ${euiFocusRing(euiThemeContext, 'outset', { + color: + colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink, + })} + } + `, + // Colors + accent: css` + ${getBadgeColors(euiTheme.colors.accentText, euiThemeContext)} + `, + subdued: css` + ${getBadgeColors(tint(euiTheme.colors.lightShade, 0.3), euiThemeContext)} + `, + hollow: css` + ${getBadgeColors(euiTheme.colors.emptyShade, euiThemeContext)} + box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} + ${euiTheme.border.color}; + `, + // Font sizes + m: css` + font-size: ${euiFontSizeFromScale('xs', euiTheme)}; + line-height: ${euiTheme.size.l}; + `, + s: css` + font-size: 0.625rem; + line-height: ${mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base)}; + `, + // Padding/width sizes + badgeSizes: { + default: { + m: ` + ${logicalCSS('padding-horizontal', euiTheme.size.base)}`, + s: ` + ${logicalCSS('padding-horizontal', euiTheme.size.m)}`, + }, + // When it's just an icon or a single letter, make the badge a circle + circle: { + m: ` + ${logicalCSS('width', euiTheme.size.l)} + `, + s: ` + ${logicalCSS( + 'width', + mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base) + )} + `, + }, + }, + euiBetaBadge__icon: css` + position: relative; + transform: translate(0, -1px); + `, + }; +}; + +// Util for detecting text color based on badge bg color +export const getBadgeColors = ( + backgroundColor: string, + { euiTheme }: UseEuiTheme +) => { + const textColor = isColorDark(...hexToRgb(backgroundColor)) + ? euiTheme.colors.ghost + : euiTheme.colors.ink; + + return ` + background-color: ${backgroundColor}; + color: ${textColor}; + `; +}; diff --git a/src/components/badge/beta_badge/beta_badge.test.tsx b/src/components/badge/beta_badge/beta_badge.test.tsx index 165fc3e6f71..7537cdef2d8 100644 --- a/src/components/badge/beta_badge/beta_badge.test.tsx +++ b/src/components/badge/beta_badge/beta_badge.test.tsx @@ -46,6 +46,18 @@ describe('EuiBetaBadge', () => { }); }); + test('iconType', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + + test('single letter', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + test('tooltip and anchorProps are rendered', () => { const component = render( = ({ size = 'm', ...rest }) => { - let singleLetter = false; - if (typeof label === 'string' && label.length === 1) { - singleLetter = true; - } + const euiTheme = useEuiTheme(); + + const singleLetter = !!(typeof label === 'string' && label.length === 1); + const isCircular = iconType || singleLetter; - const classes = classNames( - 'euiBetaBadge', - { - 'euiBetaBadge--iconOnly': iconType, - 'euiBetaBadge--singleLetter': singleLetter, - 'euiBetaBadge-isClickable': onClick || href, - }, - colorToClassMap[color], - sizeToClassMap[size], - className - ); + const classes = classNames('euiBetaBadge', className); + + const styles = euiBetaBadgeStyles(euiTheme); + const cssStyles = [ + styles.euiBetaBadge, + styles[color], + styles[size], + isCircular + ? styles.badgeSizes.circle[size] + : styles.badgeSizes.default[size], + ]; let icon: JSX.Element | undefined; if (iconType) { icon = ( = ({ content = ( )} @@ -234,7 +226,13 @@ export const EuiBetaBadge: FunctionComponent = ({ title={title || label} anchorProps={anchorProps} > - + {icon || label} @@ -247,7 +245,12 @@ export const EuiBetaBadge: FunctionComponent = ({ ); } return ( - + {icon || label} ); diff --git a/src/components/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap b/src/components/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap index 1e7152aca1b..53953cf5180 100644 --- a/src/components/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap +++ b/src/components/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiNotificationBadge is rendered 1`] = ` 5 @@ -12,7 +12,7 @@ exports[`EuiNotificationBadge is rendered 1`] = ` exports[`EuiNotificationBadge props color accent is rendered 1`] = ` 5 @@ -20,7 +20,7 @@ exports[`EuiNotificationBadge props color accent is rendered 1`] = ` exports[`EuiNotificationBadge props color subdued is rendered 1`] = ` 5 @@ -28,7 +28,7 @@ exports[`EuiNotificationBadge props color subdued is rendered 1`] = ` exports[`EuiNotificationBadge props size m is rendered 1`] = ` 5 @@ -36,7 +36,7 @@ exports[`EuiNotificationBadge props size m is rendered 1`] = ` exports[`EuiNotificationBadge props size s is rendered 1`] = ` 5 diff --git a/src/components/badge/notification_badge/_index.scss b/src/components/badge/notification_badge/_index.scss deleted file mode 100644 index 8a8d8e35481..00000000000 --- a/src/components/badge/notification_badge/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'notification_badge'; diff --git a/src/components/badge/notification_badge/_notification_badge.scss b/src/components/badge/notification_badge/_notification_badge.scss deleted file mode 100644 index 78cdd44ca8f..00000000000 --- a/src/components/badge/notification_badge/_notification_badge.scss +++ /dev/null @@ -1,34 +0,0 @@ -.euiNotificationBadge { - flex-shrink: 0; // Ensures it never scales down below its intended size - display: inline-block; - border-radius: $euiBorderRadius; - font-size: $euiFontSizeXS; - font-weight: $euiFontWeightMedium; - line-height: $euiSize; - height: $euiSize; - min-width: $euiSize; - padding-left: $euiSizeXS; - padding-right: $euiSizeXS; - vertical-align: middle; - text-align: center; - transition: all $euiAnimSpeedFast ease-in; - cursor: default; - - $backgroundColor: $euiColorAccentText; - background: $backgroundColor; - color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); -} - -.euiNotificationBadge--medium { - // Increase the default size a bit - $size: $euiSize + $euiSizeXS; - line-height: $size; - height: $size; - min-width: $euiSizeL; -} - -.euiNotificationBadge--subdued { - $backgroundColor: tint($euiColorLightShade, 30%); - background: $backgroundColor; - color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk); -} diff --git a/src/components/badge/notification_badge/badge_notification.styles.ts b/src/components/badge/notification_badge/badge_notification.styles.ts new file mode 100644 index 00000000000..0e38ca99c46 --- /dev/null +++ b/src/components/badge/notification_badge/badge_notification.styles.ts @@ -0,0 +1,64 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { + logicalCSS, + euiCanAnimate, + euiFontSizeFromScale, + euiNumberFormat, + mathWithUnits, +} from '../../../global_styling'; +import { UseEuiTheme, tint } from '../../../services'; + +import { getBadgeColors } from '../beta_badge/beta_badge.styles'; + +export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return { + euiNotificationBadge: css` + flex-shrink: 0; // Ensures it never scales down below its intended size + display: inline-block; + vertical-align: middle; + ${logicalCSS('padding-horizontal', euiTheme.size.xs)} + border-radius: ${euiTheme.border.radius.small}; + cursor: default; + + font-size: ${euiFontSizeFromScale('xs', euiTheme)}; + font-weight: ${euiTheme.font.weight.medium}; + ${euiNumberFormat(euiThemeContext)} + text-align: center; + + ${euiCanAnimate} { + transition: all ${euiTheme.animation.fast} ease-in; + } + `, + // Sizes + s: css` + line-height: ${euiTheme.size.base}; + ${logicalCSS('height', euiTheme.size.base)} + ${logicalCSS('min-width', euiTheme.size.base)} + `, + m: css` + line-height: ${mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base)}; + ${logicalCSS( + 'height', + mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base) + )} + ${logicalCSS('min-width', euiTheme.size.l)} + `, + // Colors + accent: css` + ${getBadgeColors(euiTheme.colors.accentText, euiThemeContext)} + `, + subdued: css` + ${getBadgeColors(tint(euiTheme.colors.lightShade, 0.3), euiThemeContext)} + `, + }; +}; diff --git a/src/components/badge/notification_badge/badge_notification.test.tsx b/src/components/badge/notification_badge/badge_notification.test.tsx index ba58e2d77a1..8d5fcabc217 100644 --- a/src/components/badge/notification_badge/badge_notification.test.tsx +++ b/src/components/badge/notification_badge/badge_notification.test.tsx @@ -9,10 +9,13 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../../test/required_props'; +import { shouldRenderCustomStyles } from '../../../test/internal'; import { EuiNotificationBadge, COLORS, SIZES } from './badge_notification'; describe('EuiNotificationBadge', () => { + shouldRenderCustomStyles(1); + test('is rendered', () => { const component = render( 5 diff --git a/src/components/badge/notification_badge/badge_notification.tsx b/src/components/badge/notification_badge/badge_notification.tsx index 075cfa0774e..054f32d6586 100644 --- a/src/components/badge/notification_badge/badge_notification.tsx +++ b/src/components/badge/notification_badge/badge_notification.tsx @@ -8,23 +8,16 @@ import React, { HTMLAttributes, ReactNode, FunctionComponent } from 'react'; import classNames from 'classnames'; -import { CommonProps, keysOf } from '../../common'; +import { CommonProps } from '../../common'; +import { useEuiTheme } from '../../../services'; -const colorToClassMap = { - accent: null, - subdued: 'euiNotificationBadge--subdued', -}; - -export const COLORS: BadgeNotificationColor[] = keysOf(colorToClassMap); -export type BadgeNotificationColor = keyof typeof colorToClassMap; +import { euiNotificationBadgeStyles } from './badge_notification.styles'; -const sizeToClassNameMap = { - s: null, - m: 'euiNotificationBadge--medium', -}; +export const COLORS = ['accent', 'subdued'] as const; +export type BadgeNotificationColor = typeof COLORS[number]; -export const SIZES: BadgeNotificationSize[] = keysOf(sizeToClassNameMap); -export type BadgeNotificationSize = keyof typeof sizeToClassNameMap; +export const SIZES = ['s', 'm'] as const; +export type BadgeNotificationSize = typeof SIZES[number]; export interface EuiNotificationBadgeProps extends CommonProps, @@ -44,15 +37,15 @@ export const EuiNotificationBadge: FunctionComponent color = 'accent', ...rest }) => { - const classes = classNames( - 'euiNotificationBadge', - sizeToClassNameMap[size], - colorToClassMap[color], - className - ); + const euiTheme = useEuiTheme(); + + const styles = euiNotificationBadgeStyles(euiTheme); + const cssStyles = [styles.euiNotificationBadge, styles[size], styles[color]]; + + const classes = classNames('euiNotificationBadge', className); return ( - + {children} ); diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap index 134f3993802..b75bbc0d28e 100644 --- a/src/components/card/__snapshots__/card.test.tsx.snap +++ b/src/components/card/__snapshots__/card.test.tsx.snap @@ -27,7 +27,7 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
6 @@ -123,7 +123,7 @@ exports[`EuiFacetButton props quantity is rendered 1`] = ` Content 60 diff --git a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap index 769c26704ea..25d9224e42f 100644 --- a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap +++ b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap @@ -140,7 +140,7 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters is rendered /> 5 @@ -166,7 +166,7 @@ exports[`EuiFilterButton props numFilters is rendered 1`] = ` /> 5 @@ -232,7 +232,7 @@ exports[`EuiFilterButton renders zero properly 1`] = ` /> 0 diff --git a/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap b/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap index 376bb23199a..f1dcfc52179 100644 --- a/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap +++ b/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap @@ -79,7 +79,7 @@ exports[`EuiHeaderSectionItemButton renders notification as a badge 1`] = ` class="euiHeaderSectionItemButton__content" /> 1 @@ -127,7 +127,7 @@ exports[`EuiHeaderSectionItemButton renders notification color 1`] = ` class="euiHeaderSectionItemButton__content" /> 1 diff --git a/src/components/index.scss b/src/components/index.scss index a868fcc3197..3316643d97a 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -1,7 +1,6 @@ // Components @import 'accordion/index'; -@import 'badge/index'; @import 'basic_table/index'; @import 'button/index'; @import 'code/index'; diff --git a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap index 4409b8dc5d7..7376f445735 100644 --- a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap +++ b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap @@ -106,7 +106,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = ` >