feat(CX-3348): Update Input components

[MrSltun]

This PR resolves CX-3348

[!IMPORTANT] This is a major version update, please take a look at Features & Breaking Changes section

Description

This PR updates the input components in Palette to match the new design

Features & Breaking Changes

• Input, LabelledInput, Select, MultiSelect, and TextArea now come with a title that floats when active/completed
• New PhoneInput element that includes a searchable list of country codes and an input
• Input now has a new prop called showCounter to render the character limit under the Input

⚠️ Breaking Changes ⚠️

• Select element prop variant is no longer supported
• The initial Select value should be an empty string ("") to enable title animation on select
• Adding title to an element will add 10px top padding to the element, preventing the title from being cut

Screenshots & Videos

New Input ✨

Details

#### Screenshots | Status | Screenshot | | -- | -- | | default | | | with title | | | with description | | | with a placeholder (no title) | | | with a placeholder (with title - focused) | | | required | | | hover | | | focused | | | finished typing | | | disabled | | | with error message | | | with character counter | | | with prefix and title | | | with prefix and title - focused | | | with suffix and title | | | with suffix and title - focused | | #### Demos of Moving Title | Input | Video | | -- | -- | | Normal Input |

New Phone Input ✨

Details

#### Screenshots | Status | Screenshot | | --- | --- | | Empty | | | With a placeholder | | | Disabled | | | Filled | | | Hover | | | Focused | | | Required | | | With the list open | | | With the list open and filtered | | | With errors | | #### Demo | Jounrey | Video | | -- | -- | | ⌨️ & 🖱️ |

New TextArea ✨

Details

#### Screenshots | Status | Screenshot | | -- | -- | | default | | | with title | | | with description | | | with placeholder (no title) | | | with placeholder (with title - focused) | | | required | | | hover | | | focused | | | finished typing | | | disabled | | | disabled (with value) | | | with error message | | | with character counter | | | with character counter (over limit) | |

New Select ✨

Details

#### Screenshots | Status | Screenshot | | -- | -- | | default | | | default (with value) | | | with title | | | with title (with value) | | | with title and description | | | required | | | hover | | | focused | | | with error message | | | disabled | | | disabled (with value) | | #### Demo Video

New MultiSelect ✨

Details

#### Screenshots | Status | Screenshot | | -- | -- | | default | | | default (with value) | | | with title | | | with title (with value) | | | with title and description | | | required | | | hover | | | focused | | | with error message | | | disabled | | #### Demo Video

📦 Published PR as canary version: Canary Versions

:sparkles: Test out this PR locally via: ```bash npm install @artsy/palette-charts@36.0.0-canary.1250.29384.0 npm install @artsy/palette@37.0.0-canary.1250.29384.0 # or yarn add @artsy/palette-charts@36.0.0-canary.1250.29384.0 yarn add @artsy/palette@37.0.0-canary.1250.29384.0 ```

[MrSltun]

And as a side-effect, LabeledInput changed to match the new design as well 😄

Let's hope I didn't break anything else 🌚

[MrSltun]

@MounirDhahri I'm merging this to a working branch called in-progress/new-input as @dzucconi suggested, so that we can proceed with the work and release a canary version of Palette from the working branch to test it on Force before releasing it to the public :)

Please correct me if I got it wrong! @dzucconi

[MounirDhahri]

Sounds great, forgot that we spoke about it Already! let's proceed with that then once Damon approves

[dzucconi]

Yeah: we can't merge this until every input-like component is converted and we validate Force. (I've added the canary tag).

(Looking now though!)

[dzucconi]

Was wondering what happened to this — can you rebase though instead of the merge?

[damassi]

One thing I noticed @MrSltun is that checking out the order flow in the review app (which i think needs to be rebased from main, if it doesn't break anything) is that the drop down doesn't seem to be selectable, like i can't click that country select:

OR maybe that's by design since it seems disabled on second glance. So ignore me... lemme try to find another drop down to confirm.

Update: Yep, works great -- ignore the above.

[damassi]

@dzucconi - do you have any blocking comments, or can we do a follow-up here?

[dzucconi]

I would really address the prefixOffset props stuff before merging. Changing props APIs down the road is hard.

We also need to drop the default name

[damassi]

No prob, just wanted to be sure 👍 I shall contain my eagerness

[damassi]

Alright @MrSltun - thanks for all of your hard work on this, for real. Gonna merge it and we can follow up with a merge on the review app tomorrow and I can update Volt 2 first, then Forque and Volt 1.

[artsyit]

:rocket: PR was released in @artsy/palette-charts@36.0.0, @artsy/palette@37.0.0 :rocket: