-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(input): add outside-top prop #3660
base: canary
Are you sure you want to change the base?
feat(input): add outside-top prop #3660
Conversation
🦋 Changeset detectedLatest commit: 43715c0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
@abhinav700 is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis update enhances the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant InputComponent
participant InputLogic
User->>InputComponent: Interacts with Input
InputComponent->>InputLogic: Determine label position
alt Use outside-top prop
InputLogic-->>InputComponent: Render label outside on top
else Use other props
InputLogic-->>InputComponent: Render label in default position
end
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (1)
packages/components/input/src/input.tsx (1)
20-20
: Add documentation for theisOutsideTop
prop.The
isOutsideTop
prop is used to control label positioning in theInput
component but lacks documentation. Please add comments or documentation to clarify its purpose and usage.
- File:
packages/components/input/src/input.tsx
- File:
packages/components/input/src/use-input.ts
Analysis chain
New prop
isOutsideTop
added.The
isOutsideTop
prop is introduced to control the label positioning. Ensure this prop is documented and used consistently.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify usage and documentation of `isOutsideTop` prop. # Test: Search for documentation or comments related to `isOutsideTop`. rg --type md --type js --type ts --type tsx 'isOutsideTop'Length of output: 86
Script:
#!/bin/bash # Description: Verify usage and documentation of `isOutsideTop` prop. # Test: Search for documentation or comments related to `isOutsideTop`. rg --type markdown --type javascript --type typescript --type tsx 'isOutsideTop'Length of output: 115
Script:
#!/bin/bash # Description: Verify usage and documentation of `isOutsideTop` prop. # Test: Search for documentation or comments related to `isOutsideTop` across all files. rg 'isOutsideTop'Length of output: 444
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (5)
- .changeset/little-crabs-destroy.md (1 hunks)
- packages/components/input/src/input.tsx (6 hunks)
- packages/components/input/src/use-input.ts (2 hunks)
- packages/components/input/stories/input.stories.tsx (3 hunks)
- packages/core/theme/src/components/input.ts (1 hunks)
Additional comments not posted (11)
.changeset/little-crabs-destroy.md (1)
1-6
: Changeset is well-written and accurate.The changeset correctly describes the addition of the
outside-top
prop and its purpose, along with the affected packages.packages/components/input/src/input.tsx (3)
85-87
: Conditional rendering logic updated.The logic now considers
isOutsideTop
for label rendering. This enhances flexibility but ensure it doesn't introduce regressions.
52-57
: Styling changes for error messages and descriptions.The background color for error messages and descriptions has been updated. Ensure these changes align with the design guidelines.
120-120
: Conditional label rendering withisOutsideTop
.The label is conditionally rendered based on
isOutsideLeft
orisOutsideTop
. Ensure all scenarios are covered in tests.packages/components/input/src/use-input.ts (3)
264-264
: New variableisOutsideTop
introduced.The
isOutsideTop
variable is used to manage label positioning. Ensure this is consistently applied across the component.
268-279
: Refined logic forisLabelOutside
.The logic for
isLabelOutside
has been refined to incorporateoutside-top
. Ensure this logic aligns with the intended behavior.
253-256
: Enhanced label positioning logic withoutside-top
.The logic for determining label placement now includes
outside-top
. Ensure this logic is thoroughly tested.Verification successful
Test coverage for
outside-top
label placement is present.The
outside-top
label placement is covered in theinput.stories.tsx
file, indicating it is demonstrated and tested through story examples. Ensure these stories are reviewed for completeness in visual testing.
packages/components/input/stories/input.stories.tsx
: Demonstratesoutside-top
label placement.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify test coverage for enhanced label positioning logic. # Test: Search for test cases covering `outside-top` label placement. rg --type ts --type tsx 'outside-top'Length of output: 65
Script:
#!/bin/bash # Description: Verify test coverage for enhanced label positioning logic. # Test: Search for test cases covering `outside-top` label placement. rg --type=ts --type=tsx 'outside-top'Length of output: 65
Script:
#!/bin/bash # Description: Verify test coverage for enhanced label positioning logic. # Test: Search for test cases covering `outside-top` label placement across all files. rg 'outside-top'Length of output: 900
packages/components/input/stories/input.stories.tsx (3)
52-52
: Addition of "outside-top" to labelPlacement options is correct.The inclusion of
"outside-top"
in theoptions
array aligns with the PR objective to enhance label positioning. This change is consistent with existing options.
181-181
: Addition of "outside-top" label placement in the story is appropriate.The new
Input
component withlabelPlacement="outside-top"
ensures that the new feature is demonstrated and testable in the story.
200-205
: Inclusion of "outside-top" with placeholder is well-implemented.Adding this
Input
component tests theoutside-top
label placement with a placeholder, ensuring comprehensive coverage.packages/core/theme/src/components/input.ts (1)
173-178
: "outside-top" layout configuration is well-structured.The addition of
outside-top
in thelabelPlacement
variant introduces a new layout that is consistent with the design goals. The CSS classes are appropriately defined to achieve the desired positioning.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (2)
- apps/docs/content/components/input/label-placements.ts (1 hunks)
- apps/docs/content/docs/components/input.mdx (1 hunks)
Additional comments not posted (2)
apps/docs/content/components/input/label-placements.ts (1)
8-8
: Addition ofoutside-top
label placement is correct.The new label placement option
"outside-top"
has been added correctly to the array. This enhances the flexibility of theInput
component.apps/docs/content/docs/components/input.mdx (1)
78-78
: Documentation foroutside-top
label placement is accurate.The documentation correctly includes the new
outside-top
option forlabelPlacement
, providing clear guidance on its usage.
.changeset/little-crabs-destroy.md
Outdated
@@ -0,0 +1,6 @@ | |||
--- | |||
"@nextui-org/input": major |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
change from major
to minor
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok.
@@ -48,9 +49,13 @@ const Input = forwardRef<"input", InputProps>((props, ref) => { | |||
return ( | |||
<div {...getHelperWrapperProps()}> | |||
{isInvalid && errorMessage ? ( | |||
<div {...getErrorMessageProps()}>{errorMessage}</div> | |||
<div className="bg-green-500" {...getErrorMessageProps()}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what is the reason of adding bg-green-500
here?
@@ -66,7 +71,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => { | |||
|
|||
const innerWrapper = useMemo(() => { | |||
return ( | |||
<div {...getInnerWrapperProps()}> | |||
<div className="bg-yellow-700" {...getInnerWrapperProps()}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what is the reason of adding bg-yellow-700
here?
// && | ||
// !hasStartContent; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please explain why !hasStartContent
is removed here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had uncommented this part while making the commit, but it seeems that code was not saved in VS code.
Will remove the comments.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- .changeset/little-crabs-destroy.md (1 hunks)
- packages/components/input/src/input.tsx (3 hunks)
- packages/components/input/src/use-input.ts (2 hunks)
Files skipped from review as they are similar to previous changes (3)
- .changeset/little-crabs-destroy.md
- packages/components/input/src/input.tsx
- packages/components/input/src/use-input.ts
Can anyone merge this? @jrgarciadev @wingkwong please? |
This PR is scheduled for v2.5.0. We will review and merge after v2.4.7. |
Closes #3058
📝 Description
⛳️ Current behavior (updates)
In old behaviour, the label was presented inside the input component if
placholder === ""
even iflabelPlacement === "outside"
🚀 New behavior
Adding outside-top prop which dispalys the label outside the input component regardless of whether the placeholder is there or not.
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
Documentation