From 22cfa237a9d48e7e1a9b90d6da932d197c027d44 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Wed, 5 Jun 2024 16:32:52 +0200
Subject: [PATCH] docs: update EUI docs

---
 .../src-docs/src/views/steps/steps_example.js | 22 +++++++++++++++
 .../src/views/steps/steps_unordered.tsx       | 28 +++++++++++++++++++
 .../components/steps/step_number.styles.ts    |  5 +++-
 3 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 packages/eui/src-docs/src/views/steps/steps_unordered.tsx

diff --git a/packages/eui/src-docs/src/views/steps/steps_example.js b/packages/eui/src-docs/src/views/steps/steps_example.js
index 7898befee67f..6c10be0f890a 100644
--- 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
new file mode 100644
index 000000000000..1c0abf86f976
--- /dev/null
+++ 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} />;
diff --git a/packages/eui/src/components/steps/step_number.styles.ts b/packages/eui/src/components/steps/step_number.styles.ts
index 99a1ab44cacd..4edba1018cc6 100644
--- a/packages/eui/src/components/steps/step_number.styles.ts
+++ b/packages/eui/src/components/steps/step_number.styles.ts
@@ -148,6 +148,9 @@ export const euiStepNumberContentStyles = ({ euiTheme }: UseEuiTheme) => {
       display: inline-block;
       transform: translateY(-${euiTheme.border.width.thick});
     `,
-    xxs: css(logicalSizeCSS(euiTheme.size.s)),
+    xxs: css`
+      ${logicalSizeCSS(euiTheme.size.s)}
+      inset-block-start: -${euiTheme.border.width.thin};
+    `,
   };
 };