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(); + }; +}