Wrap examples in React.Fragment

[sapegin]

This will allow to render multiple components without wrapping them in some <div>:

// Before
<div>
  <Button>push</Button>
  <Button secondary>push</Button>
</div>

// After
<Button>push</Button>
<Button secondary>push</Button>

We should keep React 15 compatibility and check if React.Fragment is available. Keep the existing behavior in React 15.

[tizmagik]

Ah great idea! For React 15, is there harm in transparently wrapping in a div anyway so users wouldn’t have to explicitly wrap? 🤔 Something like:

const Fragment = React.Fragment || 'div';

return <Fragment>{example_here}</Fragment>

Haven’t looked at this in a while to see whether or not that makes sense, but seems doable.

[sapegin]

Maybe not, if we make a major release. It may break some custom styles because of new added DOM element.

[MarkMurphy]

This should probably be an overridable styleguidist component. This way, I can supply my own Example component that applies a flexbox layout and spacing around.

[sapegin]

You can already do it with the Wrapper component.

[MarkMurphy]

You can already do it with the Wrapper component.

How's that?

const Example = styled.div`
  display: flex;
  > * {
    margin: ${props => props.theme.spacing(1)};
  }
`;

const Wrapper = ({ children }) => (
  <ThemeProvider theme={theme}>
    <Example>{children}</Example>
  </ThemeProvider>
);

This:

```js
  <Button>Default</Button>
  <Button primary>Primary</Button>
  <Button secondary>Secondary</Button>
  <Button disabled>Disabled</Button>
```

Results in:

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (2:2)
1 :   <Button>Default</Button>
2 :   <Button primary>Primary</Button>
      ^

[MarkMurphy]

There's another component or two between the Wrapper and the content rendered from the code block so you can't just use the Wrapper.

[styleguidist-bot]

🎉 This issue has been resolved in version 7.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[joetidee]

Could also do this to avoid adding in unnecessary HTML tags:

const Fragment = React.Fragment || function(props) {return props.children};

return <Fragment>{example_here}</Fragment>

[mhelvens]

Any chance this could be made to work when the example code starts with some initialization?

initialState = { counter: 0 };

<Button onClick={() => setState({ counter: state.counter + 1 })}>Click Me</Button>
<span>{_.repeat(' ✓', state.counter)}</span>

This still gives me the Adjacent JSX elements must be wrapped in an enclosing tag error.

[sapegin]

It's just a convenience, you can sill use fragments manually:

initialState = { counter: 0 };

<>
  <Button onClick={() => setState({ counter: state.counter + 1 })}>Click Me</Button>
  <span>{_.repeat(' ✓', state.counter)}</span>
</>