[docs] Use non-breaking space

.size-limit

@@ -13,7 +13,7 @@
     "name": "The main bundle of the documentation",
     "webpack": false,
     "path": ".next/app.js",
-    "limit": "175.4 KB"
+    "limit": "175.5 KB"
   },
   {
     "name": "The home page of the documentation",

docs/src/modules/components/MarkdownElement.js

@@ -5,6 +5,17 @@ import marked from 'marked';
 import { withStyles } from 'material-ui/styles';
 import prism from 'docs/src/modules/utils/prism';
 
+// monkey patch to preserve non-breaking spaces
+// https://github.com/chjj/marked/blob/6b0416d10910702f73da9cb6bb3d4c8dcb7dead7/lib/marked.js#L142-L150
+marked.Lexer.prototype.lex = function lex(src) {
+  src = src
+    .replace(/\r\n|\r/g, '\n')
+    .replace(/\t/g, '    ')
+    .replace(/\u2424/g, '\n');
+
+  return this.token(src, true);
+};
+
 const renderer = new marked.Renderer();
 
 renderer.heading = (text, level) => {

docs/src/modules/utils/generateMarkdown.js

@@ -174,7 +174,7 @@ function generateProps(reactAPI) {
     }
 
     if (prop.required) {
-      propRaw = `<span style="color: #31a148">${propRaw}\u2009*</span>`;
+      propRaw = `<span style="color: #31a148">${propRaw}\u00a0*</span>`;
     }
 
     if (prop.type.name === 'custom') {

pages/api/app-bar.md

@@ -12,7 +12,7 @@ filename: /src/AppBar/AppBar.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
+| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
 | classes | object |  | Useful to extend the style applied to components. |
 | color | enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'default'<br> | 'primary' | The color of the component. It supports those theme colors that make sense for this component. |
 | position | enum:&nbsp;'fixed'&nbsp;&#124;<br>&nbsp;'absolute'&nbsp;&#124;<br>&nbsp;'sticky'&nbsp;&#124;<br>&nbsp;'static'<br> | 'fixed' | The positioning type. The behavior of the different options is described [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). Note: `sticky` is not universally supported and will fall back to `static` when unavailable. |

pages/api/backdrop.md

@@ -14,7 +14,7 @@ filename: /src/Modal/Backdrop.js
 |:-----|:-----|:--------|:------------|
 | classes | object |  | Useful to extend the style applied to components. |
 | invisible | bool | false | If `true`, the backdrop is invisible. It can be used when rendering a popover or a custom select component. |
-| <span style="color: #31a148">open *</span> | bool |  | If `true`, the backdrop is open. |
+| <span style="color: #31a148">open *</span> | bool |  | If `true`, the backdrop is open. |
 | transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> |  | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).

pages/api/badge.md

@@ -12,8 +12,8 @@ filename: /src/Badge/Badge.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">badgeContent *</span> | node |  | The content rendered within the badge. |
-| <span style="color: #31a148">children *</span> | node |  | The badge will be added relative to this node. |
+| <span style="color: #31a148">badgeContent *</span> | node |  | The content rendered within the badge. |
+| <span style="color: #31a148">children *</span> | node |  | The badge will be added relative to this node. |
 | classes | object |  | Useful to extend the style applied to components. |
 | color | enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'error'<br> | 'default' | The color of the component. It supports those theme colors that make sense for this component. |
 | component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'span' | The component used for the root node. Either a string to use a DOM element or a component. |

pages/api/bottom-navigation.md

@@ -12,7 +12,7 @@ filename: /src/BottomNavigation/BottomNavigation.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
+| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
 | classes | object |  | Useful to extend the style applied to components. |
 | onChange | func |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child |
 | showLabels | bool | false | If `true`, all `BottomNavigationAction`s will show their labels. By default, only the selected `BottomNavigationAction` will show its label. |

pages/api/button.md

@@ -12,7 +12,7 @@ filename: /src/Button/Button.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the button. |
+| <span style="color: #31a148">children *</span> | node |  | The content of the button. |
 | classes | object |  | Useful to extend the style applied to components. |
 | color | enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | 'default' | The color of the component. It supports those theme colors that make sense for this component. |
 | component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |

pages/api/click-away-listener.md

@@ -12,8 +12,8 @@ Listen for click events that are triggered outside of the component children.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  |  |
-| <span style="color: #31a148">onClickAway *</span> | func |  |  |
+| <span style="color: #31a148">children *</span> | node |  |  |
+| <span style="color: #31a148">onClickAway *</span> | func |  |  |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/dialog-title.md

@@ -12,7 +12,7 @@ filename: /src/Dialog/DialogTitle.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
+| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
 | classes | object |  | Useful to extend the style applied to components. |
 | disableTypography | bool | false | If `true`, the children won't be wrapped by a typography component. For instance, this can be useful to render an h4 instead of the default h2. |
 

pages/api/dialog.md

@@ -12,7 +12,7 @@ Dialogs are overlaid modal paper based components with a backdrop.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | Dialog children, usually the included sub-components. |
+| <span style="color: #31a148">children *</span> | node |  | Dialog children, usually the included sub-components. |
 | classes | object |  | Useful to extend the style applied to components. |
 | disableBackdropClick | bool | false | If `true`, clicking the backdrop will not fire the `onClose` callback. |
 | disableEscapeKeyDown | bool | false | If `true`, hitting escape will not fire the `onClose` callback. |
@@ -28,7 +28,7 @@ Dialogs are overlaid modal paper based components with a backdrop.
 | onExit | func |  | Callback fired before the dialog exits. |
 | onExited | func |  | Callback fired when the dialog has exited. |
 | onExiting | func |  | Callback fired when the dialog is exiting. |
-| <span style="color: #31a148">open *</span> | bool |  | If `true`, the Dialog is open. |
+| <span style="color: #31a148">open *</span> | bool |  | If `true`, the Dialog is open. |
 | PaperProps | object |  | Properties applied to the `Paper` element. |
 | transition | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | Fade | Transition component. |
 | transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |

pages/api/expansion-panel-actions.md

@@ -12,7 +12,7 @@ filename: /src/ExpansionPanel/ExpansionPanelActions.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
+| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
 | classes | object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).

pages/api/expansion-panel-details.md

@@ -12,7 +12,7 @@ filename: /src/ExpansionPanel/ExpansionPanelDetails.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the expansion panel details. |
+| <span style="color: #31a148">children *</span> | node |  | The content of the expansion panel details. |
 | classes | object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).

pages/api/expansion-panel.md

@@ -12,7 +12,7 @@ filename: /src/ExpansionPanel/ExpansionPanel.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the expansion panel. |
+| <span style="color: #31a148">children *</span> | node |  | The content of the expansion panel. |
 | classes | object |  | Useful to extend the style applied to components. |
 | CollapseProps | object |  | Properties applied to the `Collapse` element. |
 | defaultExpanded | bool | false | If `true`, expands the panel by default. |

pages/api/grid-list.md

@@ -13,7 +13,7 @@ filename: /src/GridList/GridList.js
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | cellHeight | union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | 180 | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. |
-| <span style="color: #31a148">children *</span> | node |  | Grid Tiles that will be in Grid List. |
+| <span style="color: #31a148">children *</span> | node |  | Grid Tiles that will be in Grid List. |
 | classes | object |  | Useful to extend the style applied to components. |
 | cols | number | 2 | Number of columns. |
 | component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'ul' | The component used for the root node. Either a string to use a DOM element or a component. |

pages/api/input-adornment.md

@@ -12,7 +12,7 @@ filename: /src/Input/InputAdornment.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component, normally an `IconButton` or string. |
+| <span style="color: #31a148">children *</span> | node |  | The content of the component, normally an `IconButton` or string. |
 | classes | object |  | Useful to extend the style applied to components. |
 | component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
 | disableTypography | bool | false | If children is a string then disable wrapping in a Typography component. |

pages/api/list-item-avatar.md

@@ -12,7 +12,7 @@ It's a simple wrapper to apply the `dense` mode styles to `Avatar`.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | element |  | The content of the component, normally `Avatar`. |
+| <span style="color: #31a148">children *</span> | element |  | The content of the component, normally `Avatar`. |
 | classes | object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).

pages/api/list-item-icon.md

@@ -12,7 +12,7 @@ A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | element |  | The content of the component, normally `Icon`, `SvgIcon`, or a `material-ui-icons` SVG icon component. |
+| <span style="color: #31a148">children *</span> | element |  | The content of the component, normally `Icon`, `SvgIcon`, or a `material-ui-icons` SVG icon component. |
 | classes | object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).

pages/api/menu.md

@@ -23,7 +23,7 @@ filename: /src/Menu/Menu.js
 | onExit | func |  | Callback fired before the Menu exits. |
 | onExited | func |  | Callback fired when the Menu has exited. |
 | onExiting | func |  | Callback fired when the Menu is exiting. |
-| <span style="color: #31a148">open *</span> | bool |  | If `true`, the menu is visible. |
+| <span style="color: #31a148">open *</span> | bool |  | If `true`, the menu is visible. |
 | PopoverClasses | object |  | `classes` property applied to the `Popover` element. |
 | transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | 'auto' | The length of the transition in `ms`, or 'auto' |
 

pages/api/mobile-stepper.md

@@ -17,7 +17,7 @@ filename: /src/MobileStepper/MobileStepper.js
 | classes | object |  | Useful to extend the style applied to components. |
 | nextButton | node |  | A next button element. For instance, it can be be a `Button` or a `IconButton`. |
 | position | enum:&nbsp;'bottom'&nbsp;&#124;<br>&nbsp;'top'&nbsp;&#124;<br>&nbsp;'static'<br> | 'bottom' | Set the positioning type. |
-| <span style="color: #31a148">steps *</span> | number |  | The total steps. |
+| <span style="color: #31a148">steps *</span> | number |  | The total steps. |
 | variant | enum:&nbsp;'text'&nbsp;&#124;<br>&nbsp;'dots'&nbsp;&#124;<br>&nbsp;'progress'<br> | 'dots' | The type of mobile stepper to use. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).

pages/api/modal.md

@@ -29,7 +29,7 @@ filename: /src/Modal/Modal.js
 | onClose | func |  | Callback fired when the component requests to be closed. The `reason` parameter can optionally be used to control the response to `onClose`.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback<br>*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"` |
 | onEscapeKeyDown | func |  | Callback fired when the escape key is pressed, `disableEscapeKeyDown` is false and the modal is in focus. |
 | onRendered | func |  | Callback fired once the children has been mounted into the `container`. It signals that the `open={true}` property took effect. |
-| <span style="color: #31a148">open *</span> | bool |  | If `true`, the modal is open. |
+| <span style="color: #31a148">open *</span> | bool |  | If `true`, the modal is open. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/mui-theme-provider.md

@@ -14,10 +14,10 @@ This component should preferably be used at **the root of your component tree**.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | You can only provide a single element with react@15, a node with react@16. |
+| <span style="color: #31a148">children *</span> | node |  | You can only provide a single element with react@15, a node with react@16. |
 | disableStylesGeneration | bool |  | You can disable the generation of the styles with this option. It can be useful when traversing the React tree outside of the HTML rendering step on the server. Let's say you are using react-apollo to extract all the queries made by the interface server side. You can significantly speed up the traversal with this property. |
 | sheetsManager | object |  | The sheetsManager is used to deduplicate style sheet injection in the page. It's deduplicating using the (theme, styles) couple. On the server, you should provide a new instance for each request. |
-| <span style="color: #31a148">theme *</span> | union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A theme object. |
+| <span style="color: #31a148">theme *</span> | union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A theme object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/popover.md

@@ -30,7 +30,7 @@ filename: /src/Popover/Popover.js
 | onExit | func |  | Callback fired before the component is exiting. |
 | onExited | func |  | Callback fired when the component has exited. |
 | onExiting | func |  | Callback fired when the component is exiting. |
-| <span style="color: #31a148">open *</span> | bool |  | If `true`, the popover is visible. |
+| <span style="color: #31a148">open *</span> | bool |  | If `true`, the popover is visible. |
 | PaperProps | object |  | Properties applied to the `Paper` element. |
 | transformOrigin | {horizontal?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br>} | {  vertical: 'top',  horizontal: 'left',} | This is the point on the popover which will attach to the anchor's origin.<br>Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |
 | transition | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | Grow | Transition component. |

pages/api/portal.md

@@ -15,7 +15,7 @@ and take the control of our destiny.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The children to render into the `container`. |
+| <span style="color: #31a148">children *</span> | node |  | The children to render into the `container`. |
 | container | union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A node, component instance, or function that returns either. The `container` will have the portal children appended to it. By default, it's using the body of the top-level document object, so it's simply `document.body` most of the time. |
 | onRendered | func |  | Callback fired once the children has been mounted into the `container`. |
 

pages/api/step-icon.md

@@ -15,7 +15,7 @@ filename: /src/Stepper/StepIcon.js
 | active | bool | false | Whether this step is active. |
 | classes | object |  | Classses for component style customizations. |
 | completed | bool | false | Mark the step as completed. Is passed to child components. |
-| <span style="color: #31a148">icon *</span> | node |  | The icon displayed by the step label. |
+| <span style="color: #31a148">icon *</span> | node |  | The icon displayed by the step label. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/stepper.md

@@ -14,7 +14,7 @@ filename: /src/Stepper/Stepper.js
 |:-----|:-----|:--------|:------------|
 | activeStep | number | 0 | Set the active step (zero based index). |
 | alternativeLabel | bool | false | If set to 'true' and orientation is horizontal, then the step label will be positioned under the icon. |
-| <span style="color: #31a148">children *</span> | node |  | Two or more `&lt;Step />` components. |
+| <span style="color: #31a148">children *</span> | node |  | Two or more `&lt;Step />` components. |
 | classes | object |  | Useful to extend the style applied to components. |
 | connector | element | &lt;StepConnector /> | A component to be placed between each step. |
 | nonLinear | bool | false | If set the `Stepper` will not assist in controlling steps for linear flow. |