Removed isSelected and isComplete props from EuiHorizontalStep

src/components/steps/__snapshots__/step_horizontal.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`EuiStepHorizontal is rendered 1`] = `
 </button>
 `;
 
-exports[`EuiStepHorizontal props isComplete 1`] = `
+exports[`EuiStepHorizontal props status complete is rendered 1`] = `
 <button
   class="euiStepHorizontal euiStepHorizontal-isComplete"
   title="Step 1 is complete"
@@ -49,7 +49,7 @@ exports[`EuiStepHorizontal props isComplete 1`] = `
 </button>
 `;
 
-exports[`EuiStepHorizontal props isSelected 1`] = `
+exports[`EuiStepHorizontal props status current is rendered 1`] = `
 <button
   class="euiStepHorizontal euiStepHorizontal-isSelected"
   title="Current step is 1"
@@ -75,19 +75,19 @@ exports[`EuiStepHorizontal props isSelected 1`] = `
 </button>
 `;
 
-exports[`EuiStepHorizontal props status complete is rendered 1`] = `
+exports[`EuiStepHorizontal props status danger is rendered 1`] = `
 <button
-  class="euiStepHorizontal euiStepHorizontal-isComplete"
-  title="Step 1 is complete"
+  class="euiStepHorizontal"
+  title="Step 1"
 >
   <span
-    class="euiStepNumber euiStepNumber--complete euiStepHorizontal__number"
+    class="euiStepNumber euiStepNumber--danger euiStepHorizontal__number"
   >
     <span
       class="euiStepNumber__icon"
-      data-euiicon-type="check"
+      data-euiicon-type="cross"
     >
-      Step 1 is complete
+      Step 1 has errors
     </span>
   </span>
   <span
@@ -96,18 +96,18 @@ exports[`EuiStepHorizontal props status complete is rendered 1`] = `
 </button>
 `;
 
-exports[`EuiStepHorizontal props status current is rendered 1`] = `
+exports[`EuiStepHorizontal props status disabled is rendered 1`] = `
 <button
-  class="euiStepHorizontal euiStepHorizontal-isSelected"
-  title="Current step is 1"
+  class="euiStepHorizontal euiStepHorizontal-isDisabled"
+  title="Step 1 is disabled"
 >
   <span
-    class="euiStepNumber euiStepHorizontal__number"
+    class="euiStepNumber euiStepNumber--disabled euiStepHorizontal__number"
   >
     <span
       class="euiScreenReaderOnly"
     >
-      Current step is 1
+      Step 1 is disabled
     </span>
     <span
       aria-hidden="true"
@@ -122,30 +122,10 @@ exports[`EuiStepHorizontal props status current is rendered 1`] = `
 </button>
 `;
 
-exports[`EuiStepHorizontal props status danger is rendered 1`] = `
-<button
-  class="euiStepHorizontal"
-  title="Step 1"
->
-  <span
-    class="euiStepNumber euiStepNumber--danger euiStepHorizontal__number"
-  >
-    <span
-      class="euiStepNumber__icon"
-      data-euiicon-type="cross"
-    >
-      Step 1 has errors
-    </span>
-  </span>
-  <span
-    class="euiStepHorizontal__title"
-  />
-</button>
-`;
-
-exports[`EuiStepHorizontal props status disabled is rendered 1`] = `
+exports[`EuiStepHorizontal props status disabled overrides the passed status 1`] = `
 <button
   class="euiStepHorizontal euiStepHorizontal-isDisabled"
+  disabled=""
   title="Step 1 is disabled"
 >
   <span

src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap

@@ -94,7 +94,6 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
   >
     <button
       class="euiStepHorizontal euiStepHorizontal-isDisabled"
-      disabled=""
       title="Step 4: Disabled Step 4 is disabled"
     >
       <span

src/components/steps/step_horizontal.test.tsx

@@ -39,22 +39,6 @@ describe('EuiStepHorizontal', () => {
       expect(component).toMatchSnapshot();
     });
 
-    test('isSelected', () => {
-      const component = render(
-        <EuiStepHorizontal isSelected onClick={() => {}} />
-      );
-
-      expect(component).toMatchSnapshot();
-    });
-
-    test('isComplete', () => {
-      const component = render(
-        <EuiStepHorizontal isComplete onClick={() => {}} />
-      );
-
-      expect(component).toMatchSnapshot();
-    });
-
     describe('status', () => {
       STATUS.forEach((status) => {
         test(`${status} is rendered`, () => {
@@ -65,6 +49,14 @@ describe('EuiStepHorizontal', () => {
           expect(component).toMatchSnapshot();
         });
       });
+
+      test('disabled overrides the passed status', () => {
+        const component = render(
+          <EuiStepHorizontal status="current" disabled onClick={() => {}} />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
     });
 
     describe('onClick', () => {

src/components/steps/step_horizontal.tsx

@@ -27,16 +27,6 @@ import {
 export interface EuiStepHorizontalProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>,
     CommonProps {
-  /**
-   * **DEPRECATED: Use `status = 'current'` instead**
-   * Adds to the line before the indicator for showing current progress
-   */
-  isSelected?: boolean;
-  /**
-   * **DEPRECATED: Use `status = 'complete'` instead**
-   * Adds to the line after the indicator for showing current progress
-   */
-  isComplete?: boolean;
   onClick: MouseEventHandler<HTMLButtonElement>;
   /**
    * Makes the whole step button disabled.
@@ -59,8 +49,6 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
   className,
   step = 1,
   title,
-  isSelected,
-  isComplete,
   onClick,
   disabled,
   status = 'incomplete',
@@ -74,8 +62,6 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
   const currentTitle = useI18nCurrentStep({ number: step, title });
 
   if (disabled) status = 'disabled';
-  else if (isComplete) status = 'complete';
-  else if (isSelected) status = 'current';
 
   const classes = classNames('euiStepHorizontal', className, {
     'euiStepHorizontal-isSelected': status === 'current',

src/components/steps/steps_horizontal.test.tsx

@@ -10,17 +10,18 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test';
 
+import { EuiStepStatus } from './step_number';
 import { EuiStepsHorizontal } from './steps_horizontal';
 
 const steps = [
   {
     title: 'Completed Step 1',
-    isComplete: true,
+    status: 'complete' as EuiStepStatus,
     onClick: () => {},
   },
   {
     title: 'Selected Step 2',
-    isSelected: true,
+    status: 'current' as EuiStepStatus,
     onClick: () => {},
   },
   {
@@ -29,7 +30,7 @@ const steps = [
   },
   {
     title: 'Disabled Step 4',
-    disabled: true,
+    status: 'disabled' as EuiStepStatus,
     onClick: () => {},
   },
 ];

src/components/steps/steps_horizontal.tsx

@@ -31,7 +31,7 @@ export const EuiStepsHorizontal: FunctionComponent<EuiStepsHorizontalProps> = ({
     <ol className={classes} {...rest}>
       {steps.map((stepProps, index) => {
         const isCurrent =
-          stepProps.isSelected || stepProps.status === 'current'
+          stepProps.status === 'current'
             ? { 'aria-current': 'step' as const }
             : {};
 

upcoming_changelogs/5868.md

@@ -4,3 +4,4 @@
 - Removed `partition` prop from EuiCharts theme configuration - use `theme.partition` instead
 - Removed `data-grid-cell-id` attribute from `EuiDataGrid` cells - use separate `data-gridcell-column-id` & `data-gridcell-row-index` attributes instead
 - Removed `noDivider` prop from `EuiFilterButton` - use `withNext` prop instead
+- Removed `isSelected` and `isComplete` props from `EuiHorizontalStep` - use `status` prop instead