Add disabled state to EuiBadge

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added ability for `EuiColorStops` to accept user-defined range bounds ([#2396](https://github.com/elastic/eui/pull/2396))
+- Added disabled state to `EuiBadge` ([#2440](https://github.com/elastic/eui/pull/2440))
 
 ## [`14.6.0`](https://github.com/elastic/eui/tree/v14.6.0)
 

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

@@ -14,15 +14,20 @@ const badges = [
   'accent',
   'warning',
   'danger',
-  '#fea27f',
   '#000',
+  '#fea27f',
+  'disabled',
 ];
 
 export default () => (
   <EuiFlexGroup wrap responsive={false} gutterSize="xs" style={{ width: 300 }}>
     {badges.map(badge => (
       <EuiFlexItem grow={false} key={badge}>
-        <EuiBadge color={badge}>{badge}</EuiBadge>
+        <EuiBadge
+          isDisabled={badge === 'disabled' ? true : false}
+          color={badge}>
+          {badge}
+        </EuiBadge>
       </EuiFlexItem>
     ))}
   </EuiFlexGroup>

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

@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiBadge is disabled 1`] = `
+<span
+  aria-label="aria-label"
+  class="euiBadge euiBadge-isDisabled 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 1`] = `
 <span
   aria-label="aria-label"

src/components/badge/_badge.scss

@@ -1,3 +1,5 @@
+@import '../button/variables';
+
 /**
  * 1. Accounts for the border
  */
@@ -19,6 +21,13 @@
   // So, make the text left aligned to ensure all badges line up the same
   text-align: left;
 
+  &.euiBadge-isDisabled {
+    // sass-lint:disable-block no-important
+    // Using !important to override inline styles
+    background-color: $euiButtonColorDisabled !important;
+    color: $euiColorEmptyShade !important;
+  }
+
   &:focus-within {
     @include euiFocusRing('small');
   }
@@ -40,9 +49,15 @@
     font-weight: inherit;
     line-height: inherit;
 
-    &:hover,
-    &:focus {
-      text-decoration: underline;
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled) {
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+      }
     }
   }
 
@@ -57,6 +72,10 @@
       border-radius: 2px;
     }
 
+    &:disabled {
+      cursor: not-allowed;
+    }
+
     .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
@@ -86,9 +105,15 @@
 }
 
 .euiBadge-isClickable {
-  &:hover,
-  &:focus {
-    text-decoration: underline;
+  &:not(:disabled) {
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+
+  &.euiBadge-isDisabled {
+    cursor: not-allowed;
   }
 
   &:focus {

src/components/badge/badge.test.tsx

@@ -11,6 +11,16 @@ describe('EuiBadge', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('is disabled', () => {
+    const component = render(
+      <EuiBadge isDisabled {...requiredProps}>
+        Content
+      </EuiBadge>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
   test('is rendered with onClick provided', () => {
     const component = render(
       <EuiBadge

src/components/badge/badge.tsx

@@ -56,6 +56,8 @@ export type EuiBadgeProps = {
    */
   color?: IconColor;
 
+  isDisabled?: boolean;
+
   /**
    * Props passed to the close button.
    */
@@ -89,6 +91,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
   iconType,
   iconSide = 'left',
   className,
+  isDisabled,
   onClick,
   iconOnClick,
   onClickAriaLabel,
@@ -118,6 +121,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
     'euiBadge',
     {
       'euiBadge-isClickable': onClick && !iconOnClick,
+      'euiBadge-isDisabled': isDisabled,
     },
     iconSideToClassNameMap[iconSide],
     optionalColorClass,
@@ -141,6 +145,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
         <button
           className="euiBadge__iconButton"
           aria-label={iconOnClickAriaLabel}
+          disabled={isDisabled}
           title={iconOnClickAriaLabel}
           onClick={iconOnClick}>
           <EuiIcon
@@ -172,6 +177,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
             {(ref, innerText) => (
               <button
                 className="euiBadge__childButton"
+                disabled={isDisabled}
                 aria-label={onClickAriaLabel}
                 onClick={onClick}
                 ref={ref}
@@ -190,6 +196,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
       <EuiInnerText>
         {(ref, innerText) => (
           <button
+            disabled={isDisabled}
             aria-label={onClickAriaLabel}
             className={classes}
             onClick={onClick}