From 1dbe45e2a6317dfa75035664b411154c41c0d638 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 1 Dec 2020 17:15:27 -0500
Subject: [PATCH 1/7] Adding `loading` status to EuiStep

---
 .../steps/__snapshots__/step.test.tsx.snap    | 30 +++++++++++++++++++
 .../step_horizontal.test.tsx.snap             | 18 +++++++++++
 .../__snapshots__/step_number.test.tsx.snap   | 10 +++++++
 src/components/steps/_step_number.scss        | 15 ++++++----
 src/components/steps/_steps.scss              | 11 -------
 src/components/steps/_variables.scss          |  1 +
 src/components/steps/step_number.tsx          | 23 +++++++-------
 src/components/steps/step_strings.tsx         | 19 ++++++++++++
 src/global_styling/mixins/_button.scss        |  2 +-
 src/global_styling/mixins/_helpers.scss       |  7 +++++
 10 files changed, 109 insertions(+), 27 deletions(-)

diff --git a/src/components/steps/__snapshots__/step.test.tsx.snap b/src/components/steps/__snapshots__/step.test.tsx.snap
index 925c3dc5fdd..8ffac763989 100644
--- a/src/components/steps/__snapshots__/step.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step.test.tsx.snap
@@ -209,6 +209,36 @@ exports[`EuiStep props status incomplete is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiStep props status loading is rendered 1`] = `
+<div
+  class="euiStep"
+>
+  <div
+    class="euiStep__titleWrapper"
+  >
+    <span
+      class="euiStepNumber euiStepNumber--loading euiStep__circle"
+    >
+      <span
+        class="euiLoadingSpinner euiLoadingSpinner--medium euiStepNumber__icon"
+      />
+    </span>
+    <p
+      class="euiTitle euiTitle--small euiStep__title"
+    >
+      First step
+    </p>
+  </div>
+  <div
+    class="euiStep__content"
+  >
+    <p>
+      Do this
+    </p>
+  </div>
+</div>
+`;
+
 exports[`EuiStep props status warning is rendered 1`] = `
 <div
   class="euiStep"
diff --git a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
index 8b5a687edcc..7b27f51c493 100644
--- a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -162,6 +162,24 @@ exports[`EuiStepHorizontal props status incomplete is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiStepHorizontal props status loading is rendered 1`] = `
+<button
+  class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+  title="Step 1"
+>
+  <span
+    class="euiStepNumber euiStepNumber--loading euiStepHorizontal__number"
+  >
+    <span
+      class="euiLoadingSpinner euiLoadingSpinner--medium euiStepNumber__icon"
+    />
+  </span>
+  <span
+    class="euiStepHorizontal__title"
+  />
+</button>
+`;
+
 exports[`EuiStepHorizontal props status warning is rendered 1`] = `
 <button
   class="euiStepHorizontal euiStepHorizontal-isIncomplete"
diff --git a/src/components/steps/__snapshots__/step_number.test.tsx.snap b/src/components/steps/__snapshots__/step_number.test.tsx.snap
index a6f8a1e74d8..00c254c1aab 100644
--- a/src/components/steps/__snapshots__/step_number.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step_number.test.tsx.snap
@@ -104,6 +104,16 @@ exports[`EuiStepNumber props status incomplete is rendered 1`] = `
 </span>
 `;
 
+exports[`EuiStepNumber props status loading is rendered 1`] = `
+<span
+  class="euiStepNumber euiStepNumber--loading"
+>
+  <span
+    class="euiLoadingSpinner euiLoadingSpinner--medium euiStepNumber__icon"
+  />
+</span>
+`;
+
 exports[`EuiStepNumber props status warning is rendered 1`] = `
 <span
   class="euiStepNumber euiStepNumber--warning"
diff --git a/src/components/steps/_step_number.scss b/src/components/steps/_step_number.scss
index 01fd152b5ad..aeb39ffe5a4 100644
--- a/src/components/steps/_step_number.scss
+++ b/src/components/steps/_step_number.scss
@@ -2,6 +2,7 @@
   @include createStepsNumber;
 
   .euiStepNumber__icon {
+    vertical-align: middle;
     position: relative;
     top: -2px;
   }
@@ -15,13 +16,21 @@
   }
 
   &--complete {
-    // Thicken the checkmark but adding a slight stroke.
+    // Thicken the checkmark by adding a slight stroke.
     .euiStepNumber__icon {
       stroke: currentColor;
       stroke-width: .5px;
     }
   }
 
+  @include euiCanAnimate {
+    &--complete,
+    &--warning,
+    &--danger {
+      animation: euiGrow $euiAnimSpeedFast $euiAnimSlightBounce;
+    }
+  }
+
   &.euiStepNumber-isHollow {
     background-color: transparent;
     border: 2px solid $euiColorPrimary;
@@ -39,10 +48,6 @@
 
       color: $textColor;
       background-color: $backgroundColor;
-
-      &.euiStepNumber-isHollow {
-        border-color: $color;
-      }
     }
   }
 }
diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss
index 3fb656527a7..fe5816363c5 100644
--- a/src/components/steps/_steps.scss
+++ b/src/components/steps/_steps.scss
@@ -42,17 +42,6 @@
   flex-shrink: 0;
   margin-right: $euiStepNumberMargin;
   vertical-align: top; /* 1 */
-
-  &[class*='complete'],
-  &[class*='warning'],
-  &[class*='danger'] {
-    animation: euiGrow $euiAnimSpeedFast $euiAnimSlightBounce;
-  }
-
-  &[class*='incomplete'] {
-    border-color: $euiColorPrimary;
-    animation: none;
-  }
 }
 
 .euiStep__title {
diff --git a/src/components/steps/_variables.scss b/src/components/steps/_variables.scss
index dfb923411b4..a60be20b255 100644
--- a/src/components/steps/_variables.scss
+++ b/src/components/steps/_variables.scss
@@ -8,4 +8,5 @@ $euiStepStatusColorsToFade: (
   danger: $euiColorDanger,
   disabled: $euiColorDarkShade,
   incomplete: $euiColorDarkShade,
+  loading: $euiColorDarkShade,
 ) !default;
diff --git a/src/components/steps/step_number.tsx b/src/components/steps/step_number.tsx
index 10b393ffbca..b12ee746eb4 100644
--- a/src/components/steps/step_number.tsx
+++ b/src/components/steps/step_number.tsx
@@ -31,23 +31,19 @@ import {
   useI18nStep,
   useI18nWarningStep,
 } from './step_strings';
+import { EuiLoadingSpinner } from '../loading';
 
 const statusToClassNameMap = {
-  complete: 'euiStepNumber--complete',
   incomplete: 'euiStepNumber--incomplete',
+  disabled: 'euiStepNumber--disabled',
+  loading: 'euiStepNumber--loading',
   warning: 'euiStepNumber--warning',
   danger: 'euiStepNumber--danger',
-  disabled: 'euiStepNumber--disabled',
+  complete: 'euiStepNumber--complete',
 };
 
 export const STATUS = keysOf(statusToClassNameMap);
-
-export type EuiStepStatus =
-  | 'complete'
-  | 'incomplete'
-  | 'warning'
-  | 'danger'
-  | 'disabled';
+export type EuiStepStatus = typeof STATUS[number];
 
 export interface EuiStepNumberProps
   extends CommonProps,
@@ -58,7 +54,8 @@ export interface EuiStepNumberProps
   status?: EuiStepStatus;
   number?: number;
   /**
-   * Uses a border and removes the step number
+   * **DEPRECATED IN AMSTERDAM**
+   * Uses a border and removes the step number.
    */
   isHollow?: boolean;
   /**
@@ -81,6 +78,7 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
   const errorsAriaLabel = useI18nErrorsStep({ number });
   const incompleteAriaLabel = useI18nIncompleteStep({ number });
   const disabledAriaLabel = useI18nDisabledStep({ number });
+  const loadingAriaLabel = useI18nDisabledStep({ number });
 
   const classes = classNames(
     'euiStepNumber',
@@ -93,6 +91,7 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
   let screenReaderText = stepAriaLabel;
   if (status === 'incomplete') screenReaderText = incompleteAriaLabel;
   else if (status === 'disabled') screenReaderText = disabledAriaLabel;
+  else if (status === 'loading') screenReaderText = loadingAriaLabel;
 
   let numberOrIcon = (
     <>
@@ -130,6 +129,10 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
         aria-label={errorsAriaLabel}
       />
     );
+  } else if (status === 'loading') {
+    numberOrIcon = (
+      <EuiLoadingSpinner className="euiStepNumber__icon" size={iconSize} />
+    );
   }
 
   return (
diff --git a/src/components/steps/step_strings.tsx b/src/components/steps/step_strings.tsx
index 3eff1b41581..933dd60e7db 100644
--- a/src/components/steps/step_strings.tsx
+++ b/src/components/steps/step_strings.tsx
@@ -130,3 +130,22 @@ export const useI18nDisabledStep = ({ number, title }: Props): string => {
 
   return title ? string : simpleString;
 };
+
+export const useI18nLoadingStep = ({ number, title }: Props): string => {
+  const string = useEuiI18n(
+    'euiStepStrings.loading',
+    'Step {number}: {title} is loading',
+    {
+      number,
+      title,
+    }
+  );
+
+  const simpleString = useEuiI18n(
+    'euiStepStrings.simpleLoading',
+    'Step {number} is loading',
+    { number }
+  );
+
+  return title ? string : simpleString;
+};
diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss
index 70dd6b5c869..8937d2cf581 100644
--- a/src/global_styling/mixins/_button.scss
+++ b/src/global_styling/mixins/_button.scss
@@ -14,7 +14,7 @@
 
 // Adds the focus (and hover) animation for translating up 1px
 @mixin euiButtonFocus {
-  @media screen and (prefers-reduced-motion: no-preference) {
+  @include euiCanAnimate {
     transition: transform $euiAnimSpeedNormal ease-in-out, background $euiAnimSpeedNormal ease-in-out;
 
     &:hover:not([class*='isDisabled']) {
diff --git a/src/global_styling/mixins/_helpers.scss b/src/global_styling/mixins/_helpers.scss
index 196e75a9c76..2c48f90291f 100644
--- a/src/global_styling/mixins/_helpers.scss
+++ b/src/global_styling/mixins/_helpers.scss
@@ -88,3 +88,10 @@
     @content;
   }
 }
+
+// Doesn't have reduced motion turned on
+@mixin euiCanAnimate {
+  @media screen and (prefers-reduced-motion: no-preference) {
+    @content;
+  }
+}

From 469137ad79ed8e5172850d443d90e488be218cc7 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 2 Dec 2020 11:58:36 -0500
Subject: [PATCH 2/7] Style EuiStep for Amsterdam

---
 .../steps/__snapshots__/step.test.tsx.snap    | 13 ++-
 .../step_horizontal.test.tsx.snap             |  6 ++
 .../__snapshots__/step_number.test.tsx.snap   | 10 +++
 .../steps/__snapshots__/steps.test.tsx.snap   | 32 +++++++
 .../steps_horizontal.test.tsx.snap            |  3 +
 src/components/steps/_step_number.scss        |  4 +
 src/components/steps/_steps_horizontal.scss   |  2 +-
 src/components/steps/step.tsx                 |  1 +
 src/components/steps/step_number.tsx          |  4 +-
 .../global_styling/variables/_index.scss      |  1 +
 .../global_styling/variables/_steps.scss      |  8 ++
 .../eui-amsterdam/overrides/_index.scss       |  1 +
 .../eui-amsterdam/overrides/_steps.scss       | 86 +++++++++++++++++++
 13 files changed, 168 insertions(+), 3 deletions(-)
 create mode 100644 src/themes/eui-amsterdam/global_styling/variables/_steps.scss
 create mode 100644 src/themes/eui-amsterdam/overrides/_steps.scss

diff --git a/src/components/steps/__snapshots__/step.test.tsx.snap b/src/components/steps/__snapshots__/step.test.tsx.snap
index 8ffac763989..0955790d37a 100644
--- a/src/components/steps/__snapshots__/step.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`EuiStep is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -56,6 +57,7 @@ exports[`EuiStep props headingElement 1`] = `
       </span>
       <span
         aria-hidden="true"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -142,7 +144,7 @@ exports[`EuiStep props status danger is rendered 1`] = `
 
 exports[`EuiStep props status disabled is rendered 1`] = `
 <div
-  class="euiStep"
+  class="euiStep euiStep-isDisabled"
 >
   <div
     class="euiStep__titleWrapper"
@@ -157,6 +159,7 @@ exports[`EuiStep props status disabled is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -192,6 +195,12 @@ exports[`EuiStep props status incomplete is rendered 1`] = `
       >
         Step 1 is incomplete
       </span>
+      <span
+        aria-hidden="true"
+        class="euiStepNumber__number"
+      >
+        1
+      </span>
     </span>
     <p
       class="euiTitle euiTitle--small euiStep__title"
@@ -288,6 +297,7 @@ exports[`EuiStep props step 1`] = `
       </span>
       <span
         aria-hidden="true"
+        class="euiStepNumber__number"
       >
         5
       </span>
@@ -325,6 +335,7 @@ exports[`EuiStep props titleSize 1`] = `
       </span>
       <span
         aria-hidden="true"
+        class="euiStepNumber__number"
       >
         1
       </span>
diff --git a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
index 7b27f51c493..bc2c2dbf428 100644
--- a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`EuiStepHorizontal is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -62,6 +63,7 @@ exports[`EuiStepHorizontal props isSelected 1`] = `
     </span>
     <span
       aria-hidden="true"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -127,6 +129,7 @@ exports[`EuiStepHorizontal props status disabled is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -152,6 +155,7 @@ exports[`EuiStepHorizontal props status incomplete is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -215,6 +219,7 @@ exports[`EuiStepHorizontal props step 1`] = `
     </span>
     <span
       aria-hidden="true"
+      class="euiStepNumber__number"
     >
       5
     </span>
@@ -240,6 +245,7 @@ exports[`EuiStepHorizontal props title 1`] = `
     </span>
     <span
       aria-hidden="true"
+      class="euiStepNumber__number"
     >
       1
     </span>
diff --git a/src/components/steps/__snapshots__/step_number.test.tsx.snap b/src/components/steps/__snapshots__/step_number.test.tsx.snap
index 00c254c1aab..6926607369f 100644
--- a/src/components/steps/__snapshots__/step_number.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step_number.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`EuiStepNumber is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
+    class="euiStepNumber__number"
   />
 </span>
 `;
@@ -28,6 +29,7 @@ exports[`EuiStepNumber props has titleSize is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
+    class="euiStepNumber__number"
   >
     1
   </span>
@@ -43,6 +45,12 @@ exports[`EuiStepNumber props isHollow is rendered 1`] = `
   >
     Step 1
   </span>
+  <span
+    aria-hidden="true"
+    class="euiStepNumber__number"
+  >
+    1
+  </span>
 </span>
 `;
 
@@ -81,6 +89,7 @@ exports[`EuiStepNumber props status disabled is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
+    class="euiStepNumber__number"
   >
     1
   </span>
@@ -98,6 +107,7 @@ exports[`EuiStepNumber props status incomplete is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
+    class="euiStepNumber__number"
   >
     1
   </span>
diff --git a/src/components/steps/__snapshots__/steps.test.tsx.snap b/src/components/steps/__snapshots__/steps.test.tsx.snap
index 0aabbd5d9c3..04c6d5d6a70 100644
--- a/src/components/steps/__snapshots__/steps.test.tsx.snap
+++ b/src/components/steps/__snapshots__/steps.test.tsx.snap
@@ -22,6 +22,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
         </span>
         <span
           aria-hidden="true"
+          class="euiStepNumber__number"
         >
           1
         </span>
@@ -56,6 +57,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
         </span>
         <span
           aria-hidden="true"
+          class="euiStepNumber__number"
         >
           2
         </span>
@@ -88,6 +90,12 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
         >
           Step 3 is incomplete
         </span>
+        <span
+          aria-hidden="true"
+          class="euiStepNumber__number"
+        >
+          3
+        </span>
       </span>
       <h2
         class="euiTitle euiTitle--small euiStep__title"
@@ -128,6 +136,7 @@ exports[`EuiSteps renders steps 1`] = `
         </span>
         <span
           aria-hidden="true"
+          class="euiStepNumber__number"
         >
           1
         </span>
@@ -162,6 +171,7 @@ exports[`EuiSteps renders steps 1`] = `
         </span>
         <span
           aria-hidden="true"
+          class="euiStepNumber__number"
         >
           2
         </span>
@@ -194,6 +204,12 @@ exports[`EuiSteps renders steps 1`] = `
         >
           Step 3 is incomplete
         </span>
+        <span
+          aria-hidden="true"
+          class="euiStepNumber__number"
+        >
+          3
+        </span>
       </span>
       <p
         class="euiTitle euiTitle--small euiStep__title"
@@ -234,6 +250,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
         </span>
         <span
           aria-hidden="true"
+          class="euiStepNumber__number"
         >
           10
         </span>
@@ -268,6 +285,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
         </span>
         <span
           aria-hidden="true"
+          class="euiStepNumber__number"
         >
           11
         </span>
@@ -300,6 +318,12 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
         >
           Step 12 is incomplete
         </span>
+        <span
+          aria-hidden="true"
+          class="euiStepNumber__number"
+        >
+          12
+        </span>
       </span>
       <p
         class="euiTitle euiTitle--small euiStep__title"
@@ -340,6 +364,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `
         </span>
         <span
           aria-hidden="true"
+          class="euiStepNumber__number"
         >
           1
         </span>
@@ -374,6 +399,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `
         </span>
         <span
           aria-hidden="true"
+          class="euiStepNumber__number"
         >
           2
         </span>
@@ -406,6 +432,12 @@ exports[`EuiSteps renders steps with titleSize 1`] = `
         >
           Step 3 is incomplete
         </span>
+        <span
+          aria-hidden="true"
+          class="euiStepNumber__number"
+        >
+          3
+        </span>
       </span>
       <p
         class="euiTitle euiTitle--xsmall euiStep__title"
diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
index 3aeb863b89c..b8e6331047d 100644
--- a/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
+++ b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
@@ -47,6 +47,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
         </span>
         <span
           aria-hidden="true"
+          class="euiStepNumber__number"
         >
           2
         </span>
@@ -75,6 +76,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
         </span>
         <span
           aria-hidden="true"
+          class="euiStepNumber__number"
         >
           3
         </span>
@@ -104,6 +106,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
         </span>
         <span
           aria-hidden="true"
+          class="euiStepNumber__number"
         >
           4
         </span>
diff --git a/src/components/steps/_step_number.scss b/src/components/steps/_step_number.scss
index aeb39ffe5a4..650862ac347 100644
--- a/src/components/steps/_step_number.scss
+++ b/src/components/steps/_step_number.scss
@@ -34,6 +34,10 @@
   &.euiStepNumber-isHollow {
     background-color: transparent;
     border: 2px solid $euiColorPrimary;
+
+    .euiStepNumber__number {
+      display: none;
+    }
   }
 
   // Create modifiers based upon the map
diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss
index 88e15494a84..fc23ad69809 100644
--- a/src/components/steps/_steps_horizontal.scss
+++ b/src/components/steps/_steps_horizontal.scss
@@ -64,7 +64,7 @@
   &::after {
     content: '';
     position: absolute;
-    width: 50%;
+    width: calc(50% - #{$euiStepNumberSize / 2});
     height: 1px;
     top: $euiSizeL + ($euiStepNumberSize / 2);
     background-color: $euiColorLightShade;
diff --git a/src/components/steps/step.tsx b/src/components/steps/step.tsx
index 69bc68913bc..c42591c285f 100644
--- a/src/components/steps/step.tsx
+++ b/src/components/steps/step.tsx
@@ -70,6 +70,7 @@ export const EuiStep: FunctionComponent<EuiStepProps> = ({
     'euiStep',
     {
       'euiStep--small': titleSize === 'xs',
+      'euiStep-isDisabled': status === 'disabled',
     },
     className
   );
diff --git a/src/components/steps/step_number.tsx b/src/components/steps/step_number.tsx
index b12ee746eb4..f3b9a6d4215 100644
--- a/src/components/steps/step_number.tsx
+++ b/src/components/steps/step_number.tsx
@@ -98,7 +98,9 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
       <EuiScreenReaderOnly>
         <span>{screenReaderText}</span>
       </EuiScreenReaderOnly>
-      {!isHollow && <span aria-hidden="true">{number}</span>}
+      <span className="euiStepNumber__number" aria-hidden="true">
+        {number}
+      </span>
     </>
   );
 
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_index.scss b/src/themes/eui-amsterdam/global_styling/variables/_index.scss
index 3f521b05200..b3d6b1d5f8c 100644
--- a/src/themes/eui-amsterdam/global_styling/variables/_index.scss
+++ b/src/themes/eui-amsterdam/global_styling/variables/_index.scss
@@ -8,5 +8,6 @@
 @import 'form';
 @import 'header';
 @import 'panel';
+@import 'steps';
 @import 'typography';
 @import 'shadows';
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_steps.scss b/src/themes/eui-amsterdam/global_styling/variables/_steps.scss
new file mode 100644
index 00000000000..c0535491a32
--- /dev/null
+++ b/src/themes/eui-amsterdam/global_styling/variables/_steps.scss
@@ -0,0 +1,8 @@
+// Modifier naming and colors for step status'
+// Disabled/Loading/Incomplete are handled manually
+$euiStepStatusColors: (
+  default: $euiColorPrimary,
+  complete: $euiColorSuccess,
+  warning: $euiColorWarning,
+  danger: $euiColorDanger,
+);
diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss
index be62ef7d49b..d41a7793695 100644
--- a/src/themes/eui-amsterdam/overrides/_index.scss
+++ b/src/themes/eui-amsterdam/overrides/_index.scss
@@ -19,5 +19,6 @@
 @import 'overlay_mask';
 @import 'popover';
 @import 'progress';
+@import 'steps';
 @import 'text';
 @import 'toast';
diff --git a/src/themes/eui-amsterdam/overrides/_steps.scss b/src/themes/eui-amsterdam/overrides/_steps.scss
new file mode 100644
index 00000000000..97fd6260dd3
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_steps.scss
@@ -0,0 +1,86 @@
+.euiStepHorizontal-isDisabled .euiStepHorizontal__title,
+.euiStep-isDisabled .euiStep__title {
+  color: $euiColorDisabledText;
+}
+
+.euiStepNumber {
+  .euiStepNumber__icon {
+    position: relative;
+    top: -1px;
+  }
+
+  &--small {
+    .euiStepNumber__icon {
+      top: -1px;
+    }
+  }
+
+  &--complete,
+  &--danger {
+    // Thicken the checkmark by adding a slight stroke.
+    .euiStepNumber__icon {
+      stroke: currentColor;
+      stroke-width: .5px;
+    }
+  }
+
+  // Create modifiers based upon the map
+  @each $name, $color in $euiStepStatusColors {
+    &--#{$name} {
+      background-color: $color;
+      color: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
+    }
+  }
+
+  &.euiStepNumber--incomplete {
+    background-color: transparent;
+    color: $euiTextColor;
+    border: $euiBorderThick;
+
+    // Don't hide the step number when "hollow"
+    .euiStepNumber__number {
+      display: unset;
+      position: relative;
+      top: -2px;
+    }
+  }
+}
+
+.euiStepNumber--loading,
+.euiStepNumber--disabled {
+  $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 90%);
+  background-color: transparentize($euiButtonColorDisabled, .9);
+  color: makeDisabledContrastColor($euiButtonColorDisabled, $backgroundColorSimulated);
+}
+
+.euiStepHorizontal__title {
+  font-weight: $euiFontWeightBold;
+}
+
+.euiStepHorizontal {
+  // create the connecting lines
+  &::before,
+  &::after {
+    @include makeLineProgress;
+    background-color: $euiBorderColor;
+  }
+}
+
+// Make the line connect to the numbers
+
+.euiStep {
+  &:not(:last-of-type) {
+    background-position: left $euiSizeXL;
+  }
+
+  &--small {
+    &:not(:last-of-type) {
+      background-position: -#{$euiSizeXS} $euiSizeL;
+    }
+  }
+}
+
+.euiStep__content {
+  padding-bottom: ($euiSizeXL + $euiSizeS);
+  margin-bottom: 0;
+}

From 7c57edbac07d970ea509623f90de03cfbb0768bb Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 3 Dec 2020 15:02:44 -0500
Subject: [PATCH 3/7] Fixing up docs

---
 .../services/playground/simulateFunction.js   |  7 +-
 src-docs/src/views/steps/playground.js        | 35 +++++++++-
 src-docs/src/views/steps/steps.js             | 31 ++++++---
 src-docs/src/views/steps/steps_complex.js     | 12 ++--
 src-docs/src/views/steps/steps_example.js     | 67 ++++++++++++++++---
 src/components/steps/index.ts                 |  2 +
 src/components/steps/step_horizontal.tsx      | 10 ++-
 .../eui-amsterdam/overrides/_steps.scss       |  8 +++
 8 files changed, 146 insertions(+), 26 deletions(-)

diff --git a/src-docs/src/services/playground/simulateFunction.js b/src-docs/src/services/playground/simulateFunction.js
index 434cb50bf6e..0afdad592ac 100644
--- a/src-docs/src/services/playground/simulateFunction.js
+++ b/src-docs/src/services/playground/simulateFunction.js
@@ -1,10 +1,13 @@
 import { PropTypes } from 'react-view';
 
-export const simulateFunction = (prop = { custom: {} }) => {
+export const simulateFunction = (
+  prop = { custom: {} },
+  defaultValue = false
+) => {
   const newProp = {
     ...prop,
     type: PropTypes.Custom,
-    value: undefined,
+    value: defaultValue,
     custom: {
       ...prop.custom,
       use: 'switch',
diff --git a/src-docs/src/views/steps/playground.js b/src-docs/src/views/steps/playground.js
index 5af6be37db0..f7e2fb9cc90 100644
--- a/src-docs/src/views/steps/playground.js
+++ b/src-docs/src/views/steps/playground.js
@@ -1,8 +1,10 @@
 import { PropTypes } from 'react-view';
-import { EuiStep } from '../../../../src/components/';
+import { EuiStep, EuiStepHorizontal } from '../../../../src/components/steps';
 import {
   propUtilityForPlayground,
   createOptionalEnum,
+  simulateFunction,
+  dummyFunction,
 } from '../../services/playground';
 
 export const stepConfig = () => {
@@ -36,3 +38,34 @@ export const stepConfig = () => {
     },
   };
 };
+
+export const stepHorizontalConfig = () => {
+  const docgenInfo = Array.isArray(EuiStepHorizontal.__docgenInfo)
+    ? EuiStepHorizontal.__docgenInfo[0]
+    : EuiStepHorizontal.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.title.value = 'Horizontal step';
+
+  propsToUse.status = createOptionalEnum(propsToUse.status);
+
+  propsToUse.onClick = simulateFunction(propsToUse.onClick, true);
+
+  return {
+    config: {
+      componentName: 'EuiStepHorizontal',
+      props: propsToUse,
+      scope: {
+        EuiStepHorizontal,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiStepHorizontal'],
+        },
+      },
+      customProps: {
+        onClick: dummyFunction,
+      },
+    },
+  };
+};
diff --git a/src-docs/src/views/steps/steps.js b/src-docs/src/views/steps/steps.js
index 0a297910c55..acc6db46243 100644
--- a/src-docs/src/views/steps/steps.js
+++ b/src-docs/src/views/steps/steps.js
@@ -9,24 +9,39 @@ import {
 
 const firstSetOfSteps = [
   {
-    title:
-      'Step 1 with a long title to check what happens during wrapping which should have been fixed.',
-    children: <p>Do this first</p>,
+    title: 'Step 1',
+    children: (
+      <EuiText>
+        <p>Do this first</p>
+      </EuiText>
+    ),
   },
   {
     title: 'Step 2',
-    children: <p>Then this</p>,
+    children: (
+      <EuiText>
+        <p>Then this</p>
+      </EuiText>
+    ),
   },
 ];
 
 const nextSetOfSteps = [
   {
     title: 'Good step',
-    children: <p>Do this first</p>,
+    children: (
+      <EuiText>
+        <p>Do this first</p>
+      </EuiText>
+    ),
   },
   {
     title: 'Better step',
-    children: <p>Then this</p>,
+    children: (
+      <EuiText>
+        <p>Then this</p>
+      </EuiText>
+    ),
   },
 ];
 
@@ -34,14 +49,14 @@ export default () => (
   <div>
     <EuiSteps steps={firstSetOfSteps} />
 
+    <EuiSpacer size="m" />
     <EuiText>
-      <EuiSpacer size="m" />
       <p>
         Set <EuiCode>firstStepNumber</EuiCode> to continue step numbering after
         any type of break in the content
       </p>
-      <EuiSpacer size="m" />
     </EuiText>
+    <EuiSpacer size="m" />
 
     <EuiSteps
       firstStepNumber={firstSetOfSteps.length + 1}
diff --git a/src-docs/src/views/steps/steps_complex.js b/src-docs/src/views/steps/steps_complex.js
index ef426ee809e..4ad978ddba9 100644
--- a/src-docs/src/views/steps/steps_complex.js
+++ b/src-docs/src/views/steps/steps_complex.js
@@ -7,15 +7,19 @@ import {
   EuiCodeBlock,
   EuiSubSteps,
 } from '../../../../src/components';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 const steps = [
   {
     title: 'Step 1 has intro plus code snippet',
     children: (
-      <EuiText>
-        <p>Run this code snippet to install things.</p>
+      <>
+        <EuiText>
+          <p>Run this code snippet to install things.</p>
+        </EuiText>
+        <EuiSpacer />
         <EuiCodeBlock language="bash">npm install</EuiCodeBlock>
-      </EuiText>
+      </>
     ),
   },
   {
@@ -50,7 +54,7 @@ const steps = [
           Now that you&apos;ve completed step 2, go find the{' '}
           <EuiCode>thing</EuiCode>.
         </p>
-        <p className="euiStep__subSteps">
+        <p>
           Go to <strong>Overview &gt;&gt; Endpoints</strong> note{' '}
           <strong>Elasticsearch</strong> as <EuiCode>&lt;thing&gt;</EuiCode>.
         </p>
diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js
index 4c37ba1fb60..8cc92830e7e 100644
--- a/src-docs/src/views/steps/steps_example.js
+++ b/src-docs/src/views/steps/steps_example.js
@@ -14,7 +14,7 @@ import {
 
 import { EuiStepHorizontal } from '../../../../src/components/steps/step_horizontal';
 
-import { stepConfig } from './playground';
+import { stepConfig, stepHorizontalConfig } from './playground';
 
 import Steps from './steps';
 const stepsSource = require('!!raw-loader!./steps');
@@ -24,7 +24,7 @@ const stepsSnippet = [
   steps={[
     {
       title: 'Step 1',
-      children: <p>Do this first</p>,
+      children: <EuiText><p>Do this first</p></EuiText>,
     },
   ]}
 />`,
@@ -33,7 +33,7 @@ const stepsSnippet = [
   steps={[
     {
       title: 'Step 3',
-      children: <p>Do this third first</p>,
+      children: <EuiText><p>Do this third first</p></EuiText>,
     },
   ]}
 />`,
@@ -42,6 +42,51 @@ const stepsSnippet = [
 import StepsComplex from './steps_complex';
 const stepsComplexSource = require('!!raw-loader!./steps_complex');
 const stepsComplexHtml = renderToHtml(StepsComplex);
+const stepsComplexSnippet = [
+  `<EuiSteps
+  steps={[
+    {
+      title: 'Step 1 has intro plus code snippet',
+      children: (
+        <>
+          <EuiText>
+            <p>Run this code snippet to install things.</p>
+          </EuiText>
+          <EuiSpacer />
+          <EuiCodeBlock language="bash">npm install</EuiCodeBlock>
+        </>
+      ),
+    },
+  ]}
+/>`,
+  `<EuiSteps
+  steps={[
+    {
+      title: 'Step 2 has sub steps',
+      children: (
+        <EuiText>
+          <p>
+            In order to complete this step, do the following things <strong>in order</strong>.
+          </p>
+          <EuiSubSteps>
+            <ol>
+              <li>Do thing 1</li>
+              <li>Do thing 2</li>
+              <li>Do thing 3</li>
+            </ol>
+          </EuiSubSteps>
+          <p>Here are some bullet point reminders.</p>
+          <ul>
+            <li>Reminder 1</li>
+            <li>Reminder 2</li>
+            <li>Reminder 3</li>
+          </ul>
+        </EuiText>
+      ),
+    },
+  ]}
+/>`,
+];
 
 import HeadingElementSteps from './heading_element_steps';
 const headingElementStepsSource = require('!!raw-loader!./heading_element_steps');
@@ -75,9 +120,7 @@ const statusSnippet = `<EuiSteps
 import StepsTitleSizes from './steps_title_sizes';
 const stepsTitleSizesSource = require('!!raw-loader!./steps_title_sizes');
 const stepsTitleSizesHtml = renderToHtml(StepsTitleSizes);
-const stepsTitleSizesSnippet = `<EuiSteps titleSize="xs" steps={[{
-  title: 'Completed step',
-}]} />
+const stepsTitleSizesSnippet = `<EuiSteps titleSize="xs" steps={steps} />
 `;
 
 export const StepsExample = {
@@ -97,7 +140,11 @@ export const StepsExample = {
       text: (
         <p>
           <strong>EuiSteps</strong> presents procedural content in a numbered
-          outline format.
+          outline format. It is best used when presenting instructional content
+          that must be conducted in a particular order. It requires a{' '}
+          <EuiCode>title</EuiCode> and <EuiCode>children</EuiCode> to be present
+          and will automatically increment the step number based on the initial{' '}
+          <EuiCode>firstStepNumber</EuiCode>.
         </p>
       ),
       props: { EuiSteps, EuiStep },
@@ -125,6 +172,7 @@ export const StepsExample = {
       ),
       demo: <StepsComplex />,
       props: { EuiSubSteps },
+      snippet: stepsComplexSnippet,
     },
     {
       title: 'Heading elements',
@@ -174,7 +222,8 @@ export const StepsExample = {
           Steps can optionally include <EuiCode>status</EuiCode> prop that will
           alter the look of the number prefix. The options are{' '}
           <EuiCode>incomplete</EuiCode>, <EuiCode>complete</EuiCode>,{' '}
-          <EuiCode>warning</EuiCode>, and <EuiCode>danger</EuiCode>. This is
+          <EuiCode>warning</EuiCode>, <EuiCode>danger</EuiCode>,{' '}
+          <EuiCode>disabled</EuiCode> and <EuiCode>loading</EuiCode>. This is
           used mostly as a final step when you need to make some sort of final
           check.
         </p>
@@ -240,5 +289,5 @@ export const StepsExample = {
       props: { EuiStepsHorizontal, EuiStepHorizontal },
     },
   ],
-  playground: stepConfig,
+  playground: [stepConfig, stepHorizontalConfig],
 };
diff --git a/src/components/steps/index.ts b/src/components/steps/index.ts
index ced5b7c87a3..8c5b2d76fc9 100644
--- a/src/components/steps/index.ts
+++ b/src/components/steps/index.ts
@@ -23,6 +23,8 @@ export { EuiSteps, EuiStepsProps } from './steps';
 
 export { EuiSubSteps, EuiSubStepsProps } from './sub_steps';
 
+export { EuiStepHorizontal } from './step_horizontal';
+
 export {
   EuiStepsHorizontal,
   EuiStepsHorizontalProps,
diff --git a/src/components/steps/step_horizontal.tsx b/src/components/steps/step_horizontal.tsx
index cfbd820c435..64770589d34 100644
--- a/src/components/steps/step_horizontal.tsx
+++ b/src/components/steps/step_horizontal.tsx
@@ -38,14 +38,19 @@ export interface EuiStepHorizontalProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>,
     CommonProps {
   /**
-   * Is the current step
+   * **DEPRECATED IN AMSTERDAM**
+   * Adds to the line before the indicator for showing current progress
    */
   isSelected?: boolean;
   /**
-   * Is a previous step that has been completed
+   * **DEPRECATED IN AMSTERDAM**
+   * Adds to the line after the indicator for showing current progress
    */
   isComplete?: boolean;
   onClick: MouseEventHandler<HTMLButtonElement>;
+  /**
+   * Makes the whole step button disabled.
+   */
   disabled?: boolean;
   /**
    * The number of the step in the list of steps
@@ -53,6 +58,7 @@ export interface EuiStepHorizontalProps
   step?: number;
   title?: string;
   /**
+   * Visual representation of the step number indicator.
    * May replace the number provided in props.step with alternate styling.
    * The `isSelected`, `isComplete`, and `disabled` props will override these.
    */
diff --git a/src/themes/eui-amsterdam/overrides/_steps.scss b/src/themes/eui-amsterdam/overrides/_steps.scss
index 97fd6260dd3..297fa4acb7b 100644
--- a/src/themes/eui-amsterdam/overrides/_steps.scss
+++ b/src/themes/eui-amsterdam/overrides/_steps.scss
@@ -1,8 +1,11 @@
+// Make the disabled step title the same disabled text color
 .euiStepHorizontal-isDisabled .euiStepHorizontal__title,
 .euiStep-isDisabled .euiStep__title {
   color: $euiColorDisabledText;
 }
 
+// STEP NUMBER CHANGES
+
 .euiStepNumber {
   .euiStepNumber__icon {
     position: relative;
@@ -84,3 +87,8 @@
   padding-bottom: ($euiSizeXL + $euiSizeS);
   margin-bottom: 0;
 }
+
+// Remove forced background from horizontal steps
+.euiStepsHorizontal {
+  background: none;
+}

From 5f7bad45754ce296fe9c0f5694c76b4c9f6cc904 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 3 Dec 2020 15:31:50 -0500
Subject: [PATCH 4/7] cl

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a8cc48e6a6..3326e462ae9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Adjusted the shadow in `EuiComment` ([#4321](https://github.com/elastic/eui/pull/4321))
 - Added `success` and `warning` colors to `EuiButtonEmpty` ([#4325](https://github.com/elastic/eui/pull/4325))
+- Added `disabled` and `loading` `status` to `EuiStep` ([#4338](https://github.com/elastic/eui/pull/4338))
 
 **Bug fixes**
 

From a78eebcd87819f82e0a49d978bc21a5ebb400a85 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 3 Dec 2020 16:11:51 -0500
Subject: [PATCH 5/7] Fix a11y

---
 .../steps/__snapshots__/step.test.tsx.snap       |  5 +++++
 .../__snapshots__/step_horizontal.test.tsx.snap  |  5 +++++
 .../__snapshots__/step_number.test.tsx.snap      |  5 +++++
 src/components/steps/_steps_horizontal.scss      | 16 ++++++++--------
 src/components/steps/step_number.tsx             | 10 ++++++++--
 src/themes/eui-amsterdam/overrides/_steps.scss   |  9 +++++++++
 6 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/components/steps/__snapshots__/step.test.tsx.snap b/src/components/steps/__snapshots__/step.test.tsx.snap
index 0955790d37a..03e88f14d93 100644
--- a/src/components/steps/__snapshots__/step.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step.test.tsx.snap
@@ -228,6 +228,11 @@ exports[`EuiStep props status loading is rendered 1`] = `
     <span
       class="euiStepNumber euiStepNumber--loading euiStep__circle"
     >
+      <span
+        class="euiScreenReaderOnly"
+      >
+        Step 1 is loading
+      </span>
       <span
         class="euiLoadingSpinner euiLoadingSpinner--medium euiStepNumber__icon"
       />
diff --git a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
index bc2c2dbf428..76443b83608 100644
--- a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -174,6 +174,11 @@ exports[`EuiStepHorizontal props status loading is rendered 1`] = `
   <span
     class="euiStepNumber euiStepNumber--loading euiStepHorizontal__number"
   >
+    <span
+      class="euiScreenReaderOnly"
+    >
+      Step 1 is loading
+    </span>
     <span
       class="euiLoadingSpinner euiLoadingSpinner--medium euiStepNumber__icon"
     />
diff --git a/src/components/steps/__snapshots__/step_number.test.tsx.snap b/src/components/steps/__snapshots__/step_number.test.tsx.snap
index 6926607369f..aef4e8d5062 100644
--- a/src/components/steps/__snapshots__/step_number.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step_number.test.tsx.snap
@@ -118,6 +118,11 @@ exports[`EuiStepNumber props status loading is rendered 1`] = `
 <span
   class="euiStepNumber euiStepNumber--loading"
 >
+  <span
+    class="euiScreenReaderOnly"
+  >
+    Step 1 is loading
+  </span>
   <span
     class="euiLoadingSpinner euiLoadingSpinner--medium euiStepNumber__icon"
   />
diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss
index fc23ad69809..c09e1904989 100644
--- a/src/components/steps/_steps_horizontal.scss
+++ b/src/components/steps/_steps_horizontal.scss
@@ -41,19 +41,19 @@
   // focus & hover state
   &:focus:not(.euiStepHorizontal-isDisabled),
   &:hover:not(.euiStepHorizontal-isDisabled) {
-    .euiStepHorizontal__number {
-      @include euiFocusRing(large);
-
-      // sass-lint:disable-block indentation
-      transition: background-color $euiAnimSpeedNormal $euiAnimSlightResistance,
-                  color $euiAnimSpeedNormal $euiAnimSlightResistance;
-    }
-
     .euiStepHorizontal__title {
       text-decoration: underline;
     }
   }
 
+  &:focus:not(.euiStepHorizontal-isDisabled) {
+    outline: none;
+
+    .euiStepHorizontal__number {
+      @include euiFocusRing(large);
+    }
+  }
+
   // disabled state
   &.euiStepHorizontal-isDisabled {
     cursor: not-allowed;
diff --git a/src/components/steps/step_number.tsx b/src/components/steps/step_number.tsx
index f3b9a6d4215..51952411629 100644
--- a/src/components/steps/step_number.tsx
+++ b/src/components/steps/step_number.tsx
@@ -30,6 +30,7 @@ import {
   useI18nIncompleteStep,
   useI18nStep,
   useI18nWarningStep,
+  useI18nLoadingStep,
 } from './step_strings';
 import { EuiLoadingSpinner } from '../loading';
 
@@ -78,7 +79,7 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
   const errorsAriaLabel = useI18nErrorsStep({ number });
   const incompleteAriaLabel = useI18nIncompleteStep({ number });
   const disabledAriaLabel = useI18nDisabledStep({ number });
-  const loadingAriaLabel = useI18nDisabledStep({ number });
+  const loadingAriaLabel = useI18nLoadingStep({ number });
 
   const classes = classNames(
     'euiStepNumber',
@@ -133,7 +134,12 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
     );
   } else if (status === 'loading') {
     numberOrIcon = (
-      <EuiLoadingSpinner className="euiStepNumber__icon" size={iconSize} />
+      <>
+        <EuiScreenReaderOnly>
+          <span>{screenReaderText}</span>
+        </EuiScreenReaderOnly>
+        <EuiLoadingSpinner className="euiStepNumber__icon" size={iconSize} />
+      </>
     );
   }
 
diff --git a/src/themes/eui-amsterdam/overrides/_steps.scss b/src/themes/eui-amsterdam/overrides/_steps.scss
index 297fa4acb7b..f584b35d51f 100644
--- a/src/themes/eui-amsterdam/overrides/_steps.scss
+++ b/src/themes/eui-amsterdam/overrides/_steps.scss
@@ -7,6 +7,8 @@
 // STEP NUMBER CHANGES
 
 .euiStepNumber {
+  outline-color: $euiColorPrimary;
+
   .euiStepNumber__icon {
     position: relative;
     top: -1px;
@@ -32,6 +34,7 @@
     &--#{$name} {
       background-color: $color;
       color: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
+      outline-color: chooseLightOrDarkText($color, $color, $euiColorInk) !important; // sass-lint:disable-line no-important
     }
   }
 
@@ -92,3 +95,9 @@
 .euiStepsHorizontal {
   background: none;
 }
+
+// Fix outline in Chrome for horizontal steps
+.euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__number:not(:focus-visible) {
+  outline: $euiFocusRingSize solid $euiColorPrimary;
+}
+

From 00657b05ef245ae07e78559932c559ecbe972372 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 7 Dec 2020 15:43:40 -0500
Subject: [PATCH 6/7] Change loading state to use full size spinner

---
 src/components/steps/__snapshots__/step.test.tsx.snap        | 2 +-
 .../steps/__snapshots__/step_horizontal.test.tsx.snap        | 2 +-
 src/components/steps/__snapshots__/step_number.test.tsx.snap | 2 +-
 src/components/steps/_step_number.scss                       | 4 ++++
 src/components/steps/_steps_horizontal.scss                  | 2 +-
 src/components/steps/_variables.scss                         | 1 -
 src/components/steps/step_number.tsx                         | 5 ++++-
 src/themes/eui-amsterdam/overrides/_steps.scss               | 1 -
 8 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/steps/__snapshots__/step.test.tsx.snap b/src/components/steps/__snapshots__/step.test.tsx.snap
index 03e88f14d93..e27766765f9 100644
--- a/src/components/steps/__snapshots__/step.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step.test.tsx.snap
@@ -234,7 +234,7 @@ exports[`EuiStep props status loading is rendered 1`] = `
         Step 1 is loading
       </span>
       <span
-        class="euiLoadingSpinner euiLoadingSpinner--medium euiStepNumber__icon"
+        class="euiLoadingSpinner euiLoadingSpinner--xLarge euiStepNumber__loader"
       />
     </span>
     <p
diff --git a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
index 76443b83608..31961ee55a0 100644
--- a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -180,7 +180,7 @@ exports[`EuiStepHorizontal props status loading is rendered 1`] = `
       Step 1 is loading
     </span>
     <span
-      class="euiLoadingSpinner euiLoadingSpinner--medium euiStepNumber__icon"
+      class="euiLoadingSpinner euiLoadingSpinner--xLarge euiStepNumber__loader"
     />
   </span>
   <span
diff --git a/src/components/steps/__snapshots__/step_number.test.tsx.snap b/src/components/steps/__snapshots__/step_number.test.tsx.snap
index aef4e8d5062..e64f34b57bb 100644
--- a/src/components/steps/__snapshots__/step_number.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step_number.test.tsx.snap
@@ -124,7 +124,7 @@ exports[`EuiStepNumber props status loading is rendered 1`] = `
     Step 1 is loading
   </span>
   <span
-    class="euiLoadingSpinner euiLoadingSpinner--medium euiStepNumber__icon"
+    class="euiLoadingSpinner euiLoadingSpinner--xLarge euiStepNumber__loader"
   />
 </span>
 `;
diff --git a/src/components/steps/_step_number.scss b/src/components/steps/_step_number.scss
index 650862ac347..0b641b96db8 100644
--- a/src/components/steps/_step_number.scss
+++ b/src/components/steps/_step_number.scss
@@ -31,6 +31,10 @@
     }
   }
 
+  &--loading {
+    background: transparent;
+  }
+
   &.euiStepNumber-isHollow {
     background-color: transparent;
     border: 2px solid $euiColorPrimary;
diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss
index c09e1904989..32d2326003b 100644
--- a/src/components/steps/_steps_horizontal.scss
+++ b/src/components/steps/_steps_horizontal.scss
@@ -107,7 +107,7 @@
 
 // Selected state
 .euiStepHorizontal-isSelected {
-  .euiStepHorizontal__number:not([class*='danger']):not([class*='warning']) {
+  .euiStepHorizontal__number:not([class*='danger']):not([class*='warning']):not([class*='loading']) {
     @include euiSlightShadow(desaturate($euiColorPrimary, 20%));
   }
 
diff --git a/src/components/steps/_variables.scss b/src/components/steps/_variables.scss
index a60be20b255..dfb923411b4 100644
--- a/src/components/steps/_variables.scss
+++ b/src/components/steps/_variables.scss
@@ -8,5 +8,4 @@ $euiStepStatusColorsToFade: (
   danger: $euiColorDanger,
   disabled: $euiColorDarkShade,
   incomplete: $euiColorDarkShade,
-  loading: $euiColorDarkShade,
 ) !default;
diff --git a/src/components/steps/step_number.tsx b/src/components/steps/step_number.tsx
index 51952411629..203b68348da 100644
--- a/src/components/steps/step_number.tsx
+++ b/src/components/steps/step_number.tsx
@@ -138,7 +138,10 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
         <EuiScreenReaderOnly>
           <span>{screenReaderText}</span>
         </EuiScreenReaderOnly>
-        <EuiLoadingSpinner className="euiStepNumber__icon" size={iconSize} />
+        <EuiLoadingSpinner
+          className="euiStepNumber__loader"
+          size={iconSize === 's' ? 'l' : 'xl'}
+        />
       </>
     );
   }
diff --git a/src/themes/eui-amsterdam/overrides/_steps.scss b/src/themes/eui-amsterdam/overrides/_steps.scss
index f584b35d51f..c74ac2fce3e 100644
--- a/src/themes/eui-amsterdam/overrides/_steps.scss
+++ b/src/themes/eui-amsterdam/overrides/_steps.scss
@@ -52,7 +52,6 @@
   }
 }
 
-.euiStepNumber--loading,
 .euiStepNumber--disabled {
   $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 90%);
   background-color: transparentize($euiButtonColorDisabled, .9);

From c59eb5c89d734dd34cbc89190a521320675bbac9 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 7 Dec 2020 16:07:41 -0500
Subject: [PATCH 7/7] cl

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 995a1472777..7327077c5b0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@
 - Removed the shadow in `EuiComment` ([#4321](https://github.com/elastic/eui/pull/4321))
 - Reduced font size for `xs` size in `EuiButtonEmpty` ([#4325](https://github.com/elastic/eui/pull/4325))
 - Increased font size for `m` size of `EuiListGroupItem` ([#4340](https://github.com/elastic/eui/pull/4340))
+- Consolidated `EuiStepNumber` indicators for `EuiSteps` and `EuiHorizontalSteps` ([#4338](https://github.com/elastic/eui/pull/4338))
 
 ## [`30.5.1`](https://github.com/elastic/eui/tree/v30.5.1)