diff --git a/examples/cra-kitchen-sink/src/components/Container.js b/examples/cra-kitchen-sink/src/components/Container.js
index efd894da18a1..af3f53831359 100644
--- a/examples/cra-kitchen-sink/src/components/Container.js
+++ b/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:
+ *
+ * ```
+ *
Node 1
+ * Node 2
+ * ```
+ */
children: PropTypes.node.isRequired,
/** Show exclamation marks */
isAmazing: PropTypes.bool,
diff --git a/examples/cra-kitchen-sink/src/stories/test.stories.mdx b/examples/cra-kitchen-sink/src/stories/test.stories.mdx
index 14ec31fe6159..cfc8715570a6 100644
--- a/examples/cra-kitchen-sink/src/stories/test.stories.mdx
+++ b/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'
-
+
- Hello
+
+ Hello
+
+
+## Arguments
+
+
diff --git a/examples/cra-ts-kitchen-sink/src/components/Button.tsx b/examples/cra-ts-kitchen-sink/src/components/Button.tsx
index 0d3f77ead09b..a50f0cb33b48 100644
--- a/examples/cra-ts-kitchen-sink/src/components/Button.tsx
+++ b/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;
diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
index fdf95425cfdf..e62aef714004 100644
--- a/lib/components/src/blocks/ArgsTable/ArgRow.tsx
+++ b/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 }) => ({