Controls: React text node support

[shilman]

Currently React nodes, such as children, show a JSON object editor by default. They should show a text editor instead, in the short term. Long term, we should support JSX #11428

[rodoabad]

Any temporary fix for this?

[shilman]

You can also set argTypes: { fieldName: { control: 'text' } } and then you edit it simply but the child will always be a string

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[monolithed]

Is there any workaround for this one?

UPD:

{
    argTypes: {
        child: {
            table: {
                type: {
                    summary: 'React.ReactNode'
                }
            },
            control: {
                type: 'select',
                options: {
                    default: [ ],
                    withChild: [
                        <SomeComponent />
                    ]
                }
            }
        }
    }
}

[trumbitta]

    argTypes: {
        child: {
            table: {
                type: {
                    summary: 'React.ReactNode'
                }
            },
            control: {
                type: 'select',
                options: {
                    default: [ ],
                    withChild: [
                        <SomeComponent />
                    ]
                }
            }
        

Nice workaround! But how do you pass props to that component?

The value of my withChild is supposed to be ({ label, destination }) => <NavLinkStyled to={destination}>PREFIX - {label}</NavLinkStyled> but it doesn't work

[ghengeveld]

Because JSX isn't serializable (by telejson), such values cannot be used as args. As of Storybook 6.2, you can use a mapping.