Stepper fixes: font, margins, and visible outline (#735)

## 📝 Changes

- use `subtitle1` as font-style instead of two different fonts
predicated on state
- clean up margin styles
- confirmed that each `Step` should have a visible focus ring / outline

.changeset/hot-adults-pretend.md

@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": minor
+---
+
+fix Stepper: Stepper should have a single font style and support a visible outline

easy-ui-react/src/Stepper/Step.module.scss

@@ -22,5 +22,7 @@
   border-left-width: design-token("shape.border_width.1");
   border-left-style: solid;
   border-color: component-token("step", "color-separator");
-  margin-left: design-token("space.1");
+  margin-left: calc(
+    #{design-token("space.1")} - #{design-token("space.0.125")}
+  );
 }

easy-ui-react/src/Stepper/StepButton.module.scss

@@ -1,4 +1,5 @@
 @use "../styles/common" as *;
+@use "../styles/unstyled";
 
 .containerHorizontal {
   @include component-token("step-button", "max-height", 56px);
@@ -73,13 +74,25 @@
   );
 }
 
-.statusComplete,
-.statusIncomplete {
-  @include font-style("body1");
+.StepButton {
+  @include font-style("subtitle1");
+  @include unstyled.button;
+  display: flex;
+  align-items: center;
+  gap: design-token("space.1");
+  outline: none;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.focusVisible {
+  @include native-focus-ring;
 }
 
 .statusComplete {
-  @include component-token("step-button", "orientation-vertical-margin", -2px);
   color: component-token("step-button", "color-complete");
 }
 
@@ -88,28 +101,11 @@
 }
 
 .statusActive {
-  @include font-style("subtitle1");
   color: component-token("step-button", "color-active");
 }
 
-.StepButton {
-  padding: 0;
-  border: 0;
-  margin: 0;
-  background: none;
-  outline: none;
-  display: flex;
-  align-items: center;
-  gap: design-token("space.1");
-  cursor: pointer;
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-}
-
 .orientationVertical {
-  margin-left: component-token("step-button", "orientation-margin");
+  margin-left: calc(-1 * #{design-token("space.0.25")});
 }
 
 .indicatorHorizontal {
@@ -120,6 +116,10 @@
   @include component-token("step-button", "indicator-size", 16px);
 }
 
+.indicatorContainer {
+  padding: design-token("space.0.25");
+}
+
 .indicatorActive {
   background-color: component-token("step-button", "active-background");
 }
@@ -130,7 +130,6 @@
 
 .indicatorIncomplete {
   border: 1px solid component-token("step-button", "incomplete-border");
-  margin: calc(#{design-token("space.0.5")} - 1px) design-token("space.0");
 }
 
 .indicator {

easy-ui-react/src/Stepper/StepButton.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import CheckCircle from "@easypost/easy-ui-icons/CheckCircle";
-import { AriaButtonProps } from "react-aria";
+import { AriaButtonProps, useFocusRing, mergeProps } from "react-aria";
 import { useInternalStepperContext } from "./StepperContext";
 import { UnstyledButton } from "../UnstyledButton";
 import { classNames, variationName } from "../utilities/css";
@@ -34,6 +34,7 @@ export type StepButtonProps = AriaButtonProps & {
 export function StepButton(props: StepButtonProps) {
   const { status, isDisabled, children, onPress, ...restProps } = props;
   const { color, orientation } = useInternalStepperContext();
+  const { isFocusVisible, focusProps } = useFocusRing();
 
   return (
     <div
@@ -43,14 +44,15 @@ export function StepButton(props: StepButtonProps) {
       )}
     >
       <UnstyledButton
-        {...restProps}
+        {...mergeProps(focusProps, restProps)}
         onPress={onPress}
         isDisabled={isDisabled}
         className={classNames(
           styles.StepButton,
           styles[variationName("status", status)],
           styles[variationName("color", color)],
           styles[variationName("orientation", orientation)],
+          isFocusVisible && styles.focusVisible,
         )}
       >
         {status === "complete" ? (
@@ -59,13 +61,15 @@ export function StepButton(props: StepButtonProps) {
             size={orientation === "horizontal" ? "md" : "sm"}
           />
         ) : (
-          <div
-            className={classNames(
-              styles.indicator,
-              styles[variationName("indicator", orientation)],
-              styles[variationName("indicator", status)],
-            )}
-          />
+          <div className={classNames(styles.indicatorContainer)}>
+            <div
+              className={classNames(
+                styles.indicator,
+                styles[variationName("indicator", orientation)],
+                styles[variationName("indicator", status)],
+              )}
+            />
+          </div>
         )}
         <span
           className={classNames(styles[variationName("text", orientation)])}