CEWK-2840 ColorSelect2 redesign

[alonmeiri]

Closes: https://vimean.atlassian.net/browse/CEWK-2840?focusedCommentId=786710&page=com.atlassian.jira.plugin.system.issuetabpanels%3Acomment-tabpanel#comment-786710

What this PR does

• Style ColorSelect2 according to updated design
• Add disabled prop to ColorSelect2
• Move Presets internally into the ColorSelect2 popover according to design and add presets prop
• Update storybook
• Update & add tests

Screenshots & Recordings

Testing

• Run tests
• Storybook: https://vimeo.github.io/iris/sb/CEWK-2840-colorselect2-design-update/?path=/story/components-colorselect2--controls

[juliewongbandue]

Since there's an update to what the ColorSelect2 looks like with presets, could you also include a story for ColorSelect2 input? (the display of this can just live alongside the preset button, for visual regression snapshot purposes)

[juliewongbandue]

It would also be beneficial to show the disabled state of this component as well

[alonmeiri]

Since there's an update to what the ColorSelect2 looks like with presets, could you also include a story for ColorSelect2 input? (the display of this can just live alongside the preset button, for visual regression snapshot purposes)

@juliewongbandue not sure I follow what you mean? Isn't that the same as the ColorSelect2 story?

[juliewongbandue]

Since there's an update to what the ColorSelect2 looks like with presets, could you also include a story for ColorSelect2 input? (the display of this can just live alongside the preset button, for visual regression snapshot purposes)

@juliewongbandue not sure I follow what you mean? Isn't that the same as the ColorSelect2 story?

@alonmeiri sorry for the confusion. Yes, the ColorSelect and ColorSelect2 stories are the same, but since the ColorSelect2 has modified the props with the presets being on the inside of the component, I was thinking of just presenting the content of the popover in the ColorSelect2 in a story:

So this: https://github.com/vimeo/iris/blob/CEWK-2840-colorselect2-design-update/src/components/inputs/ColorSelect2/ColorSelect2.tsx#L86-L115 with its' different possible states, so we can just keep track of it with our visual regression tool. Does that make sense?