Remaining CssValueInput todos

[kof]

• [x] This interaction doesn't preserve the unit (Unit mode > select all > backspace > enter number)

https://user-images.githubusercontent.com/52824/195978905-bc14d810-3638-4711-a0fa-0f15bc61677a.mp4

• [x] On blur should not activate the property name label showing that it has changed when the value hasn't changed,

• [x] default cursor over input should be "default", not scrub

• [x] don't bind pointermove event if there was no pointerdown event

• [x] allow vertical movement when scrubbing horizontally, so that user can avoid covering the number by moving up/down

• [x] match the styles of the combobox items with figma

• [x] Questions around scrubbing behavior:

  • should we select text when scrub starts?
  • should scrub cursor be delayed using threshold distance?
  • when input is focused, should scrub be still enabled?
  • when input focused and scrub starts, should text get selected?

[taylornowotny]

There's one UX pattern I'm not sure about that I would like to discuss. When scrubbing, if the cursor is dragged away from the input field, the cursor will jump back to the input when the click is released.

This doesn't feel right to me, but figma also does it this way. I'm curious to know what others think. In my view, it's never a good idea to take control of the cursor position from the user. It feels wrong, like if your own hand suddenly moved position in space without you moving it.

That's all subjective though - what do others think?

https://user-images.githubusercontent.com/86495896/196234290-206dc1c1-9787-4c6a-aec4-2473f6dfad74.mov

[kof]

@taylornowotny that's basically web platform limitation, when you do mouseup, we show you your actual cursor, its where it has always been. While you are dragging we hide the real cursor and show you a fake one. This is how we can go over the window edge and come out on the other side.

This is not fixable.

[taylornowotny]

@taylornowotny that's basically web platform limitation, when you do mouseup, we show you your actual cursor, its where it has always been. While you are dragging we hide the real cursor and show you a fake one. This is how we can go over the window edge and come out on the other side.

This is not fixable.

Understood! All good then. Users who are accustomed to the figma behavior may expect it to work this way anyhow

[taylornowotny]

Just a few remaining issues before it's perfect!

• [x] The scrub cursor shows immediately on hover. The primary action that an input will be used for is changing the value, while scrubbing is secondary. For that reason I think the cursor should be the default cursor when the input is hovered.

  • The scrub cursor can show after mouse has moved X pixels after pointerdown (Oleg’s suggestion). The distance should only be long enough that it won’t be activated by accident. Sometimes a forceful click on a trackpad or handshake mouse causes a tiny bit of mouse movement.

• [x] The scrub cursor looks different on hover vs while scrubbing. In my view, it would be preferable to use just one scrub cursor.

• [x] Unitless units (dash) should only be available on properties that accept unitless values. Most properties do not. Currently when selecting unitless from the unit menu, the unit in the input field does not change. In the design there is an icon for this rather than a "-" character, but let me know if there's an issue with that. The reason an icon is used is for visibility in the input field. A simple "-" character can be easy to miss.

[ghost]

For prosperity there's also this issue I found while working on the others.

• [x] input values revert to their previous state when you un-focus then focus back.

Video attached:

https://user-images.githubusercontent.com/105234327/197590028-7c280cb3-0eaf-4e94-8f49-fd27ba5aeae2.mp4

[kof]

was done, right?