-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
fix(input): added hover and focus to input when label placement is outside-left #2328 #2958
base: canary
Are you sure you want to change the base?
fix(input): added hover and focus to input when label placement is outside-left #2328 #2958
Conversation
🦋 Changeset detectedLatest commit: 45bdab4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 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 |
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Someone is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis patch addresses issues with the hover and focus behavior of the Changes
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 Configration 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
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- .changeset/lucky-schools-travel.md (1 hunks)
- packages/components/input/src/use-input.ts (6 hunks)
- packages/core/theme/src/components/input.ts (1 hunks)
Files skipped from review due to trivial changes (2)
- .changeset/lucky-schools-travel.md
- packages/core/theme/src/components/input.ts
Additional comments not posted (4)
packages/components/input/src/use-input.ts (4)
188-190
: Ensure proper handling of hover states for labels with 'outside-left' placement.The addition of a separate hover state for the label (
isLabelHovered
) with corresponding hover properties (labelHoverProps
) is a good approach to handle hover effects specifically for labels. This change is crucial for achieving the desired UI behavior as described in the PR objectives.
266-266
: Ensure thedata-hover
attribute correctly reflects the combined hover states.The update to the
data-hover
attribute to consider bothisHovered
andisLabelHovered
ensures that the input component responds appropriately to hover events on both the input itself and the label. This is a key part of the solution to the issue described in the PR.
307-307
: Ensure label hover properties are merged correctly.The merging of
labelProps
,props
, andlabelHoverProps
usingmergeProps
ensures that all relevant properties are correctly applied to the label. This is important for maintaining the integrity of the label's behavior and appearance during interactions.
363-363
: Verify that hover states are correctly applied to the input wrapper.The update to the
data-hover
attribute in thegetInputWrapperProps
function to include bothisHovered
andisLabelHovered
ensures that the input wrapper responds correctly to hover events. This change is consistent with the overall goal of improving hover and focus interactions for the input component.
@@ -299,11 +304,10 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML | |||
return { | |||
"data-slot": "label", | |||
className: slots.label({class: classNames?.label}), | |||
...labelProps, | |||
...props, | |||
...mergeProps(labelProps, props, labelHoverProps), |
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.
props should have the higher precedence to override previous props.
...mergeProps(labelProps, labelHoverProps, props),
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 (1)
- packages/components/input/src/use-input.ts (6 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/components/input/src/use-input.ts
Closes #2328
📝 Description
When clicked or hovered on the label with
outside-left
placement, input doesn't get focus and no hover effect.⛳️ Current behavior (updates)
InputFocusNotWorking.mp4
🚀 New behavior
InputFocusWorking.mp4
💣 Is this a breaking change (Yes/No):
📝 Additional Information
const {isHovered, hoverProps} = useHover({isDisabled: !!originalProps?.isDisabled});
can also be renamed asconst {isHovered: isInputHovered, hoverProps: inputHoverProps} = useHover({isDisabled: !!originalProps?.isDisabled});
so the hover variables can be easily identified for the input and the label.If the PR gets accepted please use my GitHub email-id (shrinidhiupadhyaya1195@gmail.com) instead of my other email-id for the Co-authored-by: message.
Summary by CodeRabbit