Preamble
Each ZObject key (node) has an inline "mode switcher", to allow the key representation to be changed, which is a necessary but relatively rare use case. Currently we use a drop-down with four options. Sometimes, if the key has content, two of these are disabled.
Pros:
- This uses little space
- Options are visibly mutually intelligible
Cons:
- No opportunity for explanation of what these are for and why
- Not clear why you can or can't do certain actions.
- No "undo" option if you've done something and now decide you don't want to.
We should improve this area.
Design proposal
Swap the mode switcher in favor of a limited type selector. Here's are some examples in which an editor wants to edit a key that needs to be of type string. They can select type string (for mode literal), select type function (for mode function call that returns a string), or type reference (for mode reference that reference an existing string object). There's also type argument for the objects that require it. Every selection will dynamically change the presented UI, eg. for type string we will display an input filed, for type function we will display a function lookup.
Edit key of type string
Change key from type string to type reference
Change key from type string to type function
Other examples can be found under the "Edit mode" section of this Figma file.
Some other ideas
If we believe that the type selector (aka mode switcher) needs more explanations, we could leverage the dropdown menu real estate to give additional information on the different types (final copy to be defined).