Fixed EuiBadge iconOnClick makes badge text clickable (#3392)

* Fixed badge text clickable when iconOnClick is provided

* Updated tests

* Added cl

CHANGELOG.md

@@ -7,6 +7,7 @@
 
 **Bug Fixes**
 
+- Fixed `EuiBadge` `iconOnClick` props makes badge text clickable ([#3392](https://github.com/elastic/eui/pull/3392))
 - Added `id` requirement if `label` is used in `EuiRadio` ([#3382](https://github.com/elastic/eui/pull/3382))
 - Fixed z-index issue in `EuiDatePicker` where it's popover would sit beneath other DOM siblings that had z-index applied ([#3376](https://github.com/elastic/eui/pull/3376))
 - Added `download` glyph to `EuiIcon` ([#3364](https://github.com/elastic/eui/pull/3364))

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

@@ -122,19 +122,19 @@ exports[`EuiBadge is rendered with iconOnClick and onClick provided 1`] = `
 
 exports[`EuiBadge is rendered with iconOnClick provided 1`] = `
 <span
+  aria-label="aria-label"
   class="euiBadge euiBadge--iconLeft testClass1 testClass2"
+  data-test-subj="test subject string"
   style="background-color:#d3dae6;color:#000"
 >
   <span
     class="euiBadge__content"
   >
-    <button
-      aria-label="aria-label"
-      class="euiBadge__childButton"
-      data-test-subj="test subject string"
+    <span
+      class="euiBadge__text"
     >
       Content
-    </button>
+    </span>
   </span>
 </span>
 `;

src/components/badge/badge.tsx

@@ -269,7 +269,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
   }
 
   if (iconOnClick) {
-    return (
+    return onClick || href ? (
       <span className={classes} style={optionalCustomStyles}>
         <span className="euiBadge__content">
           <EuiInnerText>
@@ -289,6 +289,22 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
           {optionalIcon}
         </span>
       </span>
+    ) : (
+      <EuiInnerText>
+        {(ref, innerText) => (
+          <span
+            className={classes}
+            style={optionalCustomStyles}
+            ref={ref}
+            title={innerText}
+            {...rest}>
+            <span className="euiBadge__content">
+              <span className="euiBadge__text">{children}</span>
+              {optionalIcon}
+            </span>
+          </span>
+        )}
+      </EuiInnerText>
     );
   } else if (onClick || href) {
     return (