Join the Webstudio community

Updated 4 weeks ago

Improving the user experience for managing local styles in the input field

I can give my feedback as a new WS user, the first time, I tried to drag and drop "Local" styles somewhere else in the input field and I got the notification error, at this time I went to the documentation to understand how this thing is supposed to work. Why not extract this "Local" chip from the input field and keep it somewhere else in "Styles Sources" section separately (like on top of the input field)? Our brain expects everything inside an input field to be modifiable/removable.
O
S
H
14 comments
problem is local style source has 90% of the token abilities, except of the order and reusability
so the risk if putting it outside is making it unobvious that the styles are on that local style source
tokens and local are all style sources
local is just more limited
tokens are for reuse, local is for styling directly on the instance
would the proposal above solte the problem?
I see. The icon suggestion in the previous thread is definitely better. Someone would still think he can remove the icon chip but that's not a big problem after learning how design tokens work in WS. I was thinking about something like a trailing button next to the input field, here is an example of this pattern, but not sure it will work well with multilines input.
Attachment
local-trailing.png
multiline and similarity with tokens as a style source that needs to be still somehow clear would be 2 problems I see
I agree, the main source of confusion, at least for me, is having local styles inside an input field (having something we can't clear nor move inside the input). But to be honest that's not a big deal we get used to it quickly.
yeah, mostly trying to remove frustration from first-time users
I think little visual changes might just do the trick
Maybe a subtle anchor rope would convey being stationary, without breaking the style?
Attachments
inactive.png
active.png
Add a reply
Sign up and join the conversation on Discord