experimental: add gradient controller to update color stops using ui

[JayaKrishnaNamburu]

Description

The GradientControl helps in displaying the colour stops that are available in the linear-gradient that users added.

There are two knows issues at the moment.

• The only limitation is. We can't swap the colours when a colour stop crosses an existing colour stop. In some
  tools, the colours are swapped resulting in the swiping of the gradient too.
  This is because of a limitation/bug on the radix side, they pre-sort the slider stops. So, we can never know which crosses an existing stop and changed it's value. Slider ability to disable swap of multiple thumbs radix-ui/primitives#2247

Steps for reproduction

• Passing a linear-gradient should show all the color-stops in the gradient.
• The color-hints are displayed at the bottom of the gradient bar. These can't be moved along, more info about it is in the code component. Because, this basically changes the whole gradient just by moving.
• The color-hints are showed at the bottom of the gradient. Just to notify users about the existence of the hints.
• Users should be able to move the color-stops along the slider track.
• The color-stops can be moved using the arrow keys from the keyboard.

Code Review

• hi @kof, I need you to do
  • conceptual review (architecture, feature-correctness)
  • detailed review (read every line)
  • test it on preview

Before requesting a review

• made a self-review
• added inline comments where things may be not obvious (the "why", not "what")

Before merging

• tested locally and on preview environment (preview dev login: 5de6)
• updated test cases document
• added tests
• if any new env variables are added, added them to .env file

[TrySound]

I like how gradient style tries to balance new dots instead of manually centering, maybe not needed for our case
https://github.com/user-attachments/assets/a339afc6-6d18-4597-9eb0-518dcc03b52e

[TrySound]

I would add outline for focus-visible only

[TrySound]

I instinctively do alt+click to delete thumbs

[TrySound]

I would do color picker as popover, tooltip feels super unpredictable

[kof]

I instinctively do alt+click to delete thumbs

I think its not a bad idea for us to support this, since our users know this combo

[JayaKrishnaNamburu]

I like how gradient style tries to balance new dots instead of manually centering, maybe not needed for our case https://github.com/user-attachments/assets/a339afc6-6d18-4597-9eb0-518dcc03b52e

It is indeed looking good. But the catch is, if a user sets the slider to a custom location. It changes it at the time of rebalancing when a new stop is added. Or is the behaviour is different there ?

[JayaKrishnaNamburu]

I would do color picker as popover, tooltip feels super unpredictable

I am using it as PropOver itself.
https://github.com/webstudio-is/webstudio/blob/add-gradient-control/apps/builder/app/builder/features/style-panel/sections/backgrounds/gradient-control.tsx#L320

Seems the events from Slider are little bit unpredictable.

[JayaKrishnaNamburu]

The ChevronBigIconUp is removed now in the new icons. Should i use Play icon and try to fill it. Or should we add it back to the list of icons ?

cc @kof

[kof]

Total list of issues:

• click on a stop handle shouldn't move it
• click on track in any place should be adding a stop, not move the selected stop, not use an artificial minimal distance to the previous stop
• simple linear-gradient(red, red) should work
• tooltip "Add color stop" missing
• neither figma nor webflow has hints, why do we need them? I don't know.

[JayaKrishnaNamburu]

click on track in any place should be adding a stop, not move the selected stop, not use an artificial minimal distance to the previous stop

Looks like this is how all the sliders behave too. Its add for me too while working with gradient selector. But, let's see react-aria. Even it moves the closest thumb, when we click somewhere on the range
https://react-spectrum.adobe.com/react-aria/Slider.html#reusable-wrappers

Do you think, it's the actual standard spec and trying to prevent the movement is anti pattern ?

[kof]

@JayaKrishnaNamburu idk if preventing the movement is supported from the spec, like using some preventDefault, but it doesn't really matter, because in our case its not really a slider, we are just trying to see if slider gets us the UX we need to avoid reimplementing accessibility ourselves. So the question is really - can you hide the track or not let it listen to clicks in some other way or not

[JayaKrishnaNamburu]

So the question is really - can you hide the track or not let it listen to clicks in some other way or not
Using radix, if we are doing preventDefault for clicks. It's avoiding the thumb movement altogether. But i see the browser based input[range] doesn't have these type of weird behaviours. So, i will give a try with that this weekend. Ranger slider might not be the best choice, as all of them are moving on clicks. Or either stops to move if prevented for clicks.

[kof]

yeah, but you already have your own click position logic, so why not hide the range, avoid radix for these, and based on where the click happened just add the new stop, click - your own logic, drag - slider logic