From 1c3714a64c465f038494c1784729496ade771a0c Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Fri, 16 Aug 2024 10:20:25 +0530 Subject: [PATCH 01/10] feat(input): add outside-top prop to the input component --- packages/components/input/src/input.tsx | 19 ++++++++++++------- packages/components/input/src/use-input.ts | 19 ++++++++++++++++--- .../input/stories/input.stories.tsx | 9 ++++++++- packages/core/theme/src/components/input.ts | 6 ++++++ 4 files changed, 42 insertions(+), 11 deletions(-) diff --git a/packages/components/input/src/input.tsx b/packages/components/input/src/input.tsx index 9414472494..e0346798a5 100644 --- a/packages/components/input/src/input.tsx +++ b/packages/components/input/src/input.tsx @@ -17,6 +17,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => { labelPlacement, hasHelper, isOutsideLeft, + isOutsideTop, shouldLabelBeOutside, errorMessage, isInvalid, @@ -48,9 +49,13 @@ const Input = forwardRef<"input", InputProps>((props, ref) => { return (
{isInvalid && errorMessage ? ( -
{errorMessage}
+
+ {errorMessage} +
) : description ? ( -
{description}
+
+ {description} +
) : null}
); @@ -66,7 +71,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => { const innerWrapper = useMemo(() => { return ( -
+
{startContent} {end} @@ -77,9 +82,9 @@ const Input = forwardRef<"input", InputProps>((props, ref) => { const mainWrapper = useMemo(() => { if (shouldLabelBeOutside) { return ( -
+
- {!isOutsideLeft ? labelContent : null} + {!isOutsideLeft && !isOutsideTop ? labelContent : null} {innerWrapper}
{helperWrapper} @@ -89,7 +94,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => { return ( <> -
+
{labelContent} {innerWrapper}
@@ -112,7 +117,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => { return ( - {isOutsideLeft ? labelContent : null} + {isOutsideLeft || isOutsideTop ? labelContent : null} {mainWrapper} ); diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts index 0cc2102725..e0f756b36e 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -250,22 +250,34 @@ export function useInput label is outside only when some placeholder is there + outside-top, outside-left-> label is outside regardless of placeholder +*/ const isLabelOutside = shouldLabelBeOutside ? labelPlacement === "outside-left" || + labelPlacement === "outside-top" || hasPlaceholder || (labelPlacement === "outside" && hasStartContent) : false; - const isLabelOutsideAsPlaceholder = - labelPlacement === "outside" && !hasPlaceholder && !hasStartContent; + const isLabelOutsideAsPlaceholder = labelPlacement === "outside" && !hasPlaceholder; + // && + // !hasStartContent; const slots = useMemo( () => @@ -523,6 +535,7 @@ export function useInput ( +
@@ -196,6 +197,12 @@ const LabelPlacementTemplate = (args) => ( labelPlacement="outside-left" placeholder="Enter your email" /> +
diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts index 226b7bd571..4433c84fb9 100644 --- a/packages/core/theme/src/components/input.ts +++ b/packages/core/theme/src/components/input.ts @@ -170,6 +170,12 @@ const input = tv({ outside: { mainWrapper: "flex flex-col", }, + "outside-top": { + base: "flex-col items-center flex-nowrap data-[has-helper=true]:items-start", + inputWrapper: "flex-1", + mainWrapper: "flex flex-col", + label: "relative text-foreground pb-2", + }, "outside-left": { base: "flex-row items-center flex-nowrap data-[has-helper=true]:items-start", inputWrapper: "flex-1", From 0dc983cfb79faf1f6b48b999ee2567574399b864 Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Fri, 16 Aug 2024 10:29:31 +0530 Subject: [PATCH 02/10] feat(input): adding changeset --- .changeset/little-crabs-destroy.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/little-crabs-destroy.md diff --git a/.changeset/little-crabs-destroy.md b/.changeset/little-crabs-destroy.md new file mode 100644 index 0000000000..a16d4fa20d --- /dev/null +++ b/.changeset/little-crabs-destroy.md @@ -0,0 +1,6 @@ +--- +"@nextui-org/input": major +"@nextui-org/theme": patch +--- + +Fixing Issue 3058. Initially, you cannot present label outside the input component if there is no placeholder. To fix this, I have added a "outside-top" prop which displays the label outside regardless of the placeholder, just like "outside-left" prop. From 8f07cc8cbe16520ffd776659da6f5e1e1daaaa1a Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Fri, 16 Aug 2024 13:33:51 +0530 Subject: [PATCH 03/10] docs(input): updated docs for label placement section of input component --- apps/docs/content/components/input/label-placements.ts | 1 + apps/docs/content/docs/components/input.mdx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/docs/content/components/input/label-placements.ts b/apps/docs/content/components/input/label-placements.ts index f37fc6cf78..27d1ea2c2e 100644 --- a/apps/docs/content/components/input/label-placements.ts +++ b/apps/docs/content/components/input/label-placements.ts @@ -5,6 +5,7 @@ export default function App() { "inside", "outside", "outside-left", + "outside-top" ]; return ( diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx index aa22838a1c..adbfb49d84 100644 --- a/apps/docs/content/docs/components/input.mdx +++ b/apps/docs/content/docs/components/input.mdx @@ -75,7 +75,7 @@ the end of the label and the input will be required. ### Label Placements -You can change the position of the label by setting the `labelPlacement` property to `inside`, `outside` or `outside-left`. +You can change the position of the label by setting the `labelPlacement` property to `inside`, `outside`, `outside-left` or `outside-top`. From 5d977dc2c0c293623ee032896c5cba3bffa45a79 Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Sat, 17 Aug 2024 10:18:10 +0530 Subject: [PATCH 04/10] fix(input.tsx): remove bg classes that I added for testing and debugging purposes --- packages/components/input/src/input.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/components/input/src/input.tsx b/packages/components/input/src/input.tsx index e0346798a5..2ea6417798 100644 --- a/packages/components/input/src/input.tsx +++ b/packages/components/input/src/input.tsx @@ -49,13 +49,9 @@ const Input = forwardRef<"input", InputProps>((props, ref) => { return (
{isInvalid && errorMessage ? ( -
- {errorMessage} -
+
{errorMessage}
) : description ? ( -
- {description} -
+
{description}
) : null}
); @@ -71,7 +67,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => { const innerWrapper = useMemo(() => { return ( -
+
{startContent} {end} @@ -82,7 +78,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => { const mainWrapper = useMemo(() => { if (shouldLabelBeOutside) { return ( -
+
{!isOutsideLeft && !isOutsideTop ? labelContent : null} {innerWrapper} @@ -94,7 +90,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => { return ( <> -
+
{labelContent} {innerWrapper}
From c9de0146569e5e07f61a9a9dc62edbc5fac8fbca Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Sat, 17 Aug 2024 10:20:42 +0530 Subject: [PATCH 05/10] fix(changeset): update changeset as advised in review for PR 3660 --- .changeset/little-crabs-destroy.md | 2 +- packages/components/input/src/use-input.ts | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/.changeset/little-crabs-destroy.md b/.changeset/little-crabs-destroy.md index a16d4fa20d..8c2d8ed3e2 100644 --- a/.changeset/little-crabs-destroy.md +++ b/.changeset/little-crabs-destroy.md @@ -1,5 +1,5 @@ --- -"@nextui-org/input": major +"@nextui-org/input": minor "@nextui-org/theme": patch --- diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts index e0f756b36e..97c5b2c1f4 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -250,6 +250,11 @@ export function useInput label is outside only when some placeholder is there + outside-top, outside-left-> label is outside regardless of placeholder + */ const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left" || @@ -265,10 +270,6 @@ export function useInput label is outside only when some placeholder is there - outside-top, outside-left-> label is outside regardless of placeholder -*/ const isLabelOutside = shouldLabelBeOutside ? labelPlacement === "outside-left" || labelPlacement === "outside-top" || From d2748cf5fb79f8af098ee5d1cd17d03b33dfa2c5 Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Sat, 17 Aug 2024 10:25:00 +0530 Subject: [PATCH 06/10] fix(use-input.ts): change comment position as advised in review for PR 3660 --- packages/components/input/src/use-input.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts index 97c5b2c1f4..3bafb9cfed 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -252,7 +252,7 @@ export function useInput label is outside only when some placeholder is there + outside -> label is outside only when some gplaceholder is there outside-top, outside-left-> label is outside regardless of placeholder */ const shouldLabelBeOutside = From 612100ceca7cdf70ac556bcc06c6aeab6b03d946 Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Sat, 17 Aug 2024 10:45:44 +0530 Subject: [PATCH 07/10] fix(use-input.ts): remove comment as advised in review for PR 3660 --- packages/components/input/src/use-input.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts index 3bafb9cfed..1ddb88094f 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -276,9 +276,8 @@ export function useInput From 43715c0255c2b347de06db40f268686c3ed111cc Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Sat, 17 Aug 2024 11:06:15 +0530 Subject: [PATCH 08/10] fix(use-input.ts): fixed typo --- packages/components/input/src/use-input.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts index 1ddb88094f..d7eb5cb3de 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -252,7 +252,7 @@ export function useInput label is outside only when some gplaceholder is there + outside -> label is outside only when some placeholder is there outside-top, outside-left-> label is outside regardless of placeholder */ const shouldLabelBeOutside = From 1de9a266c5a4bacfc6ea62170f1f318499be4c11 Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Fri, 11 Oct 2024 09:36:15 +0530 Subject: [PATCH 09/10] chore(input): refactoring --- .changeset/little-crabs-destroy.md | 4 +- .../components/input/label-placements.ts | 65 +++++++++++-------- packages/components/input/src/use-input.ts | 21 +++--- .../input/stories/input.stories.tsx | 4 ++ 4 files changed, 54 insertions(+), 40 deletions(-) diff --git a/.changeset/little-crabs-destroy.md b/.changeset/little-crabs-destroy.md index 8c2d8ed3e2..cdcc747184 100644 --- a/.changeset/little-crabs-destroy.md +++ b/.changeset/little-crabs-destroy.md @@ -1,6 +1,6 @@ --- "@nextui-org/input": minor -"@nextui-org/theme": patch +"@nextui-org/theme": minor --- -Fixing Issue 3058. Initially, you cannot present label outside the input component if there is no placeholder. To fix this, I have added a "outside-top" prop which displays the label outside regardless of the placeholder, just like "outside-left" prop. +introduce `outside-top` prop to input (#3058) \ No newline at end of file diff --git a/apps/docs/content/components/input/label-placements.ts b/apps/docs/content/components/input/label-placements.ts index 27d1ea2c2e..dbb3cab790 100644 --- a/apps/docs/content/components/input/label-placements.ts +++ b/apps/docs/content/components/input/label-placements.ts @@ -10,35 +10,46 @@ export default function App() { return (
-
-

Without placeholder

-
- {placements.map((placement) => ( - - ))} +
+

Without placeholder

+
+ +
-
-
-

With placeholder

-
- {placements.map((placement) => ( - - ))} +
+ +
-
+
+
+

With placeholder

+
+ + +
+
+ + +
+
); }`; diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts index d60c1f0794..11865dc788 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -256,28 +256,27 @@ export function useInput label is outside only when some placeholder is there - outside-top, outside-left-> label is outside regardless of placeholder - */ + const isOutsideLeft = labelPlacement === "outside-left"; + const isOutsideTop = labelPlacement === "outside-top"; + const shouldLabelBeOutside = + // label is outside only when some placeholder is there labelPlacement === "outside" || - labelPlacement === "outside-left" || - labelPlacement === "outside-top"; + // label is outside regardless of placeholder + isOutsideLeft || + isOutsideTop; + const shouldLabelBeInside = labelPlacement === "inside"; const isPlaceholderShown = domRef.current ? (!domRef.current.value || domRef.current.value === "" || !inputValue || inputValue === "") && hasPlaceholder : false; - const isOutsideLeft = labelPlacement === "outside-left"; - const isOutsideTop = labelPlacement === "outside-top"; - const hasStartContent = !!startContent; const isLabelOutside = shouldLabelBeOutside - ? labelPlacement === "outside-left" || - labelPlacement === "outside-top" || + ? isOutsideLeft || + isOutsideTop || hasPlaceholder || (labelPlacement === "outside" && hasStartContent) : false; diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx index 79a02fe699..f2962d94ec 100644 --- a/packages/components/input/stories/input.stories.tsx +++ b/packages/components/input/stories/input.stories.tsx @@ -177,6 +177,8 @@ const LabelPlacementTemplate = (args) => (
+
+
@@ -191,6 +193,8 @@ const LabelPlacementTemplate = (args) => ( labelPlacement="outside" placeholder="Enter your email" /> +
+
Date: Sun, 13 Oct 2024 19:15:51 +0530 Subject: [PATCH 10/10] chore(input): bump nextui-org/theme to next target version and make label size consistent --- packages/components/input/package.json | 2 +- packages/core/theme/src/components/input.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/input/package.json b/packages/components/input/package.json index 2effb7f24e..25f3d02ab1 100644 --- a/packages/components/input/package.json +++ b/packages/components/input/package.json @@ -36,7 +36,7 @@ "peerDependencies": { "react": ">=18", "react-dom": ">=18", - "@nextui-org/theme": ">=2.1.0", + "@nextui-org/theme": ">=2.3.0", "@nextui-org/system": ">=2.0.0" }, "dependencies": { diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts index 3c534e227d..24a341195a 100644 --- a/packages/core/theme/src/components/input.ts +++ b/packages/core/theme/src/components/input.ts @@ -792,7 +792,6 @@ const input = tv({ label: [ "start-3", "end-auto", - "text-medium", "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]", ], base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]",