diff --git a/.changeset/heavy-crabs-hunt.md b/.changeset/heavy-crabs-hunt.md
new file mode 100644
index 000000000..7c7d7efda
--- /dev/null
+++ b/.changeset/heavy-crabs-hunt.md
@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": patch
+---
+
+fix(Stepper): use correct alignment prop on Stack component
diff --git a/easy-ui-react/src/SearchNav/SearchNav.test.tsx b/easy-ui-react/src/SearchNav/SearchNav.test.tsx
index aff090014..68c8606a1 100644
--- a/easy-ui-react/src/SearchNav/SearchNav.test.tsx
+++ b/easy-ui-react/src/SearchNav/SearchNav.test.tsx
@@ -5,7 +5,11 @@ import Help from "@easypost/easy-ui-icons/Help";
import Brightness5 from "@easypost/easy-ui-icons/Brightness5";
import React from "react";
import { vi } from "vitest";
-import { mockGetComputedStyle, render } from "../utilities/test";
+import {
+ mockGetComputedStyle,
+ render,
+ silenceConsoleError,
+} from "../utilities/test";
import { SearchNav } from "./SearchNav";
describe("", () => {
@@ -27,9 +31,11 @@ describe("", () => {
});
it("should throw an error when SearchNav.LogoGroup is missing", () => {
+ const restoreConsoleError = silenceConsoleError();
expect(() => render(getSearchNavWithoutLogoGroup())).toThrow(
"SearchNav must contain SearchNav.LogoGroup.",
);
+ restoreConsoleError();
});
it("should support rendering SearchNav.Logo", () => {
@@ -38,9 +44,11 @@ describe("", () => {
});
it("should throw an error when SearchNav.Logo is missing", () => {
+ const restoreConsoleError = silenceConsoleError();
expect(() => render(getSearchNavWithoutLogo())).toThrow(
"SearchNav.LogoGroup must contain SearchNav.Logo.",
);
+ restoreConsoleError();
});
it("should support rendering Search.Title with appropriate styles", () => {
@@ -93,9 +101,11 @@ describe("", () => {
});
it("should throw an error when more than one SearchNav.PrimaryCTAItem is provided", () => {
+ const restoreConsoleError = silenceConsoleError();
expect(() => render(getSearchNavWithMultiplePrimaryCTAItems())).toThrow(
"SearchNav.CTAGroup can support at most one SearchNav.PrimaryCTAItem.",
);
+ restoreConsoleError();
});
});
diff --git a/easy-ui-react/src/Stepper/Stepper.tsx b/easy-ui-react/src/Stepper/Stepper.tsx
index f456629e5..3ebf9eeb9 100644
--- a/easy-ui-react/src/Stepper/Stepper.tsx
+++ b/easy-ui-react/src/Stepper/Stepper.tsx
@@ -30,11 +30,11 @@ export type StepperProps = {
};
/**
-* The `` component is used to indicate progress as the user goes
+* The `` component is used to indicate progress as the user goes
* through a multi-step process.
*
* @remarks
-* A common use-case for this component is to guide a user through a large
+* A common use-case for this component is to guide a user through a large
* form where parts of the form can be separated into logical steps.
*
* @example
@@ -116,6 +116,9 @@ export function Stepper(props: StepperProps) {
const totalSteps = Children.toArray(children).filter(Boolean).length;
const isVertical = orientation === "vertical";
const Component = isVertical ? VerticalStack : HorizontalStack;
+ const alignProp = isVertical
+ ? ({ inlineAlign: "start" } as const)
+ : ({ blockAlign: "center" } as const);
const context = useMemo(() => {
return {
@@ -129,7 +132,7 @@ export function Stepper(props: StepperProps) {
return (
diff --git a/easy-ui-react/src/utilities/test.ts b/easy-ui-react/src/utilities/test.ts
index e29f7b765..43fa1f00e 100644
--- a/easy-ui-react/src/utilities/test.ts
+++ b/easy-ui-react/src/utilities/test.ts
@@ -83,3 +83,10 @@ export function mockMatchMedia({
window.matchMedia = originalMatchMedia;
};
}
+
+export function silenceConsoleError() {
+ const mock = vi.spyOn(console, "error").mockImplementation(() => vi.fn());
+ return () => {
+ mock.mockRestore();
+ };
+}