[EuiSteps] Add support for unordered steps

packages/eui/changelogs/upcoming/7813.md

@@ -0,0 +1,3 @@
+- Updated `EuiSteps` to support a new `titleSize="xxs"` style, which outputs the same title font size but smaller unnumbered step indicators
+- Updated `EuiStepsHorizontal` to support a new `size="xs"` style, which outputs smaller unnumbered step indicators
+- Updated `EuiStepNumber` to support new `titleSize="none"` which omits rendering step numbers, and will only render icons

packages/eui/src-docs/src/views/steps/steps_example.js

@@ -225,14 +225,21 @@ export const StepsExample = {
         },
       ],
       text: (
-        <p>
-          You can set a different title size using <EuiCode>titleSize</EuiCode>.
-          If <EuiCode>titleSize</EuiCode> is set in both{' '}
-          <strong>EuiSteps</strong> and <strong>EuiStep</strong>, the latter
-          value will override the former. Additionally, the title size{' '}
-          <EuiCode>xs</EuiCode> will automatically generate smaller steps
-          circles.
-        </p>
+        <>
+          <p>
+            You can set a different title size using{' '}
+            <EuiCode>titleSize</EuiCode>. If <EuiCode>titleSize</EuiCode> is set
+            in both <strong>EuiSteps</strong> and <strong>EuiStep</strong>, the
+            latter value will override the former. Additionally, the title size{' '}
+            <EuiCode>xs</EuiCode> will automatically generate smaller steps
+            circles.
+          </p>
+          <p>
+            The title size <EuiCode>xxs</EuiCode> affects only the size of the
+            accompanying <strong>unnumbered</strong> step indicator, but not the
+            title itself.
+          </p>
+        </>
       ),
       demo: <StepsTitleSizes />,
       snippet: stepsTitleSizesSnippet,

packages/eui/src-docs/src/views/steps/steps_horizontal.tsx

@@ -33,6 +33,10 @@ export default () => {
   ];
 
   const sizeButtons = [
+    {
+      id: 'xs',
+      label: 'XSmall',
+    },
     {
       id: 's',
       label: 'Small',

packages/eui/src-docs/src/views/steps/steps_title_sizes.tsx

@@ -1,26 +1,77 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-import { EuiCode, EuiSteps } from '../../../../src/components';
+import {
+  EuiButtonGroup,
+  EuiCode,
+  EuiSpacer,
+  EuiSteps,
+  EuiTitle,
+} from '../../../../src/components';
+import { EuiStepInterface } from '../../../../src/components/steps/step';
 
-const firstSetOfSteps = [
+const firstSetOfSteps: EuiStepInterface[] = [
   {
     title: 'Step 1',
     children: (
       <p>
-        Steps with <EuiCode>titleSize</EuiCode> set to <EuiCode>xs</EuiCode>{' '}
-        like this one, get a smaller step circle
+        Both step title and circle indicators will adjust in size based on the{' '}
+        <EuiCode>titleSize</EuiCode> prop
       </p>
     ),
   },
   {
     title: 'Step 2',
     children: (
       <p>
-        Steps with <EuiCode>titleSize</EuiCode> set to <EuiCode>xs</EuiCode>{' '}
-        like this one, get a smaller step circle
+        Both step title and circle indicators will adjust in size based on the{' '}
+        <EuiCode>titleSize</EuiCode> prop
       </p>
     ),
   },
 ];
 
-export default () => <EuiSteps titleSize="xs" steps={firstSetOfSteps} />;
+const sizeButtons = [
+  {
+    id: 'xxs',
+    label: 'XXSmall',
+  },
+  {
+    id: 'xs',
+    label: 'XSmall',
+  },
+  {
+    id: 's',
+    label: 'Small',
+  },
+  {
+    id: 'm',
+    label: 'Medium',
+  },
+];
+
+type StepSizes = NonNullable<EuiStepInterface['titleSize']>;
+
+export default () => {
+  const [titleSize, setTitleSize] = useState<StepSizes>('m');
+
+  const sizeOnChange = (optionId: StepSizes) => {
+    setTitleSize(optionId);
+  };
+
+  return (
+    <>
+      <EuiTitle size="xxs">
+        <h3>Step Size</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiButtonGroup
+        legend="Horizontal step size toggle"
+        options={sizeButtons}
+        idSelected={titleSize}
+        onChange={(id) => sizeOnChange(id as StepSizes)}
+      />
+      <EuiSpacer size="m" />
+      <EuiSteps titleSize={titleSize} steps={firstSetOfSteps} />
+    </>
+  );
+};

packages/eui/src/components/steps/__snapshots__/step.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`EuiStep is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s"
+      class="euiStepNumber emotion-euiStepNumber-s-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -48,7 +48,7 @@ exports[`EuiStep props headingElement 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s"
+      class="euiStepNumber emotion-euiStepNumber-s-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -86,7 +86,7 @@ exports[`EuiStep props status complete is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-complete"
+      class="euiStepNumber emotion-euiStepNumber-s-complete-EuiStep"
     >
       <span
         class="euiStepNumber__icon emotion-euiStepNumber__icon-complete"
@@ -119,7 +119,7 @@ exports[`EuiStep props status current is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-current"
+      class="euiStepNumber emotion-euiStepNumber-s-current-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -157,7 +157,7 @@ exports[`EuiStep props status danger is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-danger"
+      class="euiStepNumber emotion-euiStepNumber-s-danger-EuiStep"
     >
       <span
         class="euiStepNumber__icon emotion-euiStepNumber__icon-danger"
@@ -190,7 +190,7 @@ exports[`EuiStep props status disabled is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-disabled"
+      class="euiStepNumber emotion-euiStepNumber-s-disabled-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -228,7 +228,7 @@ exports[`EuiStep props status incomplete is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-incomplete"
+      class="euiStepNumber emotion-euiStepNumber-s-incomplete-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -266,7 +266,7 @@ exports[`EuiStep props status loading is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-loading"
+      class="euiStepNumber emotion-euiStepNumber-s-loading-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -303,7 +303,7 @@ exports[`EuiStep props status warning is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-warning"
+      class="euiStepNumber emotion-euiStepNumber-s-warning-EuiStep"
     >
       <span
         class="euiStepNumber__icon emotion-euiStepNumber__icon-warning"
@@ -336,7 +336,7 @@ exports[`EuiStep props step 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s"
+      class="euiStepNumber emotion-euiStepNumber-s-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -374,7 +374,7 @@ exports[`EuiStep props titleSize 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-xs"
+      class="euiStepNumber emotion-euiStepNumber-xs-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"

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

@@ -83,6 +83,27 @@ exports[`EuiStepHorizontal props size s is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiStepHorizontal props size xs is rendered 1`] = `
+<button
+  class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
+  data-step-status="incomplete"
+  title="Step 1 is incomplete"
+>
+  <span
+    class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-none-incomplete-euiStepHorizontal__number"
+  >
+    <span
+      class="emotion-euiScreenReaderOnly"
+    >
+      Step 1 is incomplete
+    </span>
+  </span>
+  <span
+    class="euiStepHorizontal__title emotion-euiStepHorizontal__title"
+  />
+</button>
+`;
+
 exports[`EuiStepHorizontal props status complete is rendered 1`] = `
 <button
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"

packages/eui/src/components/steps/__snapshots__/step_number.test.tsx.snap

@@ -18,24 +18,6 @@ exports[`EuiStepNumber is rendered 1`] = `
 </span>
 `;
 
-exports[`EuiStepNumber props has titleSize is rendered 1`] = `
-<span
-  class="euiStepNumber emotion-euiStepNumber-xs"
->
-  <span
-    class="emotion-euiScreenReaderOnly"
-  >
-    Step 1
-  </span>
-  <span
-    aria-hidden="true"
-    class="euiStepNumber__number emotion-euiStepNumber__number"
-  >
-    1
-  </span>
-</span>
-`;
-
 exports[`EuiStepNumber props status complete is rendered 1`] = `
 <span
   class="euiStepNumber emotion-euiStepNumber-s-complete"
@@ -145,3 +127,21 @@ exports[`EuiStepNumber props status warning is rendered 1`] = `
   </span>
 </span>
 `;
+
+exports[`EuiStepNumber props titleSize is rendered 1`] = `
+<span
+  class="euiStepNumber emotion-euiStepNumber-xs"
+>
+  <span
+    class="emotion-euiScreenReaderOnly"
+  >
+    Step 1
+  </span>
+  <span
+    aria-hidden="true"
+    class="euiStepNumber__number emotion-euiStepNumber__number"
+  >
+    1
+  </span>
+</span>
+`;