fix:(input): label element displays incorrectly #3055
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@devswi is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe recent changes aim to enhance the consistency and functionality of the Changes
Tip New Features and ImprovementsReview SettingsIntroduced new personality profiles for code reviews. Users can now select between "Chill" and "Assertive" review tones to tailor feedback styles according to their preferences. The "Assertive" profile posts more comments and nitpicks the code more aggressively, while the "Chill" profile is more relaxed and posts fewer comments. AST-based InstructionsCodeRabbit offers customizing reviews based on the Abstract Syntax Tree (AST) pattern matching. Read more about AST-based instructions in the documentation. Community-driven AST-based RulesWe are kicking off a community-driven initiative to create and share AST-based rules. Users can now contribute their AST-based rules to detect security vulnerabilities, code smells, and anti-patterns. Please see the ast-grep-essentials repository for more information. New Static Analysis ToolsWe are continually expanding our support for static analysis tools. We have added support for Tone SettingsUsers can now customize CodeRabbit to review code in the style of their favorite characters or personalities. Here are some of our favorite examples:
Revamped Settings PageWe have redesigned the settings page for a more intuitive layout, enabling users to find and adjust settings quickly. This change was long overdue; it not only improves the user experience but also allows our development team to add more settings in the future with ease. Going forward, the changes to Miscellaneous
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 Configration 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: 2
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- packages/components/input/src/input.tsx (3 hunks)
- packages/components/input/src/use-input.ts (1 hunks)
- packages/core/theme/src/components/input.ts (3 hunks)
Files skipped from review due to trivial changes (1)
- packages/core/theme/src/components/input.ts
Additional comments not posted (1)
packages/components/input/src/use-input.ts (1)
241-241: Clarify the logic for determiningisLabelOutside.This change adds
isMultilineto the condition for settingisLabelOutside. Ensure that this change is reflected whereverisLabelOutsideis used to maintain consistency.Verification successful
The logic for determining
isLabelOutsidehas been updated to includeisMultilinein the condition. This change is reflected consistently in the relevant parts of the codebase.
use-input.ts: The condition forisLabelOutsidenow includesisMultiline.input.tsx: The usage ofisLabelOutsidealigns with the updated logic.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the logic for `isLabelOutside`. # Test: Search for usage of `isLabelOutside` in the project to ensure it aligns with the new logic. rg --type typescript $'isLabelOutside' --files-with-matchesLength of output: 93
Script:
#!/bin/bash # Description: Verify the logic for `isLabelOutside`. # Test: Search for usage of `isLabelOutside` in the project to ensure it aligns with the new logic. rg --type ts 'isLabelOutside'Length of output: 575
Script:
#!/bin/bash # Extract relevant lines from `use-input.ts` and `input.tsx` to verify the logic for `isLabelOutside`. # Extract lines from `use-input.ts` rg --type ts --context 5 'isLabelOutside' packages/components/input/src/use-input.ts # Extract lines from `input.tsx` rg --type ts --context 5 'isLabelOutside' packages/components/input/src/input.tsxLength of output: 1625
devswi
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- .changeset/perfect-rocks-call.md (1 hunks)
Files skipped from review due to trivial changes (1)
- .changeset/perfect-rocks-call.md
devswi
force-pushed
the
bugfix/input-label-placement-incorrect-when-isMultiline-is-true
branch
from
7fe769d
to
984c667
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
Outside diff range and nitpick comments (5)
packages/components/input/src/input.tsx (2)
Line range hint
38-38: AddendContentto the dependency array of theuseMemohook.- }, [isClearable, getClearButtonProps]); + }, [isClearable, getClearButtonProps, endContent]);This change ensures that the memoized value correctly updates when
endContentchanges.
Line range hint
78-78: Refine the dependency array of theuseMemohook formainWrapper.- }, [ - labelPlacement, - helperWrapper, - shouldLabelBeOutside, - labelContent, - innerWrapper, - errorMessage, - description, - getMainWrapperProps, - getInputWrapperProps, - getErrorMessageProps, - getDescriptionProps, - ]); + }, [ + shouldLabelBeOutside, + isMultiline, + isOutsideLeft, + labelContent, + innerWrapper, + helperWrapper, + getMainWrapperProps, + getInputWrapperProps, + ]);This adjustment removes unnecessary dependencies and adds missing ones to ensure the hook re-evaluates correctly when relevant data changes.
packages/components/input/src/use-input.ts (3)
Line range hint
151-151: AdddomRef.current?.focusto the dependency array of theuseCallbackhook forhandleClear.- }, [setInputValue, onClear]); + }, [setInputValue, onClear, domRef.current?.focus]);This change ensures that the callback is updated if the focus method on the DOM reference changes, which is important for maintaining correct behavior in dynamic DOM environments.
Line range hint
246-246: Refine the dependency array of theuseMemohook forslots.- }, [ - objectToDeps(variantProps), - isInvalid, - labelPlacement, - isClearable, - hasStartContent, - disableAnimation, - ]); + }, [ + variantProps, + isInvalid, + labelPlacement, + isClearable, + disableAnimation, + ]);This adjustment removes unnecessary dependencies and ensures that the hook re-evaluates correctly when relevant data changes.
Line range hint
328-328: EnsuredomRefis included in the dependency array for thegetInputWrapperPropshook.- }, [slots, isHovered, isFocusVisible, isFocused, inputValue, classNames?.inputWrapper]); + }, [slots, isHovered, isFocusVisible, isFocused, inputValue, classNames?.inputWrapper, domRef]);This change ensures that the hook re-evaluates correctly when the
domRefchanges, which is crucial for maintaining correct behavior.
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- packages/components/input/src/input.tsx (2 hunks)
- packages/components/input/src/use-input.ts (1 hunks)
- packages/core/theme/src/components/input.ts (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/core/theme/src/components/input.ts
Additional Context Used
Biome (25)
packages/components/input/src/input.tsx (5)
4-5: Some named imports are only used as types.
38-38: This hook does not specify all of its dependencies: endContent
78-78: This hook does not specify all of its dependencies: isMultiline
78-78: This hook does not specify all of its dependencies: isOutsideLeft
78-78: This hook specifies more dependencies than necessary: labelPlacement, errorMessage, description, getErrorMessageProps, getDescriptionProps
packages/components/input/src/use-input.ts (20)
145-145: Forbidden non-null assertion.
3-9: Some named imports are only used as types.
10-11: All these imports are only used as types.
17-18: Some named imports are only used as types.
151-151: This hook does not specify all of its dependencies: domRef.current?.focus
246-246: This hook does not specify all of its dependencies: variantProps
246-246: This hook specifies more dependencies than necessary: objectToDeps(variantProps), hasStartContent
265-265: This hook does not specify all of its dependencies: baseDomRef
328-328: This hook does not specify all of its dependencies: domRef
328-328: This hook specifies more dependencies than necessary: inputValue, originalProps.isRequired
371-371: This hook does not specify all of its dependencies: domRef.current
371-371: This hook does not specify all of its dependencies: hoverProps
371-371: This hook specifies more dependencies than necessary: inputValue
371-371: This hook does not specify all of its dependencies: isFilled
371-371: This hook does not specify all of its dependencies: domRef.current.focus
371-371: This hook does not specify all of its dependencies: inputWrapperRef
397-397: This hook does not specify all of its dependencies: domRef.current
397-397: This hook does not specify all of its dependencies: domRef.current.focus
397-397: This hook does not specify all of its dependencies: innerWrapperRef
442-442: This hook does not specify all of its dependencies: descriptionProps
@wingkwong Sorry for the late reply, it was my fault for not fully testing before making the PR. I fixed the error and now the input component looks fine.
|
devswi
deleted the
bugfix/input-label-placement-incorrect-when-isMultiline-is-true
branch
📝 Description
labelPlacementset tooutsideandisMultilineset totrue, thelabelelement displays incorrectly.endContentelement.⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit
New Features
isOutsideLeftprop toisLabelOutsidefor improved labeling consistency.isMultilineprop for multiline input support.Enhancements
Style