[docs] Fix escape "|" char (#12254)

* docs fix: escape "|" char * escape cell in docs via a util function * new escape logic
mui · Jul 24, 2018 · c392dbe · c392dbe
1 parent 4f55f78
commit c392dbe
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js
@@ -38,7 +38,7 @@ function getDeprecatedInfo(type) {
 
 function escapeCell(value) {
   // As the pipe is use for the table structure
-  return value.replace(/</g, '&lt;').replace(/\|/g, '&#124;');
+  return value.replace(/</g, '&lt;').replace(/\|/g, '\\|');
 }
 
 function generatePropDescription(description, type) {
@@ -248,7 +248,9 @@ function generateClasses(reactAPI) {
       .map(
         className =>
           `| <span class="prop-name">${className}</span> | ${
-            reactAPI.styles.descriptions[className] ? reactAPI.styles.descriptions[className] : ''
+            reactAPI.styles.descriptions[className]
+              ? escapeCell(reactAPI.styles.descriptions[className])
+              : ''
           }`,
       )
       .join('\n');

diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
@@ -106,7 +106,7 @@ export const styles = theme => ({
       },
     },
   },
-  /* Styles applied to the root element if `variant="[contained | fab|"` and `color="primary"`. */
+  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="primary"`. */
   containedPrimary: {
     color: theme.palette.primary.contrastText,
     backgroundColor: theme.palette.primary.main,

diff --git a/pages/api/button.md b/pages/api/button.md
@@ -47,18 +47,18 @@ This property accepts the following keys:
 | <span class="prop-name">flatPrimary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">flatSecondary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">outlined</span> | Styles applied to the root element if `variant="outlined"`.
-| <span class="prop-name">contained</span> | Styles applied to the root element if `variant="[contained | fab]"`.
-| <span class="prop-name">containedPrimary</span> | Styles applied to the root element if `variant="[contained | fab|"` and `color="primary"`.
-| <span class="prop-name">containedSecondary</span> | Styles applied to the root element if `variant="[contained | fab]"` and `color="secondary"`.
+| <span class="prop-name">contained</span> | Styles applied to the root element if `variant="[contained \| fab]"`.
+| <span class="prop-name">containedPrimary</span> | Styles applied to the root element if `variant="[contained \| fab]"` and `color="primary"`.
+| <span class="prop-name">containedSecondary</span> | Styles applied to the root element if `variant="[contained \| fab]"` and `color="secondary"`.
 | <span class="prop-name">raised</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">raisedPrimary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">raisedSecondary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
-| <span class="prop-name">fab</span> | Styles applied to the root element if `variant="[fab | extendedFab]"`.
+| <span class="prop-name">fab</span> | Styles applied to the root element if `variant="[fab \| extendedFab]"`.
 | <span class="prop-name">extendedFab</span> | Styles applied to the root element if `variant="extendedFab"`.
 | <span class="prop-name">focusVisible</span> | Styles applied to the ButtonBase root element if the button is keyboard focused.
 | <span class="prop-name">disabled</span> | Styles applied to the root element if `disabled={true}`.
 | <span class="prop-name">colorInherit</span> | Styles applied to the root element if `color="inherit"`.
-| <span class="prop-name">mini</span> | Styles applied to the root element if `size="mini"` & `variant="[fab | extendedFab]"`.
+| <span class="prop-name">mini</span> | Styles applied to the root element if `size="mini"` & `variant="[fab \| extendedFab]"`.
 | <span class="prop-name">sizeSmall</span> | Styles applied to the root element if `size="small"`.
 | <span class="prop-name">sizeLarge</span> | Styles applied to the root element if `size="large"`.
 | <span class="prop-name">fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.

diff --git a/pages/api/swipeable-drawer.md b/pages/api/swipeable-drawer.md
@@ -17,7 +17,7 @@ title: SwipeableDrawer API
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">disableBackdropTransition</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Disable the backdrop transition. This can improve the FPS on low-end devices. |
 | <span class="prop-name">disableDiscovery</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture. |
-| <span class="prop-name">disableSwipeToOpen</span> | <span class="prop-type">bool | <span class="prop-default">typeof navigator !== 'undefined' && /iPad&#124;iPhone&#124;iPod/.test(navigator.userAgent)</span> | If `true`, swipe to open is disabled. This is useful in browsers where swiping triggers navigation actions. Swipe to open is disabled on iOS browsers by default. |
+| <span class="prop-name">disableSwipeToOpen</span> | <span class="prop-type">bool | <span class="prop-default">typeof navigator !== 'undefined' && /iPad\|iPhone\|iPod/.test(navigator.userAgent)</span> | If `true`, swipe to open is disabled. This is useful in browsers where swiping triggers navigation actions. Swipe to open is disabled on iOS browsers by default. |
 | <span class="prop-name required">onClose *</span> | <span class="prop-type">func |   | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | <span class="prop-name required">onOpen *</span> | <span class="prop-type">func |   | Callback fired when the component requests to be opened.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | <span class="prop-name required">open *</span> | <span class="prop-type">bool |   | If `true`, the drawer is open. |