fix(autocomplete): hide clear button with visibility: hidden
#3000
Conversation
🦋 Changeset detectedLatest commit: 728e4d5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 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 ↗︎
|
|
@chirokas 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 update to Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AutoComplete
participant ClearButton
participant CSS
User->>AutoComplete: Types in input
AutoComplete-->>ClearButton: Show clear button (visible class)
User->>ClearButton: Clicks clear button
ClearButton-->>CSS: Apply invisible class
CSS-->>ClearButton: Hide clear button
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: 0
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (2)
- .changeset/calm-rockets-shop.md (1 hunks)
- packages/core/theme/src/components/autocomplete.ts (1 hunks)
Files skipped from review due to trivial changes (1)
- .changeset/calm-rockets-shop.md
Additional comments not posted (4)
packages/core/theme/src/components/autocomplete.ts (4)
17-17: The addition of the "invisible" class ensures that the clear button is not only invisible but also non-interactive. This aligns with the intended behavior described in the PR summary.
21-21: Changing "data-[visible=true]:visible" to "data-[visible=true]:invisible" ensures that the clear button is non-interactive when hidden, which aligns with the intended behavior.
24-24: Adding "sm:data-[visible=true]:invisible" ensures that the clear button is non-interactive on small screens when hidden, which aligns with the intended behavior.
26-26: Changing "sm:group-data-[hover=true]:data-[visible=true]:visible" to "sm:group-data-[hover=true]:data-[visible=true]:invisible" ensures that the clear button is non-interactive on small screens when hovered, which aligns with the intended behavior.
|
Visibility is an animatable property. However, the result looks terrible and gives a jarring effect. This is because it's a discrete animation. A solution to this problem is to specify a transition on both |
chirokas
force-pushed
the
fix/autocomplete
branch
from
a0c4e82
to
728e4d5
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- .changeset/calm-rockets-shop.md (1 hunks)
- packages/core/theme/src/components/autocomplete.ts (2 hunks)
- packages/core/theme/src/utilities/transition.ts (1 hunks)
Files skipped from review due to trivial changes (2)
- .changeset/calm-rockets-shop.md
- packages/core/theme/src/utilities/transition.ts
Additional comments not posted (1)
packages/core/theme/src/components/autocomplete.ts (1)
42-42: The addition oftransition-transform-colors-opacity-visibilityto theclearButtonis a significant improvement, ensuring smooth transitions for visibility changes. This aligns well with the PR's objectives to enhance UX by managing the interactivity of UI elements more effectively.
| "invisible", | ||
| "text-default-500", | ||
| "group-data-[invalid=true]:text-danger", | ||
| "data-[visible=true]:opacity-100", // on mobile is always visible when there is a value | ||
| "data-[visible=true]:visible", | ||
| "data-[visible=true]:cursor-pointer", | ||
| "sm:data-[visible=true]:opacity-0", // only visible on hover | ||
| "sm:data-[visible=true]:invisible", | ||
| "sm:group-data-[hover=true]:data-[visible=true]:opacity-100", | ||
| "sm:group-data-[hover=true]:data-[visible=true]:visible", |
There was a problem hiding this comment.
Tip
Codebase Verification
The invisible class is referenced in the code but does not appear to be defined anywhere in the codebase. This could lead to issues with the intended functionality of the clearButton styles.
- Ensure that the
invisibleclass is defined in your stylesheets.
Analysis chain
The changes to the clearButton styles introduce conditional visibility and opacity, which are crucial for improving UX by making the button non-interactive when not visible. However, ensure that the invisible class is defined elsewhere in your stylesheets, as it's being used here without prior definition in the provided code.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the definition of the `invisible` class in stylesheets.
# Test: Search for the `invisible` class definition in CSS or TypeScript files.
rg --type css --type ts 'invisible' --files-with-matches
Length of output: 245
Script:
#!/bin/bash
# Description: Search for the definition of the `invisible` class in CSS or TypeScript files.
# Test: Find the definition of the `invisible` class.
rg --type css --type ts '\.invisible\s*{'
Length of output: 137
Script:
#!/bin/bash
# Description: Search for the definition of the `invisible` class in CSS or TypeScript files.
# Test: Find the definition of the `invisible` class.
rg --type css --type ts '\.invisible\s*\{'
Length of output: 44
Script:
#!/bin/bash
# Description: Search for the definition of the `invisible` class in all file types.
# Test: Find the definition of the `invisible` class.
rg '\.invisible\s*\{'
Length of output: 23
Closes #
📝 Description
Stacked on #3217.
opacity: 0causes the elements to be very transparent but users can still interact with them.It is needed to transition opacity along with visibility to enable and disable the interactivity of elements.
⛳️ Current behavior (updates)
20240514_160517.mp4
🚀 New behavior
20240514_160634.mp4
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit