[EuiSteps] Add outer halo to current step (#7048)

elastic · Aug 8, 2023 · a107059 · a107059
1 parent e08978e
commit a107059
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/components/steps/step_number.styles.ts b/src/components/steps/step_number.styles.ts
@@ -106,7 +106,16 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
           ${euiTheme.animation.bounce};
       }
     `,
-    current: css``,
+    current: css`
+      border: 2px solid ${euiTheme.colors.body};
+      box-shadow: 0 0 0 2px ${euiTheme.colors.primary};
+
+      .euiStepNumber__number {
+        /* Transform the step number so it appears in the center of the step circle */
+        display: inline-block;
+        transform: translateY(-2px);
+      }
+    `,
   };
 };
 

diff --git a/upcoming_changelogs/7048.md b/upcoming_changelogs/7048.md
@@ -0,0 +1 @@
+- Updated `EuiSteps` and `EuiStepsHorizontal` to highlight and provide a more clear visual indication of the current step