[CPT-1478] Add enableResetSearch prop to Select and QB

[angelinastavniiciuc]

CPT-1478

Description

In this PR we provided new prop enableResetChange for Select component in order to be able to reset value from the search input and this prop was added to Multiselect component for QB

How to test

• Temploy
• Open temploy
• Go to Select story
• Under Search behavior example check if new example Search with input reset appeared
• Make sure that reset is working as expected (when something is typed clicking on reset button clears the value)

Screenshots

Before.	After.

Development checks

• Add changeset according to guidelines (if needed)
• 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
• 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
• 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.

[changeset-bot]

🦋 Changeset detected

Latest commit: 410a2c8

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

This PR includes changesets to release 2 packages

Name	Type
@toptal/picasso	Minor
@toptal/picasso-query-builder	Minor

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

[toptal-devbot]

Greetings from FX team, @angelinastavniiciuc 👋

Thank you so much for contributing 🙇

We have got high priority ticket generated on our Kanban board so we will do our best to make your experience supreme!

What's next? We will collaborate using this workflow. For you this practically means making sure DONE criteria is met and responding promptly to code review comments 😉

🙏 please, help us improve, rate your contributing experience after merge

[angelinastavniiciuc]

@toptal-bot run package:alpha-release

[toptal-devbot]

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@53.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-761a51db7.28+761a51db7
yarn add @toptal/picasso@42.2.5-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-761a51db7.1+761a51db7
yarn add @toptal/picasso-charts@56.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-761a51db7.28+761a51db7
yarn add @toptal/picasso-codemod@5.6.4-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-761a51db7.78+761a51db7
yarn add @toptal/picasso-forms@66.1.2-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-761a51db7.23+761a51db7
yarn add @toptal/picasso-pictograms@2.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-761a51db7.148+761a51db7
yarn add @toptal/picasso-provider@3.4.3-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-761a51db7.20+761a51db7
yarn add @toptal/picasso-query-builder@1.2.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-761a51db7.16+761a51db7
yarn add @toptal/picasso-rich-text-editor@10.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-761a51db7.28+761a51db7
yarn add @toptal/picasso-shared@13.1.3-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-761a51db7.1+761a51db7
yarn add @toptal/picasso-tailwind@1.0.2-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-761a51db7.8+761a51db7

[angelinastavniiciuc]

@toptal-anvil ping reviewers

[angelinastavniiciuc]

@toptal-anvil ping reviewers

[angelinastavniiciuc]

@toptal-bot run package:alpha-release

[toptal-devbot]

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@53.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-e982ffb02.29+e982ffb02
yarn add @toptal/picasso@42.2.5-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-e982ffb02.2+e982ffb02
yarn add @toptal/picasso-charts@56.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-e982ffb02.29+e982ffb02
yarn add @toptal/picasso-codemod@5.6.4-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-e982ffb02.79+e982ffb02
yarn add @toptal/picasso-forms@66.1.2-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-e982ffb02.24+e982ffb02
yarn add @toptal/picasso-pictograms@2.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-e982ffb02.149+e982ffb02
yarn add @toptal/picasso-provider@3.4.3-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-e982ffb02.21+e982ffb02
yarn add @toptal/picasso-query-builder@1.2.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-e982ffb02.17+e982ffb02
yarn add @toptal/picasso-rich-text-editor@10.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-e982ffb02.29+e982ffb02
yarn add @toptal/picasso-shared@13.1.3-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-e982ffb02.2+e982ffb02
yarn add @toptal/picasso-tailwind@1.0.2-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-e982ffb02.9+e982ffb02

[TomasSlama]

Good job, thanks for the contribution, I left one more small comment about changeset, but other than that I don't see any problem 🙇 💪

[rasitozcan]

@toptal-bot run package:alpha-release

[toptal-devbot]

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@53.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-2a295f988.30+2a295f988
yarn add @toptal/picasso@42.2.5-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-2a295f988.3+2a295f988
yarn add @toptal/picasso-charts@56.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-2a295f988.30+2a295f988
yarn add @toptal/picasso-codemod@5.6.4-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-2a295f988.80+2a295f988
yarn add @toptal/picasso-forms@66.1.2-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-2a295f988.25+2a295f988
yarn add @toptal/picasso-pictograms@2.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-2a295f988.150+2a295f988
yarn add @toptal/picasso-provider@3.4.3-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-2a295f988.22+2a295f988
yarn add @toptal/picasso-query-builder@1.2.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-2a295f988.18+2a295f988
yarn add @toptal/picasso-rich-text-editor@10.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-2a295f988.30+2a295f988
yarn add @toptal/picasso-shared@13.1.3-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-2a295f988.3+2a295f988
yarn add @toptal/picasso-tailwind@1.0.2-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-2a295f988.10+2a295f988

[toptalwadiibasmi]

The code looks good.

[rasitozcan]

@toptal-bot run package:alpha-release

[toptal-devbot]

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@53.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-20c8adb09.31+20c8adb09
yarn add @toptal/picasso@42.2.5-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-20c8adb09.4+20c8adb09
yarn add @toptal/picasso-charts@56.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-20c8adb09.31+20c8adb09
yarn add @toptal/picasso-codemod@5.6.4-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-20c8adb09.81+20c8adb09
yarn add @toptal/picasso-forms@66.1.2-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-20c8adb09.26+20c8adb09
yarn add @toptal/picasso-pictograms@2.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-20c8adb09.151+20c8adb09
yarn add @toptal/picasso-provider@3.4.3-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-20c8adb09.23+20c8adb09
yarn add @toptal/picasso-query-builder@1.2.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-20c8adb09.19+20c8adb09
yarn add @toptal/picasso-rich-text-editor@10.0.1-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-20c8adb09.31+20c8adb09
yarn add @toptal/picasso-shared@13.1.3-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-20c8adb09.4+20c8adb09
yarn add @toptal/picasso-tailwind@1.0.2-alpha-cpt-1478-add-clear-feature-to-select-search-in-picasso-20c8adb09.11+20c8adb09

[mkasperowicz]

LGTM, everything works as expected