From e94188e5535f54b45cc57e14d57c390d95cc4b2a Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 15 Oct 2019 16:48:23 -0500
Subject: [PATCH 1/5] added disabled state to EuiBadge

---
 src-docs/src/views/badge/badge.js             |  6 ++--
 src-docs/src/views/badge/badge_with_icon.js   |  2 +-
 src-docs/src/views/badge/beta_badge.js        |  7 ++++
 .../src/views/badge/notification_badge.tsx    |  8 ++++-
 src/components/badge/_badge.scss              | 34 +++++++++++++++----
 src/components/badge/_index.scss              |  1 +
 src/components/badge/badge.tsx                |  9 +++++
 .../badge/beta_badge/_beta_badge.scss         |  6 ++++
 .../badge/beta_badge/beta_badge.tsx           |  6 ++++
 .../_notification_badge.scss                  |  5 +++
 .../notification_badge/badge_notification.tsx | 13 ++++++-
 11 files changed, 86 insertions(+), 11 deletions(-)

diff --git a/src-docs/src/views/badge/badge.js b/src-docs/src/views/badge/badge.js
index ee0e567a710..742993b4f00 100644
--- a/src-docs/src/views/badge/badge.js
+++ b/src-docs/src/views/badge/badge.js
@@ -14,15 +14,17 @@ const badges = [
   'accent',
   'warning',
   'danger',
-  '#fea27f',
   '#000',
+  '#fea27f',
 ];
 
 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 === '#fea27f' ? true : false} color={badge}>
+          {badge === '#fea27f' ? 'disabled badge' : badge}
+        </EuiBadge>
       </EuiFlexItem>
     ))}
   </EuiFlexGroup>
diff --git a/src-docs/src/views/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.js
index 7ae47352f8d..c0dba2ee87b 100644
--- a/src-docs/src/views/badge/badge_with_icon.js
+++ b/src-docs/src/views/badge/badge_with_icon.js
@@ -6,7 +6,7 @@ export default () => (
   <div>
     <EuiBadge iconType="check">Default</EuiBadge>
 
-    <EuiBadge color="primary" iconType="cross" iconSide="right">
+    <EuiBadge isDisabled color="primary" iconType="cross" iconSide="right">
       Primary
     </EuiBadge>
   </div>
diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js
index f0c7dd0f5e8..05f662f0e23 100644
--- a/src-docs/src/views/badge/beta_badge.js
+++ b/src-docs/src/views/badge/beta_badge.js
@@ -15,6 +15,13 @@ export default () => (
       tooltipContent="This module is not GA. Please help us by reporting any bugs."
     />
     &emsp;
+    <EuiBetaBadge
+      label="Lab"
+      isDisabled
+      title="Laboratory"
+      tooltipContent="This module is not GA. Please help us by reporting any bugs."
+    />
+    &emsp;
     <EuiBetaBadge label="Lab" iconType="beaker" />
     <EuiSpacer />
     <EuiTitle>
diff --git a/src-docs/src/views/badge/notification_badge.tsx b/src-docs/src/views/badge/notification_badge.tsx
index 99c7f9e46cd..331ead9bce9 100644
--- a/src-docs/src/views/badge/notification_badge.tsx
+++ b/src-docs/src/views/badge/notification_badge.tsx
@@ -2,4 +2,10 @@ import React from 'react';
 
 import { EuiNotificationBadge } from '../../../../src/components/badge/notification_badge';
 
-export default () => <EuiNotificationBadge>3</EuiNotificationBadge>;
+export default () => (
+  <div>
+    <EuiNotificationBadge>3</EuiNotificationBadge>
+    &emsp;
+    <EuiNotificationBadge isDisabled>3</EuiNotificationBadge>
+  </div>
+);
diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss
index 8b506d6a22a..dab6cee6ae7 100644
--- a/src/components/badge/_badge.scss
+++ b/src/components/badge/_badge.scss
@@ -19,6 +19,12 @@
   // 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
+    background-color: $euiColorLightestShade !important;
+    color: $euiButtonColorDisabled !important;
+  }
+
   &:focus-within {
     @include euiFocusRing('small');
   }
@@ -40,9 +46,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 +69,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 +102,15 @@
 }
 
 .euiBadge-isClickable {
-  &:hover,
-  &:focus {
-    text-decoration: underline;
+  &:not(:disabled) {
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+
+  &.euiBadge-isDisabled {
+    cursor: not-allowed;
   }
 
   &:focus {
diff --git a/src/components/badge/_index.scss b/src/components/badge/_index.scss
index a567f7a42de..a5d83c76aef 100644
--- a/src/components/badge/_index.scss
+++ b/src/components/badge/_index.scss
@@ -1,3 +1,4 @@
+@import '../button/variables';
 @import 'badge';
 @import 'beta_badge/index';
 @import 'notification_badge/index';
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index 673a981494f..d1fe457ad22 100644
--- a/src/components/badge/badge.tsx
+++ b/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,
@@ -119,6 +122,9 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
     {
       'euiBadge-isClickable': onClick && !iconOnClick,
     },
+    {
+      'euiBadge-isDisabled': isDisabled,
+    },
     iconSideToClassNameMap[iconSide],
     optionalColorClass,
     className
@@ -141,6 +147,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
         <button
           className="euiBadge__iconButton"
           aria-label={iconOnClickAriaLabel}
+          disabled={isDisabled}
           title={iconOnClickAriaLabel}
           onClick={iconOnClick}>
           <EuiIcon
@@ -172,6 +179,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
             {(ref, innerText) => (
               <button
                 className="euiBadge__childButton"
+                disabled={isDisabled}
                 aria-label={onClickAriaLabel}
                 onClick={onClick}
                 ref={ref}
@@ -190,6 +198,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
       <EuiInnerText>
         {(ref, innerText) => (
           <button
+            disabled={isDisabled}
             aria-label={onClickAriaLabel}
             className={classes}
             onClick={onClick}
diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss
index 5b9b00337d8..70141b215c1 100644
--- a/src/components/badge/beta_badge/_beta_badge.scss
+++ b/src/components/badge/beta_badge/_beta_badge.scss
@@ -14,6 +14,12 @@
   white-space: nowrap;
 
   cursor: default;
+
+  &.euiBetaBadge-isDisabled {
+    background-color: $euiColorLightestShade;
+    color: $euiButtonColorDisabled;
+  }
+
 }
 
 // When it's just an icon, make it a circle
diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx
index a84ce337a45..f459f01730a 100644
--- a/src/components/badge/beta_badge/beta_badge.tsx
+++ b/src/components/badge/beta_badge/beta_badge.tsx
@@ -47,6 +47,8 @@ type BadgeProps = {
    */
   tooltipPosition?: ToolTipPositions;
 
+  isDisabled?: boolean;
+
   /**
    * Optional title will be supplied as tooltip title or title attribute
    * otherwise the label will be used
@@ -61,6 +63,7 @@ type EuiBetaBadgeProps = CommonProps &
 export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
   className,
   label,
+  isDisabled,
   tooltipContent,
   tooltipPosition = 'top',
   title,
@@ -72,6 +75,9 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
     {
       'euiBetaBadge--iconOnly': iconType,
     },
+    {
+      'euiBetaBadge-isDisabled': isDisabled,
+    },
     className
   );
 
diff --git a/src/components/badge/notification_badge/_notification_badge.scss b/src/components/badge/notification_badge/_notification_badge.scss
index 98208442fd5..18a35d7ce2a 100644
--- a/src/components/badge/notification_badge/_notification_badge.scss
+++ b/src/components/badge/notification_badge/_notification_badge.scss
@@ -15,6 +15,11 @@
   text-align: center;
   transition: all $euiAnimSpeedFast ease-in;
   cursor: default;
+
+  &.euiNotificationBadge-isDisabled {
+    background-color: $euiColorLightestShade;
+    color: $euiButtonColorDisabled;
+  }
 }
 
 .euiNotificationBadge--medium {
diff --git a/src/components/badge/notification_badge/badge_notification.tsx b/src/components/badge/notification_badge/badge_notification.tsx
index b05f5851597..3acabe65749 100644
--- a/src/components/badge/notification_badge/badge_notification.tsx
+++ b/src/components/badge/notification_badge/badge_notification.tsx
@@ -24,13 +24,24 @@ export interface EuiNotificationBadgeProps
   children: ReactNode;
   size?: BadgeNotificationSize;
   color?: BadgeNotificationColor;
+  isDisabled?: boolean;
 }
 
 export const EuiNotificationBadge: FunctionComponent<
   EuiNotificationBadgeProps
-> = ({ children, className, size = 's', color = 'accent', ...rest }) => {
+> = ({
+  children,
+  isDisabled,
+  className,
+  size = 's',
+  color = 'accent',
+  ...rest
+}) => {
   const classes = classNames(
     'euiNotificationBadge',
+    {
+      'euiNotificationBadge-isDisabled': isDisabled,
+    },
     sizeToClassNameMap[size],
     colorToClassMap[color],
     className

From c8c676d9907f530bb8bd21159f8cd14eb75140a5 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 15 Oct 2019 17:52:49 -0500
Subject: [PATCH 2/5] cl

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8db4777f93b..429fd64c072 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ No public interface changes since `14.5.0`.
 - Added `keyboardShorcut` glyph to 'EuiIcon ([#2413](https://github.com/elastic/eui/pull/2413))
 - Improved a11y in `EuiNavDrawer` ([#2417](https://github.com/elastic/eui/pull/2417))
 - Improved a11y in `EuiSuperDatePicker` ([#2426](https://github.com/elastic/eui/pull/2426))
+- Added disabled state to `EuiBadge` ([#2440](https://github.com/elastic/eui/pull/2440))
 
 **Bug fixes**
 

From 4d58eaf8d7998342110cdc475d6256e8ffb68f21 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 16 Oct 2019 16:48:58 -0500
Subject: [PATCH 3/5] cleanup

---
 src-docs/src/views/badge/badge.js                   |  2 +-
 src-docs/src/views/badge/badge_with_icon.js         |  2 +-
 src-docs/src/views/badge/beta_badge.js              |  7 -------
 src-docs/src/views/badge/notification_badge.tsx     |  2 --
 src/components/badge/_badge.scss                    |  5 +++--
 src/components/badge/badge.tsx                      |  2 --
 src/components/badge/beta_badge/_beta_badge.scss    |  5 -----
 src/components/badge/beta_badge/beta_badge.tsx      |  6 ------
 .../notification_badge/_notification_badge.scss     |  4 ----
 .../badge/notification_badge/badge_notification.tsx | 13 +------------
 10 files changed, 6 insertions(+), 42 deletions(-)

diff --git a/src-docs/src/views/badge/badge.js b/src-docs/src/views/badge/badge.js
index 742993b4f00..bbfef3b8982 100644
--- a/src-docs/src/views/badge/badge.js
+++ b/src-docs/src/views/badge/badge.js
@@ -23,7 +23,7 @@ export default () => (
     {badges.map(badge => (
       <EuiFlexItem grow={false} key={badge}>
         <EuiBadge isDisabled={badge === '#fea27f' ? true : false} color={badge}>
-          {badge === '#fea27f' ? 'disabled badge' : badge}
+          {badge === '#fea27f' ? 'disabled' : badge}
         </EuiBadge>
       </EuiFlexItem>
     ))}
diff --git a/src-docs/src/views/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.js
index c0dba2ee87b..7ae47352f8d 100644
--- a/src-docs/src/views/badge/badge_with_icon.js
+++ b/src-docs/src/views/badge/badge_with_icon.js
@@ -6,7 +6,7 @@ export default () => (
   <div>
     <EuiBadge iconType="check">Default</EuiBadge>
 
-    <EuiBadge isDisabled color="primary" iconType="cross" iconSide="right">
+    <EuiBadge color="primary" iconType="cross" iconSide="right">
       Primary
     </EuiBadge>
   </div>
diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js
index 05f662f0e23..f0c7dd0f5e8 100644
--- a/src-docs/src/views/badge/beta_badge.js
+++ b/src-docs/src/views/badge/beta_badge.js
@@ -15,13 +15,6 @@ export default () => (
       tooltipContent="This module is not GA. Please help us by reporting any bugs."
     />
     &emsp;
-    <EuiBetaBadge
-      label="Lab"
-      isDisabled
-      title="Laboratory"
-      tooltipContent="This module is not GA. Please help us by reporting any bugs."
-    />
-    &emsp;
     <EuiBetaBadge label="Lab" iconType="beaker" />
     <EuiSpacer />
     <EuiTitle>
diff --git a/src-docs/src/views/badge/notification_badge.tsx b/src-docs/src/views/badge/notification_badge.tsx
index 331ead9bce9..695019f37fa 100644
--- a/src-docs/src/views/badge/notification_badge.tsx
+++ b/src-docs/src/views/badge/notification_badge.tsx
@@ -5,7 +5,5 @@ import { EuiNotificationBadge } from '../../../../src/components/badge/notificat
 export default () => (
   <div>
     <EuiNotificationBadge>3</EuiNotificationBadge>
-    &emsp;
-    <EuiNotificationBadge isDisabled>3</EuiNotificationBadge>
   </div>
 );
diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss
index dab6cee6ae7..e6f8694bf77 100644
--- a/src/components/badge/_badge.scss
+++ b/src/components/badge/_badge.scss
@@ -21,8 +21,9 @@
 
   &.euiBadge-isDisabled {
     // sass-lint:disable-block no-important
-    background-color: $euiColorLightestShade !important;
-    color: $euiButtonColorDisabled !important;
+    // Using !important to override inline styles
+    background-color: $euiButtonColorDisabled !important;
+    color: $euiColorEmptyShade !important;
   }
 
   &:focus-within {
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index d1fe457ad22..f998248d1e4 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -121,8 +121,6 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
     'euiBadge',
     {
       'euiBadge-isClickable': onClick && !iconOnClick,
-    },
-    {
       'euiBadge-isDisabled': isDisabled,
     },
     iconSideToClassNameMap[iconSide],
diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss
index 70141b215c1..ced5ab51118 100644
--- a/src/components/badge/beta_badge/_beta_badge.scss
+++ b/src/components/badge/beta_badge/_beta_badge.scss
@@ -15,11 +15,6 @@
 
   cursor: default;
 
-  &.euiBetaBadge-isDisabled {
-    background-color: $euiColorLightestShade;
-    color: $euiButtonColorDisabled;
-  }
-
 }
 
 // When it's just an icon, make it a circle
diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx
index f459f01730a..a84ce337a45 100644
--- a/src/components/badge/beta_badge/beta_badge.tsx
+++ b/src/components/badge/beta_badge/beta_badge.tsx
@@ -47,8 +47,6 @@ type BadgeProps = {
    */
   tooltipPosition?: ToolTipPositions;
 
-  isDisabled?: boolean;
-
   /**
    * Optional title will be supplied as tooltip title or title attribute
    * otherwise the label will be used
@@ -63,7 +61,6 @@ type EuiBetaBadgeProps = CommonProps &
 export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
   className,
   label,
-  isDisabled,
   tooltipContent,
   tooltipPosition = 'top',
   title,
@@ -75,9 +72,6 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
     {
       'euiBetaBadge--iconOnly': iconType,
     },
-    {
-      'euiBetaBadge-isDisabled': isDisabled,
-    },
     className
   );
 
diff --git a/src/components/badge/notification_badge/_notification_badge.scss b/src/components/badge/notification_badge/_notification_badge.scss
index 18a35d7ce2a..a65d08312a4 100644
--- a/src/components/badge/notification_badge/_notification_badge.scss
+++ b/src/components/badge/notification_badge/_notification_badge.scss
@@ -16,10 +16,6 @@
   transition: all $euiAnimSpeedFast ease-in;
   cursor: default;
 
-  &.euiNotificationBadge-isDisabled {
-    background-color: $euiColorLightestShade;
-    color: $euiButtonColorDisabled;
-  }
 }
 
 .euiNotificationBadge--medium {
diff --git a/src/components/badge/notification_badge/badge_notification.tsx b/src/components/badge/notification_badge/badge_notification.tsx
index 3acabe65749..b05f5851597 100644
--- a/src/components/badge/notification_badge/badge_notification.tsx
+++ b/src/components/badge/notification_badge/badge_notification.tsx
@@ -24,24 +24,13 @@ export interface EuiNotificationBadgeProps
   children: ReactNode;
   size?: BadgeNotificationSize;
   color?: BadgeNotificationColor;
-  isDisabled?: boolean;
 }
 
 export const EuiNotificationBadge: FunctionComponent<
   EuiNotificationBadgeProps
-> = ({
-  children,
-  isDisabled,
-  className,
-  size = 's',
-  color = 'accent',
-  ...rest
-}) => {
+> = ({ children, className, size = 's', color = 'accent', ...rest }) => {
   const classes = classNames(
     'euiNotificationBadge',
-    {
-      'euiNotificationBadge-isDisabled': isDisabled,
-    },
     sizeToClassNameMap[size],
     colorToClassMap[color],
     className

From a40a0d4d880f01fb8871decaf9ce875373fea95d Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 17 Oct 2019 12:33:31 -0500
Subject: [PATCH 4/5] added test and fix doc example

---
 src-docs/src/views/badge/badge.js              |  7 +++++--
 .../src/views/badge/notification_badge.tsx     |  6 +-----
 .../badge/__snapshots__/badge.test.tsx.snap    | 18 ++++++++++++++++++
 src/components/badge/_badge.scss               |  2 ++
 src/components/badge/_index.scss               |  1 -
 src/components/badge/badge.test.tsx            | 10 ++++++++++
 .../badge/beta_badge/_beta_badge.scss          |  1 -
 .../_notification_badge.scss                   |  1 -
 8 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src-docs/src/views/badge/badge.js b/src-docs/src/views/badge/badge.js
index bbfef3b8982..16111a7c2d0 100644
--- a/src-docs/src/views/badge/badge.js
+++ b/src-docs/src/views/badge/badge.js
@@ -16,14 +16,17 @@ const badges = [
   'danger',
   '#000',
   '#fea27f',
+  'disabled',
 ];
 
 export default () => (
   <EuiFlexGroup wrap responsive={false} gutterSize="xs" style={{ width: 300 }}>
     {badges.map(badge => (
       <EuiFlexItem grow={false} key={badge}>
-        <EuiBadge isDisabled={badge === '#fea27f' ? true : false} color={badge}>
-          {badge === '#fea27f' ? 'disabled' : badge}
+        <EuiBadge
+          isDisabled={badge === 'disabled' ? true : false}
+          color={badge}>
+          {badge}
         </EuiBadge>
       </EuiFlexItem>
     ))}
diff --git a/src-docs/src/views/badge/notification_badge.tsx b/src-docs/src/views/badge/notification_badge.tsx
index 695019f37fa..99c7f9e46cd 100644
--- a/src-docs/src/views/badge/notification_badge.tsx
+++ b/src-docs/src/views/badge/notification_badge.tsx
@@ -2,8 +2,4 @@ import React from 'react';
 
 import { EuiNotificationBadge } from '../../../../src/components/badge/notification_badge';
 
-export default () => (
-  <div>
-    <EuiNotificationBadge>3</EuiNotificationBadge>
-  </div>
-);
+export default () => <EuiNotificationBadge>3</EuiNotificationBadge>;
diff --git a/src/components/badge/__snapshots__/badge.test.tsx.snap b/src/components/badge/__snapshots__/badge.test.tsx.snap
index 67d41e9665e..3e7de799aa9 100644
--- a/src/components/badge/__snapshots__/badge.test.tsx.snap
+++ b/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"
diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss
index e6f8694bf77..fdcf3087485 100644
--- a/src/components/badge/_badge.scss
+++ b/src/components/badge/_badge.scss
@@ -1,3 +1,5 @@
+@import '../button/variables';
+
 /**
  * 1. Accounts for the border
  */
diff --git a/src/components/badge/_index.scss b/src/components/badge/_index.scss
index a5d83c76aef..a567f7a42de 100644
--- a/src/components/badge/_index.scss
+++ b/src/components/badge/_index.scss
@@ -1,4 +1,3 @@
-@import '../button/variables';
 @import 'badge';
 @import 'beta_badge/index';
 @import 'notification_badge/index';
diff --git a/src/components/badge/badge.test.tsx b/src/components/badge/badge.test.tsx
index 5d47bd16141..ecdfd943a77 100644
--- a/src/components/badge/badge.test.tsx
+++ b/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
diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss
index ced5ab51118..5b9b00337d8 100644
--- a/src/components/badge/beta_badge/_beta_badge.scss
+++ b/src/components/badge/beta_badge/_beta_badge.scss
@@ -14,7 +14,6 @@
   white-space: nowrap;
 
   cursor: default;
-
 }
 
 // When it's just an icon, make it a circle
diff --git a/src/components/badge/notification_badge/_notification_badge.scss b/src/components/badge/notification_badge/_notification_badge.scss
index a65d08312a4..98208442fd5 100644
--- a/src/components/badge/notification_badge/_notification_badge.scss
+++ b/src/components/badge/notification_badge/_notification_badge.scss
@@ -15,7 +15,6 @@
   text-align: center;
   transition: all $euiAnimSpeedFast ease-in;
   cursor: default;
-
 }
 
 .euiNotificationBadge--medium {

From ab77b8e54434e6808fd0baaa74ddc4bb47bcf2b6 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 17 Oct 2019 12:35:13 -0500
Subject: [PATCH 5/5] moved cl line to right position

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec7dcde0d08..b2e7d814b1a 100644
--- a/CHANGELOG.md
+++ b/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)
 
@@ -23,7 +24,6 @@
 - Added `keyboardShorcut` glyph to 'EuiIcon ([#2413](https://github.com/elastic/eui/pull/2413))
 - Improved a11y in `EuiNavDrawer` ([#2417](https://github.com/elastic/eui/pull/2417))
 - Improved a11y in `EuiSuperDatePicker` ([#2426](https://github.com/elastic/eui/pull/2426))
-- Added disabled state to `EuiBadge` ([#2440](https://github.com/elastic/eui/pull/2440))
 
 **Bug fixes**