[EuiSteps] Add support for unordered steps (#7813)

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_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>
+`;

packages/eui/src/components/steps/step.stories.tsx

@@ -6,12 +6,16 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { faker } from '@faker-js/faker';
 
 import { hideStorybookControls } from '../../../.storybook/utils';
 import { STATUS } from './step_number';
 import { EuiStep, EuiStepProps } from './step';
 
+faker.seed(42);
+
 const meta: Meta<EuiStepProps> = {
   title: 'Navigation/EuiSteps/EuiSteps/EuiStep',
   component: EuiStep,
@@ -35,3 +39,30 @@ export const Playground: Story = {
     children: 'lorem ipsum',
   },
 };
+
+export const MultilineTitle: Story = {
+  tags: ['vrt-only'],
+  args: {
+    title: faker.lorem.words(7),
+    children: 'lorem ipsum',
+  },
+  render: (args) => <ComponentStep {...args} />,
+};
+
+export const MultilineTitleXXS: Story = {
+  tags: ['vrt-only'],
+  args: {
+    title: faker.lorem.words(13),
+    children: 'lorem ipsum',
+    titleSize: 'xxs',
+  },
+  render: (args) => <ComponentStep {...args} />,
+};
+
+const ComponentStep = (props: EuiStepProps) => {
+  return (
+    <div css={{ width: '400px' }}>
+      <EuiStep {...props} />
+    </div>
+  );
+};

packages/eui/src/components/steps/step.styles.ts

@@ -14,6 +14,7 @@ export const euiStepVariables = (euiTheme: UseEuiTheme['euiTheme']) => {
   return {
     numberSize: euiTheme.size.xl,
     numberXSSize: euiTheme.size.l,
+    numberXXSSize: euiTheme.size.base,
     numberMargin: euiTheme.size.base,
   };
 };
@@ -52,18 +53,23 @@ export const euiStepStyles = (euiThemeContext: UseEuiTheme) => {
     // Sizes
     m: css`
       &:not(:last-of-type) {
-        background-position: left ${euiTheme.size.xl};
+        background-position: left ${euiStep.numberSize};
       }
     `,
     s: css`
       &:not(:last-of-type) {
-        background-position: left ${euiTheme.size.xl};
+        background-position: left ${euiStep.numberSize};
       }
     `,
     xs: css`
       &:not(:last-of-type) {
         /* Adjust the line to be centered on the smaller number */
-        background-position: -${euiTheme.size.xs} ${euiTheme.size.l};
+        background-position: -${euiTheme.size.xs} ${euiStep.numberXSSize};
+      }
+    `,
+    xxs: css`
+      &:not(:last-of-type) {
+        background-position: -${euiTheme.size.s} ${euiStep.numberXXSSize};
       }
     `,
   };
@@ -118,6 +124,21 @@ export const euiStepContentStyles = (euiThemeContext: UseEuiTheme) => {
         mathWithUnits(euiStep.numberXSSize, (x) => x / 2)
       )}
     `,
+    xxs: css`
+      /* Align the content's contents with the title */
+      ${logicalCSS(
+        'padding-left',
+        mathWithUnits(
+          [euiStep.numberXXSSize, euiStep.numberMargin],
+          (x, y) => x / 2 + y
+        )
+      )}
+      /* Align content border to horizontal center of step number */
+      ${logicalCSS(
+        'margin-left',
+        mathWithUnits(euiStep.numberXXSSize, (x) => x / 2)
+      )}
+    `,
   };
 };
 
@@ -142,5 +163,8 @@ export const euiStepTitleStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('padding-top', euiTheme.size.xs)}
     `,
     xs: css``,
+    xxs: css`
+      line-height: ${euiStep.numberXXSSize};
+    `,
   };
 };

packages/eui/src/components/steps/step.tsx

@@ -14,7 +14,7 @@ import React, {
   ReactNode,
 } from 'react';
 import { CommonProps } from '../common';
-import { EuiTitle, EuiTitleProps, EuiTitleSize } from '../title';
+import { EuiTitle, EuiTitleProps } from '../title';
 import { EuiStepNumber, EuiStepStatus } from './step_number';
 import { useEuiTheme } from '../../services';
 import {
@@ -42,9 +42,11 @@ export interface EuiStepInterface {
    */
   status?: EuiStepStatus;
   /**
-   * Title sizing equivalent to EuiTitle, but only `m`, `s` and `xs`. Defaults to `s`
+   * Title sizing equivalent to **EuiTitle**, but only `m`, `s`, `xs` font sizes.
+   * The `xxs` size reduces the size of the accompanying step indicator, but not the title itself.
+   * @default s
    */
-  titleSize?: Exclude<EuiTitleProps['size'], 'xxxs' | 'xxs' | 'l'>;
+  titleSize?: Extract<EuiTitleProps['size'], 'xxs' | 'xs' | 's' | 'm'>;
 }
 
 export type EuiStepProps = CommonProps &
@@ -84,9 +86,13 @@ export const EuiStep: FunctionComponent<EuiStepProps> = ({
   return (
     <div className={classes} css={cssStyles} {...rest}>
       <div className="euiStep__titleWrapper" css={cssTitleWrapperStyles}>
-        <EuiStepNumber number={step} status={status} titleSize={titleSize} />
+        <EuiStepNumber
+          number={step}
+          status={status}
+          titleSize={titleSize === 'xxs' ? 'none' : titleSize}
+        />
         <EuiTitle
-          size={titleSize as EuiTitleSize}
+          size={titleSize === 'xxs' ? 'xs' : titleSize}
           className="euiStep__title"
           css={cssStepTitleStyles}
         >

packages/eui/src/components/steps/step_horizontal.styles.ts

@@ -76,6 +76,7 @@ export const euiStepHorizontalStyles = (euiThemeContext: UseEuiTheme) => {
     // Adjust the size of the step number and connecting lines based on size
     m: _generateStepSizeAndInset(euiStep.numberSize),
     s: _generateStepSizeAndInset(euiStep.numberXSSize),
+    xs: _generateStepSizeAndInset(euiStep.numberXXSSize),
     // Note: these selectors must be nested because focus/hover state
     // is on the parent container, but affects specific children
     enabled: css`