[EuiHorizontalStep] Added current status (#4911)

Co-authored-by: cchaos <caroline.horn@elastic.co>
elastic · Jul 27, 2021 · de5873f · de5873f
1 parent 8c9380b
commit de5873f
Show file tree

Hide file tree

Showing 12 changed files with 162 additions and 75 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Updated `EuiText`s `blockquote` font-size/line-height to match the base font-size/line-height which is the same as paragraphs ([#4663](https://github.com/elastic/eui/pull/4663))
 - Added `markdownFormatProps` prop to `EuiMarkdownEditor` to extend the props passed to the rendered `EuiMarkdownFormat` ([#4663](https://github.com/elastic/eui/pull/4663))
 - Added optional virtualized line rendering to `EuiCodeBlock` ([#4952](https://github.com/elastic/eui/pull/4952))
+- Added `current` as a `status` of `EuiHorizontalStep` ([#4911](https://github.com/elastic/eui/pull/4911))
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/steps/playground.js b/src-docs/src/views/steps/playground.js
@@ -47,8 +47,6 @@ export const stepHorizontalConfig = () => {
 
   propsToUse.title.value = 'Horizontal step';
 
-  propsToUse.status = createOptionalEnum(propsToUse.status);
-
   propsToUse.onClick = simulateFunction(propsToUse.onClick, true);
 
   return {

diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js
@@ -1,7 +1,5 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -18,7 +16,6 @@ import { stepConfig, stepHorizontalConfig } from './playground';
 
 import Steps from './steps';
 const stepsSource = require('!!raw-loader!./steps');
-const stepsHtml = renderToHtml(Steps);
 const stepsSnippet = [
   `<EuiSteps
   steps={[
@@ -41,7 +38,6 @@ const stepsSnippet = [
 
 import StepsComplex from './steps_complex';
 const stepsComplexSource = require('!!raw-loader!./steps_complex');
-const stepsComplexHtml = renderToHtml(StepsComplex);
 const stepsComplexSnippet = [
   `<EuiSteps
   steps={[
@@ -90,23 +86,29 @@ const stepsComplexSnippet = [
 
 import HeadingElementSteps from './heading_element_steps';
 const headingElementStepsSource = require('!!raw-loader!./heading_element_steps');
-const headingElementStepsHtml = renderToHtml(HeadingElementSteps);
 const headingElementStepsSnippet = `<EuiSteps steps={steps} headingElement="h2" />
 `;
 
 import StepsHorizontal from './steps_horizontal';
 const stepsHorizontalSource = require('!!raw-loader!./steps_horizontal');
-const stepsHorizontalHtml = renderToHtml(StepsHorizontal);
 const stepsHorizontalSnippet = `<EuiStepsHorizontal steps={[{
-  title: 'Completed step',
-  isComplete: true,
-  onClick: function,
-}]} />
-`;
+    title: 'Completed step',
+    status: 'complete',
+    onClick: function,
+  },
+  {
+    title: 'Current step',
+    status: 'current',
+    onClick: function,
+  },
+  {
+    title: 'Incomplete step',
+    onClick: function,
+  }]}
+/>`;
 
 import Status from './status';
 const statusSource = require('!!raw-loader!./status');
-const statusHtml = renderToHtml(Steps);
 const statusSnippet = `<EuiSteps
   steps={[
     {
@@ -119,9 +121,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={steps} />
-`;
+const stepsTitleSizesSnippet = '<EuiSteps titleSize="xs" steps={steps} />';
 
 export const StepsExample = {
   title: 'Steps',
@@ -132,10 +132,6 @@ export const StepsExample = {
           type: GuideSectionTypes.JS,
           code: stepsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: stepsHtml,
-        },
       ],
       text: (
         <p>
@@ -150,6 +146,7 @@ export const StepsExample = {
       props: { EuiSteps, EuiStep },
       snippet: stepsSnippet,
       demo: <Steps />,
+      playground: stepConfig,
     },
     {
       title: 'Complex steps',
@@ -158,10 +155,6 @@ export const StepsExample = {
           type: GuideSectionTypes.JS,
           code: stepsComplexSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: stepsComplexHtml,
-        },
       ],
       text: (
         <p>
@@ -181,10 +174,6 @@ export const StepsExample = {
           type: GuideSectionTypes.JS,
           code: headingElementStepsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: headingElementStepsHtml,
-        },
       ],
       text: (
         <div>
@@ -212,10 +201,6 @@ export const StepsExample = {
           type: GuideSectionTypes.JS,
           code: statusSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: statusHtml,
-        },
       ],
       text: (
         <p>
@@ -238,10 +223,6 @@ export const StepsExample = {
           type: GuideSectionTypes.JS,
           code: stepsTitleSizesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: stepsTitleSizesHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -265,29 +246,28 @@ export const StepsExample = {
           type: GuideSectionTypes.JS,
           code: stepsHorizontalSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: stepsHorizontalHtml,
-        },
       ],
       text: (
         <Fragment>
           <p>
             For use when forms/setup instructions can and should be split into
-            multiple pages.
+            multiple pages. Each step should correspond to an individual page of
+            form elements, using the{' '}
+            <EuiCode language="tsx">{'status'}</EuiCode> key to denote the
+            user&apos;s progress.
           </p>
           <p>
-            For each step object, be sure to signify previous/completed steps
-            with <EuiCode language="ts">isComplete: true</EuiCode> and the
-            current/selected step with{' '}
-            <EuiCode language="ts">isSelected: true</EuiCode>.
+            For horizontal steps, the <EuiCode language="tsx">status</EuiCode>{' '}
+            key defaults to <EuiCode>{'"incomplete"'}</EuiCode> and the default
+            filled styling is reserved for indicating{' '}
+            <EuiCode>{'"current"'}</EuiCode> status.
           </p>
         </Fragment>
       ),
       demo: <StepsHorizontal />,
       snippet: stepsHorizontalSnippet,
       props: { EuiStepsHorizontal, EuiStepHorizontal },
+      playground: stepHorizontalConfig,
     },
   ],
-  playground: [stepConfig, stepHorizontalConfig],
 };
diff --git a/src-docs/src/views/steps/steps_horizontal.js b/src-docs/src/views/steps/steps_horizontal.js
@@ -5,12 +5,12 @@ import { EuiStepsHorizontal } from '../../../../src/components';
 const horizontalSteps = [
   {
     title: 'Completed step 1',
-    isComplete: true,
+    status: 'complete',
     onClick: () => {},
   },
   {
     title: 'Selected step 2',
-    isSelected: true,
+    status: 'current',
     onClick: () => {},
   },
   {
@@ -19,7 +19,7 @@ const horizontalSteps = [
   },
   {
     title: 'Disabled step 4',
-    disabled: true,
+    status: 'disabled',
     onClick: () => {},
   },
 ];

diff --git a/src/components/steps/__snapshots__/step.test.tsx.snap b/src/components/steps/__snapshots__/step.test.tsx.snap
@@ -110,6 +110,44 @@ exports[`EuiStep props status complete is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiStep props status current is rendered 1`] = `
+<div
+  class="euiStep"
+>
+  <div
+    class="euiStep__titleWrapper"
+  >
+    <span
+      class="euiStepNumber euiStep__circle"
+    >
+      <span
+        class="euiScreenReaderOnly"
+      >
+        Current step is 1
+      </span>
+      <span
+        aria-hidden="true"
+        class="euiStepNumber__number"
+      >
+        1
+      </span>
+    </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 danger 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
@@ -51,15 +51,15 @@ exports[`EuiStepHorizontal props isComplete 1`] = `
 exports[`EuiStepHorizontal props isSelected 1`] = `
 <button
   class="euiStepHorizontal euiStepHorizontal-isSelected"
-  title="Step 1"
+  title="Current step is 1"
 >
   <span
     class="euiStepNumber euiStepHorizontal__number"
   >
     <span
       class="euiScreenReaderOnly"
     >
-      Step 1
+      Current step is 1
     </span>
     <span
       aria-hidden="true"
@@ -76,7 +76,7 @@ exports[`EuiStepHorizontal props isSelected 1`] = `
 
 exports[`EuiStepHorizontal props status complete is rendered 1`] = `
 <button
-  class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+  class="euiStepHorizontal euiStepHorizontal-isComplete"
   title="Step 1 is complete"
 >
   <span
@@ -94,9 +94,35 @@ exports[`EuiStepHorizontal props status complete is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiStepHorizontal props status current is rendered 1`] = `
+<button
+  class="euiStepHorizontal euiStepHorizontal-isSelected"
+  title="Current step is 1"
+>
+  <span
+    class="euiStepNumber euiStepHorizontal__number"
+  >
+    <span
+      class="euiScreenReaderOnly"
+    >
+      Current step is 1
+    </span>
+    <span
+      aria-hidden="true"
+      class="euiStepNumber__number"
+    >
+      1
+    </span>
+  </span>
+  <span
+    class="euiStepHorizontal__title"
+  />
+</button>
+`;
+
 exports[`EuiStepHorizontal props status danger is rendered 1`] = `
 <button
-  class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+  class="euiStepHorizontal"
   title="Step 1"
 >
   <span
@@ -116,7 +142,7 @@ exports[`EuiStepHorizontal props status danger is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status disabled is rendered 1`] = `
 <button
-  class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+  class="euiStepHorizontal euiStepHorizontal-isDisabled"
   title="Step 1 is disabled"
 >
   <span
@@ -168,7 +194,7 @@ exports[`EuiStepHorizontal props status incomplete is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status loading is rendered 1`] = `
 <button
-  class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+  class="euiStepHorizontal"
   title="Step 1"
 >
   <span
@@ -191,7 +217,7 @@ exports[`EuiStepHorizontal props status loading is rendered 1`] = `
 
 exports[`EuiStepHorizontal props status warning is rendered 1`] = `
 <button
-  class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+  class="euiStepHorizontal"
   title="Step 1 has warnings"
 >
   <span

diff --git a/src/components/steps/__snapshots__/step_number.test.tsx.snap b/src/components/steps/__snapshots__/step_number.test.tsx.snap
@@ -66,6 +66,24 @@ exports[`EuiStepNumber props status complete is rendered 1`] = `
 </span>
 `;
 
+exports[`EuiStepNumber props status current is rendered 1`] = `
+<span
+  class="euiStepNumber"
+>
+  <span
+    class="euiScreenReaderOnly"
+  >
+    Current step is 1
+  </span>
+  <span
+    aria-hidden="true"
+    class="euiStepNumber__number"
+  >
+    1
+  </span>
+</span>
+`;
+
 exports[`EuiStepNumber props status danger is rendered 1`] = `
 <span
   class="euiStepNumber euiStepNumber--danger"