Merge pull request #12882 from niklasmh/11358-render-newlines-in-mark…

…down-code-blocks-in-argtables

Addon-docs: Fix newline handling in ArgsTable code blocks

examples/cra-kitchen-sink/src/components/Container.js

@@ -10,7 +10,16 @@ const Container = ({ children, title, age, isAmazing }) => (
 );
 
 Container.propTypes = {
-  /** The nodes to be rendered in the button */
+  /**
+   * The nodes to be rendered in the button
+   * 
+   * Example value:
+   * 
+   * ```
+   * <h1>Node 1</h1>
+   * <h2>Node 2</h2>
+   * ```
+   */
   children: PropTypes.node.isRequired,
   /** Show exclamation marks */
   isAmazing: PropTypes.bool,

examples/cra-kitchen-sink/src/stories/test.stories.mdx

@@ -1,7 +1,14 @@
-import { Story, Meta } from '@storybook/addon-docs';
+import { Story, Meta, ArgsTable } from '@storybook/addon-docs';
+import Container from '../components/Container'
 
-<Meta title="Docs/Test" />
+<Meta title="Docs/Test" component={Container} />
 
 <Story name="NewStory123">
-  <h2> Hello </h2>
+  <Container>
+    <h1>Hello</h1>
+  </Container>
 </Story>
+
+## Arguments
+
+<ArgsTable story="NewStory123" />

examples/cra-ts-kitchen-sink/src/components/Button.tsx

@@ -4,7 +4,16 @@ export type Type = 'default' | 'action';
 
 interface Props {
   /**
-   * Click event handler
+   * Click event `handler`
+   * 
+   * Example function:
+   * 
+   * ```
+   * () => {
+   *   doThis();
+   * }
+   * ```
+   * 
    * @default null
    */
   onClick?: () => void;

lib/components/src/blocks/ArgsTable/ArgRow.tsx

@@ -35,12 +35,20 @@ const Description = styled.div(({ theme }) => ({
     },
   },
 
-  code: codeCommon({ theme }),
+  code: {
+    ...codeCommon({ theme }),
+    fontSize: 12,
+    fontFamily: theme.typography.fonts.mono,
+  },
 
   '& code': {
     margin: 0,
     display: 'inline-block',
   },
+
+  '& pre > code': {
+    whiteSpace: 'pre-wrap',
+  },
 }));
 
 const Type = styled.div<{ hasDescription: boolean }>(({ theme, hasDescription }) => ({