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 d0d55ed07bc..b34e7534767 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 @@ -4,7 +4,7 @@ exports[`EuiBetaBadge is rendered 1`] = ` @@ -13,10 +13,32 @@ exports[`EuiBetaBadge is rendered 1`] = ` `; +exports[`EuiBetaBadge props alignement baseline is rendered 1`] = ` + + + Beta + + +`; + +exports[`EuiBetaBadge props alignement middle is rendered 1`] = ` + + + Beta + + +`; + exports[`EuiBetaBadge props color accent is rendered 1`] = ` Beta @@ -27,7 +49,7 @@ exports[`EuiBetaBadge props color accent is rendered 1`] = ` exports[`EuiBetaBadge props color hollow is rendered 1`] = ` Beta @@ -38,7 +60,7 @@ exports[`EuiBetaBadge props color hollow is rendered 1`] = ` exports[`EuiBetaBadge props color subdued is rendered 1`] = ` Beta @@ -49,7 +71,7 @@ exports[`EuiBetaBadge props color subdued is rendered 1`] = ` exports[`EuiBetaBadge props iconType 1`] = ` B @@ -76,7 +98,7 @@ exports[`EuiBetaBadge props single letter 1`] = ` exports[`EuiBetaBadge props size m is rendered 1`] = ` Beta @@ -87,7 +109,7 @@ exports[`EuiBetaBadge props size m is rendered 1`] = ` exports[`EuiBetaBadge props size s is rendered 1`] = ` Beta @@ -101,7 +123,7 @@ exports[`EuiBetaBadge props tooltip and anchorProps are rendered 1`] = ` data-test-subj="DTS" > diff --git a/src/components/badge/beta_badge/beta_badge.styles.ts b/src/components/badge/beta_badge/beta_badge.styles.ts index b5b5cdef519..4a4613bac30 100644 --- a/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/src/components/badge/beta_badge/beta_badge.styles.ts @@ -22,7 +22,6 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { return { euiBetaBadge: css` display: inline-block; - vertical-align: super; // if displayed inline with text border-radius: ${euiTheme.size.l}; cursor: default; @@ -85,6 +84,13 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { position: relative; transform: translate(0, -1px); `, + // Alignments + baseline: css` + vertical-align: baseline; + `, + middle: css` + vertical-align: middle; + `, }; }; diff --git a/src/components/badge/beta_badge/beta_badge.test.tsx b/src/components/badge/beta_badge/beta_badge.test.tsx index 7537cdef2d8..bba745f540d 100644 --- a/src/components/badge/beta_badge/beta_badge.test.tsx +++ b/src/components/badge/beta_badge/beta_badge.test.tsx @@ -11,7 +11,7 @@ import { render } from 'enzyme'; import { requiredProps } from '../../../test'; import { shouldRenderCustomStyles } from '../../../test/internal'; -import { EuiBetaBadge, COLORS, SIZES } from './beta_badge'; +import { EuiBetaBadge, COLORS, SIZES, ALIGNMENTS } from './beta_badge'; describe('EuiBetaBadge', () => { shouldRenderCustomStyles( @@ -72,5 +72,17 @@ describe('EuiBetaBadge', () => { expect(component).toMatchSnapshot(); }); + + describe('alignement', () => { + ALIGNMENTS.forEach((alignment) => { + test(`${alignment} 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 fb86756f12c..7b9d82cc744 100644 --- a/src/components/badge/beta_badge/beta_badge.tsx +++ b/src/components/badge/beta_badge/beta_badge.tsx @@ -30,6 +30,9 @@ export type BetaBadgeColor = typeof COLORS[number]; export const SIZES = ['s', 'm'] as const; export type BetaBadgeSize = typeof SIZES[number]; +export const ALIGNMENTS = ['baseline', 'middle'] as const; +export type BetaBadgeAlignment = typeof ALIGNMENTS[number]; + type WithButtonProps = { /** * Will apply an onclick to the badge itself @@ -112,6 +115,10 @@ type BadgeProps = { */ color?: BetaBadgeColor; size?: BetaBadgeSize; + /** + * Sets the `vertical-align` CSS property + */ + alignment?: BetaBadgeAlignment; } & ExclusiveUnion; export type EuiBetaBadgeProps = CommonProps & @@ -136,6 +143,7 @@ export const EuiBetaBadge: FunctionComponent = ({ rel, target, size = 'm', + alignment = 'baseline', ...rest }) => { const euiTheme = useEuiTheme(); @@ -150,6 +158,7 @@ export const EuiBetaBadge: FunctionComponent = ({ styles.euiBetaBadge, styles[color], styles[size], + styles[alignment], isCircular ? styles.badgeSizes.circle[size] : styles.badgeSizes.default[size], diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap index c6b6df13c21..5a81425c32c 100644 --- a/src/components/card/__snapshots__/card.test.tsx.snap +++ b/src/components/card/__snapshots__/card.test.tsx.snap @@ -33,7 +33,7 @@ exports[`EuiCard betaBadgeProps renders href 1`] = ` class="emotion-euiCard__betaBadgeAnchor" >