Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[BILL-5689] Display reset button on root hover for Input component #4622

Merged
merged 4 commits into from
Nov 14, 2024
Merged

[BILL-5689] Display reset button on root hover for Input component #4622

merged 4 commits into from
Nov 14, 2024
+62 −27

Conversation

george-aidonidis
Copy link
Contributor

@george-aidonidis george-aidonidis commented Nov 11, 2024 •
edited
Loading

BILL-5689

Description

User complained that the reset button was flickering. Please check before section in the screenshots

How to test

  • Temploy
  • Go to Input story
  • Pass enableReset to display the X reset button
  • The button should always be displayed when hovering over the entire field (even over at the icon)

Screenshots

Before

Screen.Recording.2024-11-11.at.12.50.42.mov

After

Screen.Recording.2024-11-11.at.16.20.42.mov

Development checks

  • Add changeset according to guidelines (if needed)
  • Double check if picasso-tailwind-merge requires major update (check its README.md)
  • Read CONTRIBUTING.md and Component API principles
  • Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
  • Annotate all props in component with documentation
  • [n/a] Create examples for component
  • Ensure that deployed demo has expected results and good examples
  • Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
  • Self reviewed
  • Covered with tests (visual tests included)

Breaking change

  • [n/a] codemod is created and showcased in the changeset
  • [n/a] test alpha package of Picasso in StaffPortal

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

  • @toptal-bot run package:alpha-release - Release alpha version
  • @toptal-anvil ping reviewers - Ping FX team for review
PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

  1. You have no extra requests.
  2. You have optional requests.
    1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

  1. Something is broken after the changes.
  2. Acceptance criteria is not reached.
  3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

  1. There are leftovers like unnecessary logs, comments, etc.
  2. You have an opinionated comment regarding the code that requires a discussion.
  3. You have questions.

How to handle the comments?

  1. An owner of a comment is the only one who can resolve it.
  2. An owner of a comment must resolve it when it's addressed.
  3. A PR owner must reply with ✅ when a comment is addressed.

@george-aidonidis george-aidonidis added the Bugfix Something isn't working label Nov 11, 2024
@george-aidonidis george-aidonidis self-assigned this Nov 11, 2024
@george-aidonidis george-aidonidis requested a review from a team as a code owner November 11, 2024 14:30
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Nov 11, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 8d9d494

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
Name Type
@toptal/picasso-outlined-input Patch
@toptal/picasso-select Patch
@toptal/picasso-input Patch
@toptal/picasso-forms Patch
@toptal/picasso-rich-text-editor Patch
@toptal/picasso Patch
@toptal/picasso-autocomplete Patch
@toptal/picasso-avatar-upload Patch
@toptal/picasso-date-picker Patch
@toptal/picasso-number-input Patch
@toptal/picasso-password-input Patch
@toptal/picasso-tagselector Patch
@toptal/picasso-timepicker Patch
@toptal/picasso-query-builder Patch
@toptal/picasso-date-select Patch
@toptal/picasso-page Patch

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

@george-aidonidis george-aidonidis changed the title Display reset button on root hover for Input component [BILL-5689] Display reset button on root hover for Input component Nov 11, 2024
@denieler
Copy link
Collaborator

found temploy - https://picasso.toptal.net/BILL-5689-fix-reset-button-on-input/?path=/story/picasso-introduction--introduction 😃 strange that it does not show a link in the PR

@denieler
Copy link
Collaborator

I'd try to keep this reset icon when the input element is focused/active too, not only when hovered

Screen.Recording.2024-11-11.at.17.00.38.mov

@toptal-devbot
Copy link
Collaborator

toptal-devbot commented Nov 11, 2024 •
edited
Loading

⚠️ Following packages are missing changesets. Please check if they don't require one.

@toptal/picasso-form

denieler
denieler approved these changes Nov 11, 2024
View reviewed changes
Copy link
Collaborator

@denieler denieler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Code looks good, tested on storybook temploy and it works correctly 👍

I'd suggest only also to show the reset icon on focused inputs

@george-aidonidis george-aidonidis force-pushed the BILL-5689-fix-reset-button-on-input branch 2 times, most recently from 2394872 to dbdd394 Compare November 11, 2024 16:40
@george-aidonidis
Copy link
Contributor Author

Updated to have focus/active state too

Screen.Recording.2024-11-11.at.18.46.48.mov

@george-aidonidis george-aidonidis force-pushed the BILL-5689-fix-reset-button-on-input branch from dbdd394 to 62b515f Compare November 11, 2024 17:08
denieler
denieler approved these changes Nov 12, 2024
View reviewed changes
Copy link
Collaborator

@denieler denieler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested, works as expected 👍

@george-aidonidis george-aidonidis force-pushed the BILL-5689-fix-reset-button-on-input branch from 62b515f to e048b5d Compare November 13, 2024 06:14
@george-aidonidis
Copy link
Contributor Author

@toptal-bot run package:alpha-release

@toptal-devbot
Copy link
Collaborator

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@56.0.6-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/base-tailwind@1.0.1-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.55+e048b5d95
yarn add @toptal/picasso@53.0.5-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.2+e048b5d95
yarn add @toptal/picasso-accordion@3.0.14-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-account-select@3.0.12-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-alert@3.0.26-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-amount@1.0.10-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-application-update-notification@2.0.26-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-autocomplete@5.0.15-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-avatar@6.1.6-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-avatar-upload@3.0.17-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-backdrop@1.0.9-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-badge@3.0.4-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-breadcrumbs@3.0.6-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-button@4.0.15-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-calendar@4.0.15-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-carousel@4.0.15-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-charts@59.0.4-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-checkbox@5.0.7-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-codemod@6.0.1-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.311+e048b5d95
yarn add @toptal/picasso-collapse@3.0.3-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-container@3.1.2-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-date-picker@3.0.13-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-date-select@1.0.62-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-drawer@3.0.26-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-dropdown@4.2.2-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-dropzone@5.0.14-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-empty-state@2.0.9-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-environment-banner@3.0.1-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.106+e048b5d95
yarn add @toptal/picasso-fade@1.0.8-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-file-input@4.0.13-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-form@6.1.5-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-forms@73.0.21-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.2+e048b5d95
yarn add @toptal/picasso-grid@5.0.5-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-helpbox@5.0.15-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-icons@1.8.2-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-image@3.0.3-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-input@4.0.13-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-input-adornment@3.0.6-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-link@3.0.5-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-list@5.0.6-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-loader@3.0.3-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-logo@2.0.5-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-menu@3.0.11-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-modal@3.0.26-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-modal-context@1.0.2-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.370+e048b5d95
yarn add @toptal/picasso-note@4.0.4-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-notification@4.0.15-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-number-input@4.0.17-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.2+e048b5d95
yarn add @toptal/picasso-outlined-input@4.0.13-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-overview-block@4.0.4-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-page@5.1.15-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-pagination@4.0.15-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-paper@4.0.3-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-password-input@5.0.13-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-pictograms@5.0.3-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-popper@1.0.6-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-prompt-modal@2.0.26-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-provider@5.0.1-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.189+e048b5d95
yarn add @toptal/picasso-query-builder@8.0.9-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.2+e048b5d95
yarn add @toptal/picasso-quote@2.0.6-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-radio@5.0.7-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-rating@3.0.6-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-rich-text-editor@17.0.13-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-section@5.0.15-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-select@4.0.13-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-shared@15.0.1-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.268+e048b5d95
yarn add @toptal/picasso-show-more@2.0.14-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-skeleton-loader@1.0.51-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-slide@1.0.3-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-slider@4.0.4-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-step@4.0.5-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-switch@4.0.6-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-table@3.0.15-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-tabs@5.0.8-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-tag@4.0.6-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-tagselector@3.1.15-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-tailwind@3.0.1-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.55+e048b5d95
yarn add @toptal/picasso-tailwind-merge@2.0.3-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-test-utils@1.1.2-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.268+e048b5d95
yarn add @toptal/picasso-timeline@5.0.4-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-timepicker@4.0.13-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-tooltip@2.0.2-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-tree-view@3.0.27-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-typography@4.0.3-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-typography-overflow@4.0.3-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-user-badge@5.1.7-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95
yarn add @toptal/picasso-utils@3.0.1-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15+e048b5d95

@george-aidonidis george-aidonidis changed the title [BILL-5689] Display reset button on root hover for Input component [BILL-5689 Display reset button on root hover for Input component Nov 13, 2024
@george-aidonidis george-aidonidis changed the title [BILL-5689 Display reset button on root hover for Input component [BILL-5689] Display reset button on root hover for Input component Nov 13, 2024
@george-aidonidis george-aidonidis force-pushed the BILL-5689-fix-reset-button-on-input branch from 81bd0a8 to 8d9d494 Compare November 13, 2024 13:22
@george-aidonidis george-aidonidis merged commit b3868a1 into master Nov 14, 2024
17 checks passed
@george-aidonidis george-aidonidis deleted the BILL-5689-fix-reset-button-on-input branch November 14, 2024 08:38
@toptal-build toptal-build mentioned this pull request Nov 14, 2024
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@denieler denieler denieler approved these changes

Assignees

@george-aidonidis george-aidonidis

Labels
Bugfix Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@george-aidonidis @denieler @toptal-devbot