diff --git a/.changeset/brave-laws-enjoy.md b/.changeset/brave-laws-enjoy.md new file mode 100644 index 0000000000..4dffac7aeb --- /dev/null +++ b/.changeset/brave-laws-enjoy.md @@ -0,0 +1,5 @@ +--- +"@heroui/number-input": patch +--- + +allow inheriting labelPlacement from HeroUIProvider (#5845) diff --git a/packages/components/number-input/__tests__/number-input.test.tsx b/packages/components/number-input/__tests__/number-input.test.tsx index d11fbdc61a..f7c8a21ae1 100644 --- a/packages/components/number-input/__tests__/number-input.test.tsx +++ b/packages/components/number-input/__tests__/number-input.test.tsx @@ -5,6 +5,7 @@ import {render, fireEvent, act} from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import {useForm} from "react-hook-form"; import {Form} from "@heroui/form"; +import {HeroUIProvider} from "@heroui/system"; import {NumberInput} from "../src"; @@ -680,4 +681,32 @@ describe("NumberInput with React Hook Form", () => { }); }); }); + + describe("NumberInput with HeroUIProvider context", () => { + it("should inherit labelPlacement from HeroUIProvider", () => { + const {container} = render( + + + , + ); + + const label = container.querySelector("label"); + + expect(label).toBeTruthy(); + expect(label?.className).toMatch(/translate-y.*100%/); + }); + + it("should prioritize labelPlacement prop over HeroUIProvider context", () => { + const {container} = render( + + + , + ); + + const label = container.querySelector("label"); + + expect(label).toBeTruthy(); + expect(label?.className).not.toMatch(/translate-y.*100%/); + }); + }); }); diff --git a/packages/components/number-input/src/use-number-input.ts b/packages/components/number-input/src/use-number-input.ts index 04d74cf810..651115046e 100644 --- a/packages/components/number-input/src/use-number-input.ts +++ b/packages/components/number-input/src/use-number-input.ts @@ -234,10 +234,18 @@ export function useNumberInput(originalProps: UseNumberInputProps) { numberInput({ ...variantProps, isInvalid, + labelPlacement, isClearable, disableAnimation, }), - [objectToDeps(variantProps), isInvalid, isClearable, hasStartContent, disableAnimation], + [ + objectToDeps(variantProps), + isInvalid, + labelPlacement, + isClearable, + hasStartContent, + disableAnimation, + ], ); const handleKeyDown = useCallback(