dbismut
commented
3 years ago Hi @chasedavis, thanks for all the insights, much appreciated. Let me answer:
The joystick border does not have it’s own style selection. I'm using a white background, and wanted the background of the joystick (when collapsed) to be white. Basically, when not hovered, my style preference was to have only the middle dot and the border of the joystick to be visible.
I understand. We might need more control over each style atom, but at the end a theme option needs to make a trade off between easy / consistent theming and ultra customization.
For many of the style preferences, it would be great to have the elements be responsive rather than hardcoding pixel values (e.g. controlWidth), I found it difficult to achieve a workable layout across desktop and mobile. In addition, the label's keep clipping on mobile due to the hardcoded controlWidth taking up more horizontal space.
That might be a tough one, also because the js logic uses the style values in some places. Making it relative would require extra work. But I agree with the principle.
For the dragger/scrubber on number inputs, it could be nice for this to be covering the whole input box, rather than just hugging the left side. It's a bit of work to get your cursor over the small scrubbable area -- so it’d also be nice to make the left size hit box for the scrubber larger/adjustable.
We had considered this (essentially have a look at this linked sandbox). The main issue is that it could conflict with the native input behavior (regarding input selection). Figma allows scrubbing on the whole field with the ALT modifier key pressed if I remember correctly.
In a similar vein, the label for the scrubbers are sliced to be only the first character. It would be great to fit a whole word in the value-label. In addition, while the tooltip is nice, I think the UX could be better if the tooltip appeared immediately (instead of after e.g. a 2 second hover).
Fair point regarding the first character, I think I have the logic set up. Regarding the hint, it's at the moment the default delay from a radix-ui tooltip which is 700ms. I think it's acceptable in all frankness (+ it seems that the delay is skipped when switching from one hint to another).
Inputting a default value that is above the max of a slider makes it slide outside of the slider container. Ideal behavior should be stopping the scrubber at the max (which it does onChange, but not on first load).
Yes, that's an easy one.
Allow the value input field to accept an object of size 1. I am programmatically generating input GUIs via useControls, and I hardcoded some ternaries to get the object of size 1 input not to fail.
Not sure I understand that one.
Scroll wheel scrubbing while a number input is focused would be nice
It's a good idea, but that could also conflict with some use cases (let's say you want to scroll inside an overflowing panel).
For a vec2 or vec3 input, allow different min/max values per dimension
That's already the case, but the API sucks with arrays:
// object (acceptable api)
useControls({ vec2: { value: { x: 0, y: 0 }, x: { step: 0.1 }, y: { step: 1 } } })
// array (api sucks a bit as we're using default implicit keys)
useControls({ vec2: { value: [0, 0], x: { step: 0.1 }, y: { step: 1 } } })
chasedavis
Just spent the day porting a couple of my GUI's to use leva (ex). First of all, amazing project -- so excited for its potential. Here is some feedbacks. For most of them I managed some workaround, so there's nothing too urgent:
The joystick border does not have it’s own style selection. I'm using a white background, and wanted the background of the joystick (when collapsed) to be white. Basically, when not hovered, my style preference was to have only the middle dot and the border of the joystick to be visible.
For many of the style preferences, it would be great to have the elements be responsive rather than hardcoding pixel values (e.g. controlWidth), I found it difficult to achieve a workable layout across desktop and mobile. In addition, the label's keep clipping on mobile due to the hardcoded controlWidth taking up more horizontal space.
For the dragger/scrubber on number inputs, it could be nice for this to be covering the whole input box, rather than just hugging the left side. It's a bit of work to get your cursor over the small scrubbable area -- so it’d also be nice to make the left size hit box for the scrubber larger/adjustable.
In a similar vein, the label for the scrubbers are sliced to be only the first character. It would be great to fit a whole word in the value-label. In addition, while the tooltip is nice, I think the UX could be better if the tooltip appeared immediately (instead of after e.g. a 2 second hover)
Inputting a default value that is above the max of a slider makes it slide outside of the slider container. Ideal behavior should be stopping the scrubber at the max (which it does onChange, but not on first load).
Allow the value input field to accept an object of size 1. I am programmatically generating input GUIs via useControls, and I hardcoded some ternaries to get the object of size 1 input not to fail.
Scroll wheel scrubbing while a number input is focused would be nice
For a vec2 or vec3 input, allow different min/max values per dimension
Great work pmndrs and team!