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

…ecified (#6326)

* Fix the styling of EuiCard when betaBageProps is present but lacks tooltipContent

* REVERT ME

* changelog

* Revert "REVERT ME"

This reverts commit e1ca632.

src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap

@@ -1,81 +1,97 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiBetaBadge is rendered 1`] = `
-<span
-  aria-label="aria-label"
-  class="euiBetaBadge testClass1 testClass2 emotion-euiBetaBadge-hollow-m"
-  data-test-subj="test subject string"
-  title="Beta"
->
-  Beta
+<span>
+  <span
+    aria-label="aria-label"
+    class="euiBetaBadge testClass1 testClass2 emotion-euiBetaBadge-hollow-m"
+    data-test-subj="test subject string"
+    title="Beta"
+  >
+    Beta
+  </span>
 </span>
 `;
 
 exports[`EuiBetaBadge props color accent is rendered 1`] = `
-<span
-  class="euiBetaBadge emotion-euiBetaBadge-accent-m"
-  title="Beta"
->
-  Beta
+<span>
+  <span
+    class="euiBetaBadge emotion-euiBetaBadge-accent-m"
+    title="Beta"
+  >
+    Beta
+  </span>
 </span>
 `;
 
 exports[`EuiBetaBadge props color hollow is rendered 1`] = `
-<span
-  class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
-  title="Beta"
->
-  Beta
+<span>
+  <span
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    title="Beta"
+  >
+    Beta
+  </span>
 </span>
 `;
 
 exports[`EuiBetaBadge props color subdued is rendered 1`] = `
-<span
-  class="euiBetaBadge emotion-euiBetaBadge-subdued-m"
-  title="Beta"
->
-  Beta
+<span>
+  <span
+    class="euiBetaBadge emotion-euiBetaBadge-subdued-m"
+    title="Beta"
+  >
+    Beta
+  </span>
 </span>
 `;
 
 exports[`EuiBetaBadge props iconType 1`] = `
-<span
-  class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
-  title="Beta"
->
+<span>
   <span
-    aria-hidden="true"
-    class="euiBetaBadge__icon emotion-euiBetaBadge__icon"
-    color="inherit"
-    data-euiicon-type="beta"
-  />
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    title="Beta"
+  >
+    <span
+      aria-hidden="true"
+      class="euiBetaBadge__icon emotion-euiBetaBadge__icon"
+      color="inherit"
+      data-euiicon-type="beta"
+    />
+  </span>
 </span>
 `;
 
 exports[`EuiBetaBadge props single letter 1`] = `
-<span
-  class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
-  title="B"
->
-  B
+<span>
+  <span
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    title="B"
+  >
+    B
+  </span>
 </span>
 `;
 
 exports[`EuiBetaBadge props size m is rendered 1`] = `
-<span
-  class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
-  title="Beta"
->
-  Beta
+<span>
+  <span
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    title="Beta"
+  >
+    Beta
+  </span>
 </span>
 `;
 
 exports[`EuiBetaBadge props size s is rendered 1`] = `
-<span
-  class="euiBetaBadge emotion-euiBetaBadge-hollow-s"
-  title="Beta"
->
-  Beta
+<span>
+  <span
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-s"
+    title="Beta"
+  >
+    Beta
+  </span>
 </span>
 `;
 

src/components/badge/beta_badge/beta_badge.tsx

@@ -8,7 +8,6 @@
 
 import React, {
   AriaAttributes,
-  Fragment,
   FunctionComponent,
   HTMLAttributes,
   MouseEventHandler,
@@ -215,7 +214,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
         </EuiToolTip>
       );
     } else {
-      return <Fragment>{content}</Fragment>;
+      return <span {...anchorProps}>{content}</span>;
     }
   } else {
     if (tooltipContent) {
@@ -245,13 +244,15 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
         );
       }
       return (
-        <span
-          css={cssStyles}
-          className={classes}
-          title={spanTitle as string}
-          {...rest}
-        >
-          {icon || label}
+        <span {...anchorProps}>
+          <span
+            className={classes}
+            title={spanTitle as string}
+            css={cssStyles}
+            {...rest}
+          >
+            {icon || label}
+          </span>
         </span>
       );
     }

src/components/card/__snapshots__/card.test.tsx.snap

@@ -26,15 +26,19 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
       </p>
     </div>
   </div>
-  <a
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-euiCard__betaBadge"
-    href="http://www.elastic.co/"
-    id="generated-idBetaBadge"
-    rel=""
-    title="Link"
+  <span
+    class="emotion-euiCard__betaBadgeAnchor"
   >
-    Link
-  </a>
+    <a
+      class="euiBetaBadge emotion-euiBetaBadge-hollow-m-euiCard__betaBadge"
+      href="http://www.elastic.co/"
+      id="generated-idBetaBadge"
+      rel=""
+      title="Link"
+    >
+      Link
+    </a>
+  </span>
 </div>
 `;
 

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 euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
-        title="B"
-      >
-        B
+      <span>
+        <span
+          aria-hidden="true"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
+          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 euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
-        title="B"
-      >
-        B
+      <span>
+        <span
+          aria-hidden="true"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
+          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 euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
-        title="B"
-      >
+      <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge__icon emotion-euiBetaBadge__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
+          title="B"
+        >
+          <span
+            aria-hidden="true"
+            class="euiBetaBadge__icon emotion-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 euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
-        title="B"
-      >
-        B
+      <span>
+        <span
+          aria-hidden="true"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
+          title="B"
+        >
+          B
+        </span>
       </span>
       <span
         class="euiKeyPadMenuItem__icon"

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