[EuiBetaBadge] fix beta badge placement when no tooltip content is sp…

…ecified (elastic#6326) * Fix the styling of EuiCard when betaBageProps is present but lacks tooltipContent * REVERT ME * changelog * Revert "REVERT ME" This reverts commit e1ca632.
edmarmoretti · Nov 1, 2022 · aa96323 · aa96323
1 parent fb78e6f
commit aa96323
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 71 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
@@ -1,58 +1,70 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiBetaBadge is rendered 1`] = `
-<span
-  aria-label="aria-label"
-  class="euiBetaBadge euiBetaBadge--hollow testClass1 testClass2"
-  data-test-subj="test subject string"
-  title="Beta"
->
-  Beta
+<span>
+  <span
+    aria-label="aria-label"
+    class="euiBetaBadge euiBetaBadge--hollow testClass1 testClass2"
+    data-test-subj="test subject string"
+    title="Beta"
+  >
+    Beta
+  </span>
 </span>
 `;
 
 exports[`EuiBetaBadge props color accent is rendered 1`] = `
-<span
-  class="euiBetaBadge euiBetaBadge--accent"
-  title="Beta"
->
-  Beta
+<span>
+  <span
+    class="euiBetaBadge euiBetaBadge--accent"
+    title="Beta"
+  >
+    Beta
+  </span>
 </span>
 `;
 
 exports[`EuiBetaBadge props color hollow is rendered 1`] = `
-<span
-  class="euiBetaBadge euiBetaBadge--hollow"
-  title="Beta"
->
-  Beta
+<span>
+  <span
+    class="euiBetaBadge euiBetaBadge--hollow"
+    title="Beta"
+  >
+    Beta
+  </span>
 </span>
 `;
 
 exports[`EuiBetaBadge props color subdued is rendered 1`] = `
-<span
-  class="euiBetaBadge euiBetaBadge--subdued"
-  title="Beta"
->
-  Beta
+<span>
+  <span
+    class="euiBetaBadge euiBetaBadge--subdued"
+    title="Beta"
+  >
+    Beta
+  </span>
 </span>
 `;
 
 exports[`EuiBetaBadge props size m is rendered 1`] = `
-<span
-  class="euiBetaBadge euiBetaBadge--hollow"
-  title="Beta"
->
-  Beta
+<span>
+  <span
+    class="euiBetaBadge euiBetaBadge--hollow"
+    title="Beta"
+  >
+    Beta
+  </span>
 </span>
 `;
 
 exports[`EuiBetaBadge props size s is rendered 1`] = `
-<span
-  class="euiBetaBadge euiBetaBadge--hollow euiBetaBadge--small"
-  title="Beta"
->
-  Beta
+<span>
+  <span
+    class="euiBetaBadge euiBetaBadge--hollow euiBetaBadge--small"
+    title="Beta"
+  >
+    Beta
+  </span>
 </span>
 `;
 

diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx
@@ -8,7 +8,6 @@
 
 import React, {
   AriaAttributes,
-  Fragment,
   FunctionComponent,
   HTMLAttributes,
   MouseEventHandler,
@@ -223,7 +222,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
         </EuiToolTip>
       );
     } else {
-      return <Fragment>{content}</Fragment>;
+      return <span {...anchorProps}>{content}</span>;
     }
   } else {
     if (tooltipContent) {
@@ -247,8 +246,14 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
         );
       }
       return (
-        <span className={classes} title={spanTitle as string} {...rest}>
-          {icon || label}
+        <span {...anchorProps}>
+          <span
+            className={classes}
+            title={spanTitle as string}
+            {...rest}
+          >
+            {icon || label}
+          </span>
         </span>
       );
     }

diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -26,15 +26,19 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
       </p>
     </div>
   </div>
-  <a
-    class="euiBetaBadge euiBetaBadge-isClickable euiBetaBadge--hollow emotion-euiCard__betaBadge"
-    href="http://www.elastic.co/"
-    id="generated-idBetaBadge"
-    rel=""
-    title="Link"
+  <span
+    class="emotion-euiCard__betaBadgeAnchor"
   >
-    Link
-  </a>
+    <a
+      class="euiBetaBadge euiBetaBadge-isClickable euiBetaBadge--hollow emotion-euiCard__betaBadge"
+      href="http://www.elastic.co/"
+      id="generated-idBetaBadge"
+      rel=""
+      title="Link"
+    >
+      Link
+    </a>
+  </span>
 </div>
 `;
 

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
@@ -104,12 +104,14 @@ exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = `
     <span
       class="euiKeyPadMenuItem__inner"
     >
-      <span
-        aria-hidden="true"
-        class="euiBetaBadge euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
-        title="B"
-      >
-        B
+      <span>
+        <span
+          aria-hidden="true"
+          class="euiBetaBadge euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
+          title="B"
+        >
+          B
+        </span>
       </span>
       <span
         class="euiKeyPadMenuItem__icon"
@@ -137,12 +139,14 @@ exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1
     <span
       class="euiKeyPadMenuItem__inner"
     >
-      <span
-        aria-hidden="true"
-        class="euiBetaBadge euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
-        title="B"
-      >
-        B
+      <span>
+        <span
+          aria-hidden="true"
+          class="euiBetaBadge euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
+          title="B"
+        >
+          B
+        </span>
       </span>
       <span
         class="euiKeyPadMenuItem__icon"
@@ -170,17 +174,19 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] =
     <span
       class="euiKeyPadMenuItem__inner"
     >
-      <span
-        aria-hidden="true"
-        class="euiBetaBadge euiBetaBadge--iconOnly euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
-        title="B"
-      >
+      <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
+          class="euiBetaBadge euiBetaBadge--iconOnly euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
+          title="B"
+        >
+          <span
+            aria-hidden="true"
+            class="euiBetaBadge__icon"
+            color="inherit"
+            data-euiicon-type="bolt"
+          />
+        </span>
       </span>
       <span
         class="euiKeyPadMenuItem__icon"
@@ -208,12 +214,14 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeTooltipContent
     <span
       class="euiKeyPadMenuItem__inner"
     >
-      <span
-        aria-hidden="true"
-        class="euiBetaBadge euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
-        title="B"
-      >
-        B
+      <span>
+        <span
+          aria-hidden="true"
+          class="euiBetaBadge euiBetaBadge--singleLetter euiBetaBadge--subdued euiBetaBadge--small euiKeyPadMenuItem__betaBadge"
+          title="B"
+        >
+          B
+        </span>
       </span>
       <span
         class="euiKeyPadMenuItem__icon"

diff --git a/upcoming_changelogs/6326.md b/upcoming_changelogs/6326.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiBetaBadge` to always respect its `anchorProps` values, including when there is no tooltip content
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Fixed `EuiBetaBadge` to always respect its `anchorProps` values, including when there is no tooltip content