[EuiBetaBadge] Add alignment prop (#6361)

* [EuiBetaBadge] Add alignment prop * Adding CL entry * Fixing comment * Removinf `super` option * Removing unnecessary style
elastic · Nov 18, 2022 · 004cc1b · 004cc1b
1 parent 39d52de
commit 004cc1b
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 16 deletions.
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
@@ -4,7 +4,7 @@ exports[`EuiBetaBadge is rendered 1`] = `
 <span>
   <span
     aria-label="aria-label"
-    class="euiBetaBadge testClass1 testClass2 emotion-euiBetaBadge-hollow-m"
+    class="euiBetaBadge testClass1 testClass2 emotion-euiBetaBadge-hollow-m-baseline"
     data-test-subj="test subject string"
     title="Beta"
   >
@@ -13,10 +13,32 @@ exports[`EuiBetaBadge is rendered 1`] = `
 </span>
 `;
 
+exports[`EuiBetaBadge props alignement baseline is rendered 1`] = `
+<span>
+  <span
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
+    title="Beta"
+  >
+    Beta
+  </span>
+</span>
+`;
+
+exports[`EuiBetaBadge props alignement middle is rendered 1`] = `
+<span>
+  <span
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-middle"
+    title="Beta"
+  >
+    Beta
+  </span>
+</span>
+`;
+
 exports[`EuiBetaBadge props color accent is rendered 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-accent-m"
+    class="euiBetaBadge emotion-euiBetaBadge-accent-m-baseline"
     title="Beta"
   >
     Beta
@@ -27,7 +49,7 @@ exports[`EuiBetaBadge props color accent is rendered 1`] = `
 exports[`EuiBetaBadge props color hollow is rendered 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
     title="Beta"
   >
     Beta
@@ -38,7 +60,7 @@ exports[`EuiBetaBadge props color hollow is rendered 1`] = `
 exports[`EuiBetaBadge props color subdued is rendered 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-subdued-m"
+    class="euiBetaBadge emotion-euiBetaBadge-subdued-m-baseline"
     title="Beta"
   >
     Beta
@@ -49,7 +71,7 @@ exports[`EuiBetaBadge props color subdued is rendered 1`] = `
 exports[`EuiBetaBadge props iconType 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
     title="Beta"
   >
     <span
@@ -65,7 +87,7 @@ exports[`EuiBetaBadge props iconType 1`] = `
 exports[`EuiBetaBadge props single letter 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
     title="B"
   >
     B
@@ -76,7 +98,7 @@ exports[`EuiBetaBadge props single letter 1`] = `
 exports[`EuiBetaBadge props size m is rendered 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
     title="Beta"
   >
     Beta
@@ -87,7 +109,7 @@ exports[`EuiBetaBadge props size m is rendered 1`] = `
 exports[`EuiBetaBadge props size s is rendered 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-s"
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-s-baseline"
     title="Beta"
   >
     Beta
@@ -101,7 +123,7 @@ exports[`EuiBetaBadge props tooltip and anchorProps are rendered 1`] = `
   data-test-subj="DTS"
 >
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
     role="button"
     tabindex="0"
   >

diff --git 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
@@ -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(
+            <EuiBetaBadge label="Beta" alignment={alignment} />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
   });
 });
diff --git 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<LabelAsNode, LabelAsString>;
 
 export type EuiBetaBadgeProps = CommonProps &
@@ -136,6 +143,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
   rel,
   target,
   size = 'm',
+  alignment = 'baseline',
   ...rest
 }) => {
   const euiTheme = useEuiTheme();
@@ -150,6 +158,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
     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
@@ -33,7 +33,7 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
       class="emotion-euiCard__betaBadgeAnchor"
     >
       <a
-        class="euiBetaBadge emotion-euiBetaBadge-hollow-m-euiCard__betaBadge"
+        class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline-euiCard__betaBadge"
         href="http://www.elastic.co/"
         id="generated-idBetaBadge"
         rel=""

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
@@ -107,7 +107,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = `
       <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
           title="B"
         >
           B
@@ -142,7 +142,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1
       <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
           title="B"
         >
           B
@@ -177,7 +177,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] =
       <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
           title="B"
         >
           <span
@@ -217,7 +217,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeTooltipContent
       <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
           title="B"
         >
           B

diff --git a/upcoming_changelogs/6361.md b/upcoming_changelogs/6361.md
@@ -0,0 +1 @@
+- Added `alignment` prop to `EuiBetaBadge`