New: Modifier to add whitespace between example components (#1456, fixes #841)

Let users to be able to add padding between example components without
adding manual styling to their example code. This adds the `padded` modifier option
to the Playground that adds padding between each example component in that block.

```jsx padded
<Button>Push Me</Button>
<Button>Click Me</Button>
<Button>Tap Me</Button>
```

Author: apennell

docs/Documenting.md

@@ -70,6 +70,14 @@ Styleguidist will look for any `Readme.md` or `ComponentName.md` files in the co
     <Button>I’m transparent!</Button>
     ```
 
+    Or add padding between examples in a block by passing the `padded` modifier:
+
+    ```jsx padded
+    <Button>Push Me</Button>
+    <Button>Click Me</Button>
+    <Button>Tap Me</Button>
+    ```
+
     Or disable an editor by passing a `noeditor` modifier:
 
     ```jsx noeditor

examples/basic/src/components/Button/Button.css

@@ -14,10 +14,6 @@
 	cursor: default;
 }
 
-.button + .button {
-	margin-left: 8px;
-}
-
 .checks {
 	background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%),
 		linear-gradient(-45deg, #f5f5f5 25%, transparent 25%),

examples/basic/src/components/Button/Readme.md

@@ -20,6 +20,14 @@ Fenced code blocks with `js`, `jsx` or `javascript` languages are rendered as a
 <Button>Push Me</Button>
 ```
 
+Add padding between examples in a block by passing a `padded` modifier (` ```jsx padded `):
+
+```jsx padded
+<Button>Push Me</Button>
+<Button>Click Me</Button>
+<Button>Tap Me</Button>
+```
+
 You can add a custom props to an example wrapper (` ```js { "props": { "className": "checks" } } `):
 
 ```js { "props": { "className": "checks" } }

src/client/rsg-components/Playground/Playground.js

@@ -76,6 +76,7 @@ class Playground extends Component {
 			<PlaygroundRenderer
 				name={name}
 				exampleIndex={index}
+				padded={!!settings.padded}
 				preview={preview}
 				previewProps={settings.props || {}}
 				tabButtons={

src/client/rsg-components/Playground/Playground.spec.js

@@ -112,3 +112,29 @@ it('showcode option in example settings should overwrite style guide config opti
 
 	expect(queryByRole('textbox')).not.toBeInTheDocument();
 });
+
+it('should not include padded class if padded option is not passed in example settings', () => {
+	const { getByTestId } = render(
+		<Provider>
+			<Playground {...defaultProps} settings={{ padded: false }} />
+		</Provider>
+	);
+
+	expect(getByTestId('preview-wrapper')).not.toHaveAttribute(
+		'class',
+		expect.stringContaining('rsg--padded-')
+	);
+});
+
+it('should include padded class if padded option is passed in example settings', () => {
+	const { getByTestId } = render(
+		<Provider>
+			<Playground {...defaultProps} settings={{ padded: true }} />
+		</Provider>
+	);
+
+	expect(getByTestId('preview-wrapper')).toHaveAttribute(
+		'class',
+		expect.stringContaining('rsg--padded-')
+	);
+});

src/client/rsg-components/Playground/PlaygroundRenderer.js

@@ -24,22 +24,37 @@ export const styles = ({ space, color, borderRadius }) => ({
 		marginLeft: 'auto',
 	},
 	tab: {}, // expose className to allow using it in 'styles' settings
+	padded: {
+		// add padding between each example element rendered
+		'& > *': {
+			isolate: false,
+			marginLeft: -space[1],
+			marginRight: -space[1],
+			'& > *': {
+				isolate: false,
+				marginRight: space[1],
+				marginLeft: space[1],
+			},
+		},
+	},
 });
 
 export function PlaygroundRenderer({
 	classes,
 	exampleIndex,
 	name,
+	padded,
 	preview,
 	previewProps,
 	tabButtons,
 	tabBody,
 	toolbar,
 }) {
 	const { className, ...props } = previewProps;
+	const previewClasses = cx(classes.preview, className, { [classes.padded]: padded });
 	return (
 		<div className={classes.root} data-testid={`${name}-example-${exampleIndex}`}>
-			<div className={cx(classes.preview, className)} {...props} data-preview={name}>
+			<div className={previewClasses} {...props} data-preview={name} data-testid="preview-wrapper">
 				{preview}
 			</div>
 			<div className={classes.controls}>
@@ -55,6 +70,7 @@ PlaygroundRenderer.propTypes = {
 	classes: PropTypes.object.isRequired,
 	exampleIndex: PropTypes.number.isRequired,
 	name: PropTypes.string.isRequired,
+	padded: PropTypes.bool.isRequired,
 	preview: PropTypes.node.isRequired,
 	previewProps: PropTypes.object.isRequired,
 	tabButtons: PropTypes.node.isRequired,