docs: update EUI docs

elastic · Jun 5, 2024 · e56e11c · e56e11c
1 parent 30b340b
commit e56e11c
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
diff --git a/packages/eui/src-docs/src/views/steps/steps_example.js b/packages/eui/src-docs/src/views/steps/steps_example.js
@@ -123,6 +123,10 @@ import StepsTitleSizes from './steps_title_sizes';
 const stepsTitleSizesSource = require('!!raw-loader!./steps_title_sizes');
 const stepsTitleSizesSnippet = '<EuiSteps titleSize="xs" steps={steps} />';
 
+import StepsUnordered from './steps_unordered';
+const stepsUnorderedSource = require('!!raw-loader!./steps_unordered');
+const stepsUnorderedSnippet = '<EuiSteps titleSize="xxs" steps={steps} />';
+
 export const StepsExample = {
   title: 'Steps',
   sections: [
@@ -237,6 +241,24 @@ export const StepsExample = {
       demo: <StepsTitleSizes />,
       snippet: stepsTitleSizesSnippet,
     },
+    {
+      title: 'Visually unordered steps',
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: stepsUnorderedSource,
+        },
+      ],
+      text: (
+        <p>
+          You can use <strong>EuiSteps</strong> with visually unordered steps by
+          setting <EuiCode>titleSize="xxs"</EuiCode>. This will output a step
+          without number.
+        </p>
+      ),
+      demo: <StepsUnordered />,
+      snippet: stepsUnorderedSnippet,
+    },
     {
       title: 'Horizontal steps',
       source: [

diff --git a/packages/eui/src-docs/src/views/steps/steps_unordered.tsx b/packages/eui/src-docs/src/views/steps/steps_unordered.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { EuiCode, EuiSteps } from '../../../../src/components';
+
+const firstSetOfSteps = [
+  {
+    title: 'Step 1',
+    children: (
+      <p>
+        Steps with <EuiCode>titleSize</EuiCode> set to <EuiCode>xxs</EuiCode>{' '}
+        like this one, get a smaller step circle and have no visual number
+        indication.
+      </p>
+    ),
+  },
+  {
+    title: 'Step 2',
+    children: (
+      <p>
+        Steps with <EuiCode>titleSize</EuiCode> set to <EuiCode>xxs</EuiCode>{' '}
+        like this one, get a smaller step circle and have no visual number
+        indication.
+      </p>
+    ),
+  },
+];
+
+export default () => <EuiSteps titleSize="xxs" steps={firstSetOfSteps} />;