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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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 theisOutsideTopprop.The
isOutsideTopprop is used to control label positioning in theInputcomponent 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.tsAnalysis chain
New prop
isOutsideTopadded.The
isOutsideTopprop 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-topprop 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
isOutsideTopfor 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
isOutsideLeftorisOutsideTop. Ensure all scenarios are covered in tests.packages/components/input/src/use-input.ts (3)
264-264: New variableisOutsideTopintroduced.The
isOutsideTopvariable is used to manage label positioning. Ensure this is consistently applied across the component.
268-279: Refined logic forisLabelOutside.The logic for
isLabelOutsidehas 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-toplabel placement is present.The
outside-toplabel placement is covered in theinput.stories.tsxfile, 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-toplabel 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 theoptionsarray 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
Inputcomponent 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
Inputcomponent tests theoutside-toplabel 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-topin thelabelPlacementvariant 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.
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-toplabel placement is correct.The new label placement option
"outside-top"has been added correctly to the array. This enhances the flexibility of theInputcomponent.apps/docs/content/docs/components/input.mdx (1)
78-78: Documentation foroutside-toplabel placement is accurate.The documentation correctly includes the new
outside-topoption forlabelPlacement, providing clear guidance on its usage.
wingkwong
changed the title
.changeset/little-crabs-destroy.md
Outdated
| @@ -0,0 +1,6 @@ | |||
| --- | |||
| "@nextui-org/input": major | |||
| @@ -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.
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.
what is the reason of adding bg-yellow-700 here?
| // && | ||
| // !hasStartContent; |
There was a problem hiding this comment.
please explain why !hasStartContent is removed here
There was a problem hiding this comment.
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.
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