Badge allow these two events iconOnClick and onClick to trigger

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 **Bug fixes**
 
+- Fixed `EuiBadge` conflicts with providing both `iconOnClick` and `onClick` ([#1994](https://github.com/elastic/eui/pull/1994))
 - Fixed optional TS definitions for `EuiColorPicker` `onBlur` and `onFocus` callbacks ([#1993](https://github.com/elastic/eui/pull/1993))
 - Fixed `EuiIcon` again so that webpack can build dynamic require contexts ([#1998](https://github.com/elastic/eui/pull/1998))
 - Fixed double borders on prepend/append items in `EuiFormControlLayout` ([#1996](https://github.com/elastic/eui/pull/1996))

src-docs/src/views/badge/badge_button.js

@@ -7,7 +7,8 @@ export default () => (
  <EuiBadge
  color="#333"
  onClick={() => window.alert('Badge clicked')}
- onClickAriaLabel="Example of onclick event for the button">
+ onClickAriaLabel="Example of onclick event for the button"
+ data-test-sub="testExample1">
  onClick on badge itself
  </EuiBadge>
 
@@ -16,8 +17,21 @@ export default () => (
  iconSide="right"
  color="#333"
  iconOnClick={() => window.alert('Icon inside badge clicked')}
- iconOnClickAriaLabel="Example of onclick event for icon within the button">
+ iconOnClickAriaLabel="Example of onclick event for icon within the button"
+ data-test-sub="testExample2">
  onClick on icon within badge
  </EuiBadge>
+
+ <EuiBadge
+ iconType="cross"
+ iconSide="right"
+ color="#333"
+ onClick={() => window.alert('Badge clicked')}
+ onClickAriaLabel="Example of onclick event for the button"
+ iconOnClick={() => window.alert('Icon inside badge clicked')}
+ iconOnClickAriaLabel="Example of onclick event for icon within the button"
+ data-test-sub="testExample3">
+ onClick on itself and the icon
+ </EuiBadge>
  </div>
 );

src-docs/src/views/badge/badge_example.js

@@ -11,6 +11,7 @@ import {
  EuiCode,
  EuiBetaBadge,
  EuiNotificationBadge,
+ EuiCallOut,
 } from '../../../../src/components';
 
 import Badge from './badge';
@@ -87,12 +88,24 @@ export const BadgeExample = {
  },
  ],
  text: (
- <p>
- Badges can have onClick events applied to the badge itself or the icon
- within the badge. The later option is useful for when you might use
- badges in other components (like a tag system with autocomplete where
- you need close events).
- </p>
+ <div>
+ <p>
+ Badges can have onClick events applied to the badge itself or the
+ icon within the badge. The later option is useful for when you might
+ use badges in other components (like a tag system with autocomplete
+ where you need close events).
+ </p>
+ <EuiCallOut title="onClick with iconOnClick">
+ <p>
+ When providing both these click handlers, EuiBadge must alter the
+ contents so that it does not contain nested button tags. Please
+ make note that if you provide props other than those explicit to
+ EuiBadge, they will always be applied to the main{' '}
+ <EuiCode>button</EuiCode> tag which may be inside of the outer
+ most tag.
+ </p>
+ </EuiCallOut>
+ </div>
  ),
  demo: <BadgeButton />,
  },
@@ -127,8 +140,7 @@ export const BadgeExample = {
  </p>
  <p>
  They can also be used in conjunction with{' '}
- <Link to="/display/card">EuiCards</Link>
- &nbsp;and{' '}
+ <Link to="/display/card">EuiCards</Link> and{' '}
  <Link to="/navigation/key-pad-menu">EuiKeyPadMenuItems</Link>.
  </p>
  </div>

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

@@ -3,7 +3,7 @@
 exports[`EuiBadge is rendered 1`] = `
 <span
  aria-label="aria-label"
- class="euiBadge euiBadge--default testClass1 testClass2"
+ class="euiBadge euiBadge--iconLeft euiBadge--default testClass1 testClass2"
  data-test-subj="test subject string"
 >
  <span
@@ -18,9 +18,61 @@ exports[`EuiBadge is rendered 1`] = `
 </span>
 `;
 
+exports[`EuiBadge is rendered with iconOnClick and onClick provided 1`] = `
+<span
+ class="euiBadge euiBadge--iconLeft euiBadge--default testClass1 testClass2"
+>
+ <span
+ class="euiBadge__content"
+ >
+ <button
+ aria-label="aria-label"
+ class="euiBadge__childButton"
+ data-test-subj="test subject string"
+ >
+ Content
+ </button>
+ </span>
+</span>
+`;
+
+exports[`EuiBadge is rendered with iconOnClick provided 1`] = `
+<span
+ aria-label="aria-label"
+ class="euiBadge euiBadge--iconLeft euiBadge--default testClass1 testClass2"
+ data-test-subj="test subject string"
+>
+ <span
+ class="euiBadge__content"
+ >
+ <span
+ class="euiBadge__text"
+ >
+ Content
+ </span>
+ </span>
+</span>
+`;
+
+exports[`EuiBadge is rendered with onClick provided 1`] = `
+<button
+ aria-label="aria-label"
+ class="euiBadge euiBadge-isClickable euiBadge--iconLeft euiBadge--default testClass1 testClass2"
+ data-test-subj="test subject string"
+>
+ <span
+ class="euiBadge__content"
+ >
+ <span>
+ Content
+ </span>
+ </span>
+</button>
+`;
+
 exports[`EuiBadge props color accent is rendered 1`] = `
 <span
- class="euiBadge euiBadge--accent"
+ class="euiBadge euiBadge--iconLeft euiBadge--accent"
 >
  <span
  class="euiBadge__content"
@@ -36,7 +88,7 @@ exports[`EuiBadge props color accent is rendered 1`] = `
 
 exports[`EuiBadge props color danger is rendered 1`] = `
 <span
- class="euiBadge euiBadge--danger"
+ class="euiBadge euiBadge--iconLeft euiBadge--danger"
 >
  <span
  class="euiBadge__content"
@@ -52,7 +104,7 @@ exports[`EuiBadge props color danger is rendered 1`] = `
 
 exports[`EuiBadge props color default is rendered 1`] = `
 <span
- class="euiBadge euiBadge--default"
+ class="euiBadge euiBadge--iconLeft euiBadge--default"
 >
  <span
  class="euiBadge__content"
@@ -68,7 +120,7 @@ exports[`EuiBadge props color default is rendered 1`] = `
 
 exports[`EuiBadge props color hollow is rendered 1`] = `
 <span
- class="euiBadge euiBadge--hollow"
+ class="euiBadge euiBadge--iconLeft euiBadge--hollow"
 >
  <span
  class="euiBadge__content"
@@ -84,7 +136,7 @@ exports[`EuiBadge props color hollow is rendered 1`] = `
 
 exports[`EuiBadge props color primary is rendered 1`] = `
 <span
- class="euiBadge euiBadge--primary"
+ class="euiBadge euiBadge--iconLeft euiBadge--primary"
 >
  <span
  class="euiBadge__content"
@@ -100,7 +152,7 @@ exports[`EuiBadge props color primary is rendered 1`] = `
 
 exports[`EuiBadge props color secondary is rendered 1`] = `
 <span
- class="euiBadge euiBadge--secondary"
+ class="euiBadge euiBadge--iconLeft euiBadge--secondary"
 >
  <span
  class="euiBadge__content"
@@ -116,7 +168,7 @@ exports[`EuiBadge props color secondary is rendered 1`] = `
 
 exports[`EuiBadge props color warning is rendered 1`] = `
 <span
- class="euiBadge euiBadge--warning"
+ class="euiBadge euiBadge--iconLeft euiBadge--warning"
 >
  <span
  class="euiBadge__content"
@@ -132,11 +184,16 @@ exports[`EuiBadge props color warning is rendered 1`] = `
 
 exports[`EuiBadge props iconSide left is rendered 1`] = `
 <span
- class="euiBadge euiBadge--default"
+ class="euiBadge euiBadge--iconLeft euiBadge--default"
 >
  <span
  class="euiBadge__content"
  >
+ <span
+ class="euiBadge__text"
+ >
+ Content
+ </span>
  <svg
  class="euiIcon euiIcon--small euiIcon-isLoading euiBadge__icon"
  focusable="false"
@@ -145,11 +202,6 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `
  width="16"
  xmlns="http://www.w3.org/2000/svg"
  />
- <span
- class="euiBadge__text"
- >
- Content
- </span>
  </span>
 </span>
 `;
@@ -161,6 +213,11 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `
  <span
  class="euiBadge__content"
  >
+ <span
+ class="euiBadge__text"
+ >
+ Content
+ </span>
  <svg
  class="euiIcon euiIcon--small euiIcon-isLoading euiBadge__icon"
  focusable="false"
@@ -169,22 +226,22 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `
  width="16"
  xmlns="http://www.w3.org/2000/svg"
  />
- <span
- class="euiBadge__text"
- >
- Content
- </span>
  </span>
 </span>
 `;
 
 exports[`EuiBadge props iconType is rendered 1`] = `
 <span
- class="euiBadge euiBadge--default"
+ class="euiBadge euiBadge--iconLeft euiBadge--default"
 >
  <span
  class="euiBadge__content"
  >
+ <span
+ class="euiBadge__text"
+ >
+ Content
+ </span>
  <svg
  class="euiIcon euiIcon--small euiIcon-isLoading euiBadge__icon"
  focusable="false"
@@ -193,11 +250,6 @@ exports[`EuiBadge props iconType is rendered 1`] = `
  width="16"
  xmlns="http://www.w3.org/2000/svg"
  />
- <span
- class="euiBadge__text"
- >
- Content
- </span>
  </span>
 </span>
 `;

src/components/badge/_badge.scss

@@ -17,6 +17,10 @@
  text-align: center;
  overflow: hidden;
 
+ &:focus-within {
+ @include euiFocusRing('small');
+ }
+
  + .euiBadge {
  margin-left: $euiSizeXS;
  }
@@ -27,37 +31,67 @@
  overflow: hidden;
  }
 
- .euiBadge__text {
- overflow: hidden;
- text-overflow: ellipsis;
- flex: 1 1 auto;
- }
+ .euiBadge__childButton {
+ flex: 0 0 auto;
+ font-weight: inherit;
+ line-height: inherit;
 
- &:focus {
- @include euiFocusRing('small');
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
  }
 
- .euiBadge__icon {
+ .euiBadge__iconButton {
  flex: 0 0 auto;
- margin-right: $euiSizeXS;
+ font-size: 0; // Makes the button only as large as the icon so it aligns vertically better
+ margin-left: $euiSizeXS;
 
  &:focus {
  background-color: transparentize($euiColorGhost, .2);
  color: #000; // sass-lint:disable-line no-color-literals
  border-radius: 2px;
  }
+
+ .euiBadge__icon {
+ // Remove margins from icon itself so that focus state doesn't include that space
+ margin: 0 !important; // sass-lint:disable-line no-important
+ }
  }
 
- &.euiBadge--iconRight .euiBadge__content {
+ .euiBadge__text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex: 1 1 auto;
+ }
+
+ .euiBadge__icon {
+ flex: 0 0 auto;
+ margin-left: $euiSizeXS;
+ }
+
+ &.euiBadge--iconLeft .euiBadge__content {
  flex-direction: row-reverse;
 
+ .euiBadge__iconButton,
  .euiBadge__icon {
- margin-left: $euiSizeXS;
- margin-right: 0;
+ margin-right: $euiSizeXS;
+ margin-left: 0;
  }
  }
 }
 
+.euiBadge-isClickable {
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
+
+ &:focus {
+ @include euiFocusRing('small');
+ }
+}
+
 
 // Modifier naming and colors.
 $badgeTypes: (