Improve props/state value editing interface

[bvaughn]

Follow up to a discussion thread on #294 and a Messenger chat with @gaearon.

The current UI for editing props/state/hooks values has a couple of shortcomings:

• strings/numeric values are sometimes of an unclear type. (DevTools uses the correct <input type> but this is subtle. Showing e.g. quotation marks around strings could be more helpful.
• null initial values can only become strings at the moment. (DevTools does not attempt to parse numeric or boolean values and change the input type. If it did, we would probably also need to enable a way for you to opt back out of that input type somehow in case it was incorrect.)
• fields that maybe support multiple types (e.g. string | number) are locked into a single type (whichever type they happen to be initially).

Additional quirks that might be worth ironing out:

• Non-editable strings are currently wrapped in quotation marks but editable ones aren't.

[mathieutu]

Hey.
I've made an issue which centralized all the needs about editing interface: #367

[bvaughn]

It looks like that issue intentionally overlaps with several pre-existing issues. Why? (Duplication issues aren't great for maintenance.)

It also looks like one of the bullet points is already implemented:

• Helpers to quick edit value (checkbox, + and - for numbers...).

I guess I don't mind if folks prefer an umbrella issue. We can close some of the redundant ones, but the umbrella issue would need to be more structured and clear I think. I'm not sure I understand what "Allow editing with json and not force/infer type in input." means for example.

[mathieutu]

Hi @bvaughn it's because I had some related points to add, and I've see that there were already several different issues about data editing but not with all my points, and not all well named (this one, as example has a very generic title, and a very specific description), so I gathered those points in a todo list that would be, in my opinion, the target.

For the helpers, yes we could check this one. It has some ux issues, but it's done (and the problems can be part of new issues).

For "Allow editing with json and not force/infer type in input." it's precisely what it is question in this particular issue. Now we only have quick edit in infered type (or string if null), and not the ability to edit fully the field.

Allowing (and parsing) json is a good way to do that, as you can pass number, boolean, object, arrays and string in an input text, and it will be converted to native type.

I actually didn't invent anything, as it's the way vuejs devtools is doing, and it works pretty well.

I totally can put some more explanation and captures/mockup of what I think in the issue if you want. The first message was a draft to begin, and I know I'm not a good english speaker, so let me know if I didn't make me understood properly (or seems to be rude sometimes! 😅).

[bvaughn]

I see!

I think I would prefer to keep a couple of separate issues. Happy to work with you to clean up the titles and descriptions if you have suggestions. We could even create a new label for this if that would help group the related issues.

[mathieutu]

Ok for me, we even can transform my issue in a milestone. It seems to be the github way to define epic. I'm letting you set that the way you want.

For this one I've made a little example to let you see why json input can be the answer: https://codesandbox.io/embed/blue-resonance-9jjye

[bvaughn]

I don't really want a milestone issue for this. I think I'd like a few separate, focused issues. I don't think it's likely that all of this will be implemented, so I think it's nicer if the issues are separated.

So if you'd like to re-purpose the milestone to be about a single thing- that'd be nice. And if you think any of hte pre-existing issues are unclear, leave comments with suggestsions and I can help make sure the descriptions get updated.

[bvaughn]

This repository is being merged into the main React repo (github.com/facebook/react). As part of this, I am moving all issues to that repository as well and closing them here.

This issue has been relocated to:
facebook/react#16476