[docs] Fix typo and improve consistency (#17821)

docs/pages/api/button-group.md

@@ -47,18 +47,18 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">MuiButtonGroup-root</span> | Styles applied to the root element.
-| <span class="prop-name">contained</span> | <span class="prop-name">MuiButtonGroup-contained</span> | Styles applied to the root element if variant="contained".
-| <span class="prop-name">fullWidth</span> | <span class="prop-name">MuiButtonGroup-fullWidth</span> | Styles applied to the root element if fullWidth={true}.
+| <span class="prop-name">contained</span> | <span class="prop-name">MuiButtonGroup-contained</span> | Styles applied to the root element if `variant="contained"`.
+| <span class="prop-name">fullWidth</span> | <span class="prop-name">MuiButtonGroup-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
 | <span class="prop-name">grouped</span> | <span class="prop-name">MuiButtonGroup-grouped</span> | Styles applied to the children.
-| <span class="prop-name">groupedText</span> | <span class="prop-name">MuiButtonGroup-groupedText</span> | Styles applied to the children if variant="text".
-| <span class="prop-name">groupedTextPrimary</span> | <span class="prop-name">MuiButtonGroup-groupedTextPrimary</span> | Styles applied to the children if variant="outlined" & color="primary".
-| <span class="prop-name">groupedTextSecondary</span> | <span class="prop-name">MuiButtonGroup-groupedTextSecondary</span> | Styles applied to the children if variant="outlined" & color="secondary".
-| <span class="prop-name">groupedOutlined</span> | <span class="prop-name">MuiButtonGroup-groupedOutlined</span> | Styles applied to the children if variant="outlined".
-| <span class="prop-name">groupedOutlinedPrimary</span> | <span class="prop-name">MuiButtonGroup-groupedOutlinedPrimary</span> | Styles applied to the children if variant="outlined" & color="primary".
-| <span class="prop-name">groupedOutlinedSecondary</span> | <span class="prop-name">MuiButtonGroup-groupedOutlinedSecondary</span> | Styles applied to the children if variant="outlined" & color="secondary".
-| <span class="prop-name">groupedContained</span> | <span class="prop-name">MuiButtonGroup-groupedContained</span> | Styles applied to the children if variant="contained".
-| <span class="prop-name">groupedContainedPrimary</span> | <span class="prop-name">MuiButtonGroup-groupedContainedPrimary</span> | Styles applied to the children if variant="contained" & color="primary".
-| <span class="prop-name">groupedContainedSecondary</span> | <span class="prop-name">MuiButtonGroup-groupedContainedSecondary</span> | Styles applied to the children if variant="contained" & color="secondary".
+| <span class="prop-name">groupedText</span> | <span class="prop-name">MuiButtonGroup-groupedText</span> | Styles applied to the children if `variant="text"`.
+| <span class="prop-name">groupedTextPrimary</span> | <span class="prop-name">MuiButtonGroup-groupedTextPrimary</span> | Styles applied to the children if `variant="text"` and `color="primary"`.
+| <span class="prop-name">groupedTextSecondary</span> | <span class="prop-name">MuiButtonGroup-groupedTextSecondary</span> | Styles applied to the children if `variant="text"` and `color="secondary"`.
+| <span class="prop-name">groupedOutlined</span> | <span class="prop-name">MuiButtonGroup-groupedOutlined</span> | Styles applied to the children if `variant="outlined"`.
+| <span class="prop-name">groupedOutlinedPrimary</span> | <span class="prop-name">MuiButtonGroup-groupedOutlinedPrimary</span> | Styles applied to the children if `variant="outlined"` and `color="primary"`.
+| <span class="prop-name">groupedOutlinedSecondary</span> | <span class="prop-name">MuiButtonGroup-groupedOutlinedSecondary</span> | Styles applied to the children if `variant="outlined"` and `color="secondary"`.
+| <span class="prop-name">groupedContained</span> | <span class="prop-name">MuiButtonGroup-groupedContained</span> | Styles applied to the children if `variant="contained"`.
+| <span class="prop-name">groupedContainedPrimary</span> | <span class="prop-name">MuiButtonGroup-groupedContainedPrimary</span> | Styles applied to the children if `variant="contained"` and `color="primary"`.
+| <span class="prop-name">groupedContainedSecondary</span> | <span class="prop-name">MuiButtonGroup-groupedContainedSecondary</span> | Styles applied to the children if `variant="contained"` and `color="secondary"`.
 | <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to child elements if `disabled={true}`.
 
 You can override the style of the component thanks to one of these customization points:

docs/pages/api/button.md

@@ -66,9 +66,9 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 | <span class="prop-name">textSizeSmall</span> | <span class="prop-name">MuiButton-textSizeSmall</span> | Styles applied to the root element if `size="small"` and `variant="text"`.
 | <span class="prop-name">textSizeLarge</span> | <span class="prop-name">MuiButton-textSizeLarge</span> | Styles applied to the root element if `size="large"` and `variant="text"`.
 | <span class="prop-name">outlinedSizeSmall</span> | <span class="prop-name">MuiButton-outlinedSizeSmall</span> | Styles applied to the root element if `size="small"` and `variant="outlined"`.
-| <span class="prop-name">outlinedSizeLarge</span> | <span class="prop-name">MuiButton-outlinedSizeLarge</span> | Styles applied to the root element if `size="large" && variant="outlined"`.
-| <span class="prop-name">containedSizeSmall</span> | <span class="prop-name">MuiButton-containedSizeSmall</span> | Styles applied to the root element if `size="small" && variant="contained"`.
-| <span class="prop-name">containedSizeLarge</span> | <span class="prop-name">MuiButton-containedSizeLarge</span> | Styles applied to the root element if `size="large" && && variant="contained"`.
+| <span class="prop-name">outlinedSizeLarge</span> | <span class="prop-name">MuiButton-outlinedSizeLarge</span> | Styles applied to the root element if `size="large"` and `variant="outlined"`.
+| <span class="prop-name">containedSizeSmall</span> | <span class="prop-name">MuiButton-containedSizeSmall</span> | Styles applied to the root element if `size="small"` and `variant="contained"`.
+| <span class="prop-name">containedSizeLarge</span> | <span class="prop-name">MuiButton-containedSizeLarge</span> | Styles applied to the root element if `size="large"` and `variant="contained"`.
 | <span class="prop-name">sizeSmall</span> | <span class="prop-name">MuiButton-sizeSmall</span> | Styles applied to the root element if `size="small"`.
 | <span class="prop-name">sizeLarge</span> | <span class="prop-name">MuiButton-sizeLarge</span> | Styles applied to the root element if `size="large"`.
 | <span class="prop-name">fullWidth</span> | <span class="prop-name">MuiButton-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.

docs/pages/api/drawer.md

@@ -55,10 +55,10 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">paperAnchorRight</span> | <span class="prop-name">MuiDrawer-paperAnchorRight</span> | Styles applied to the `Paper` component if `anchor="right"`.
 | <span class="prop-name">paperAnchorTop</span> | <span class="prop-name">MuiDrawer-paperAnchorTop</span> | Styles applied to the `Paper` component if `anchor="top"`.
 | <span class="prop-name">paperAnchorBottom</span> | <span class="prop-name">MuiDrawer-paperAnchorBottom</span> | Styles applied to the `Paper` component if `anchor="bottom"`.
-| <span class="prop-name">paperAnchorDockedLeft</span> | <span class="prop-name">MuiDrawer-paperAnchorDockedLeft</span> | Styles applied to the `Paper` component if `anchor="left"` & `variant` is not "temporary".
-| <span class="prop-name">paperAnchorDockedTop</span> | <span class="prop-name">MuiDrawer-paperAnchorDockedTop</span> | Styles applied to the `Paper` component if `anchor="top"` & `variant` is not "temporary".
-| <span class="prop-name">paperAnchorDockedRight</span> | <span class="prop-name">MuiDrawer-paperAnchorDockedRight</span> | Styles applied to the `Paper` component if `anchor="right"` & `variant` is not "temporary".
-| <span class="prop-name">paperAnchorDockedBottom</span> | <span class="prop-name">MuiDrawer-paperAnchorDockedBottom</span> | Styles applied to the `Paper` component if `anchor="bottom"` & `variant` is not "temporary".
+| <span class="prop-name">paperAnchorDockedLeft</span> | <span class="prop-name">MuiDrawer-paperAnchorDockedLeft</span> | Styles applied to the `Paper` component if `anchor="left"` and `variant` is not "temporary".
+| <span class="prop-name">paperAnchorDockedTop</span> | <span class="prop-name">MuiDrawer-paperAnchorDockedTop</span> | Styles applied to the `Paper` component if `anchor="top"` and `variant` is not "temporary".
+| <span class="prop-name">paperAnchorDockedRight</span> | <span class="prop-name">MuiDrawer-paperAnchorDockedRight</span> | Styles applied to the `Paper` component if `anchor="right"` and `variant` is not "temporary".
+| <span class="prop-name">paperAnchorDockedBottom</span> | <span class="prop-name">MuiDrawer-paperAnchorDockedBottom</span> | Styles applied to the `Paper` component if `anchor="bottom"` and `variant` is not "temporary".
 | <span class="prop-name">modal</span> | <span class="prop-name">MuiDrawer-modal</span> | Styles applied to the `Modal` component.
 
 You can override the style of the component thanks to one of these customization points:

docs/pages/api/linear-progress.md

@@ -46,16 +46,16 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">MuiLinearProgress-root</span> | Styles applied to the root element.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiLinearProgress-colorPrimary</span> | Styles applied to the root & bar2 element if `color="primary"`; bar2 if `variant-"buffer"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiLinearProgress-colorSecondary</span> | Styles applied to the root & bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiLinearProgress-colorPrimary</span> | Styles applied to the root and bar2 element if `color="primary"`; bar2 if `variant-"buffer"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiLinearProgress-colorSecondary</span> | Styles applied to the root and bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`.
 | <span class="prop-name">determinate</span> | <span class="prop-name">MuiLinearProgress-determinate</span> | Styles applied to the root element if `variant="determinate"`.
 | <span class="prop-name">indeterminate</span> | <span class="prop-name">MuiLinearProgress-indeterminate</span> | Styles applied to the root element if `variant="indeterminate"`.
 | <span class="prop-name">buffer</span> | <span class="prop-name">MuiLinearProgress-buffer</span> | Styles applied to the root element if `variant="buffer"`.
 | <span class="prop-name">query</span> | <span class="prop-name">MuiLinearProgress-query</span> | Styles applied to the root element if `variant="query"`.
 | <span class="prop-name">dashed</span> | <span class="prop-name">MuiLinearProgress-dashed</span> | Styles applied to the additional bar element if `variant="buffer"`.
-| <span class="prop-name">dashedColorPrimary</span> | <span class="prop-name">MuiLinearProgress-dashedColorPrimary</span> | Styles applied to the additional bar element if `variant="buffer"` & `color="primary"`.
-| <span class="prop-name">dashedColorSecondary</span> | <span class="prop-name">MuiLinearProgress-dashedColorSecondary</span> | Styles applied to the additional bar element if `variant="buffer"` & `color="secondary"`.
-| <span class="prop-name">bar</span> | <span class="prop-name">MuiLinearProgress-bar</span> | Styles applied to the layered bar1 & bar2 elements.
+| <span class="prop-name">dashedColorPrimary</span> | <span class="prop-name">MuiLinearProgress-dashedColorPrimary</span> | Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`.
+| <span class="prop-name">dashedColorSecondary</span> | <span class="prop-name">MuiLinearProgress-dashedColorSecondary</span> | Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`.
+| <span class="prop-name">bar</span> | <span class="prop-name">MuiLinearProgress-bar</span> | Styles applied to the layered bar1 and bar2 elements.
 | <span class="prop-name">barColorPrimary</span> | <span class="prop-name">MuiLinearProgress-barColorPrimary</span> | Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer".
 | <span class="prop-name">barColorSecondary</span> | <span class="prop-name">MuiLinearProgress-barColorSecondary</span> | Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer".
 | <span class="prop-name">bar1Indeterminate</span> | <span class="prop-name">MuiLinearProgress-bar1Indeterminate</span> | Styles applied to the bar1 element if `variant="indeterminate or query"`.

docs/pages/api/speed-dial-icon.md

@@ -42,9 +42,9 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">root</span> | <span class="prop-name">MuiSpeedDialIcon-root</span> | Styles applied to the root element.
 | <span class="prop-name">icon</span> | <span class="prop-name">MuiSpeedDialIcon-icon</span> | Styles applied to the icon component.
 | <span class="prop-name">iconOpen</span> | <span class="prop-name">MuiSpeedDialIcon-iconOpen</span> | Styles applied to the icon component if `open={true}`.
-| <span class="prop-name">iconWithOpenIconOpen</span> | <span class="prop-name">MuiSpeedDialIcon-iconWithOpenIconOpen</span> | Styles applied to the icon when and `openIcon` is provided & if `open={true}`.
+| <span class="prop-name">iconWithOpenIconOpen</span> | <span class="prop-name">MuiSpeedDialIcon-iconWithOpenIconOpen</span> | Styles applied to the icon when and `openIcon` is provided and if `open={true}`.
 | <span class="prop-name">openIcon</span> | <span class="prop-name">MuiSpeedDialIcon-openIcon</span> | Styles applied to the `openIcon` if provided.
-| <span class="prop-name">openIconOpen</span> | <span class="prop-name">MuiSpeedDialIcon-openIconOpen</span> | Styles applied to the `openIcon` if provided & if `open={true}`.
+| <span class="prop-name">openIconOpen</span> | <span class="prop-name">MuiSpeedDialIcon-openIconOpen</span> | Styles applied to the `openIcon` if provided and if `open={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 

docs/pages/api/step-label.md

@@ -53,7 +53,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">error</span> | <span class="prop-name">Mui-error</span> | Pseudo-class applied to the root element and `Typography` component if `error={true}`.
 | <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element and `Typography` component if `disabled={true}`.
 | <span class="prop-name">iconContainer</span> | <span class="prop-name">MuiStepLabel-iconContainer</span> | Styles applied to the `icon` container element.
-| <span class="prop-name">alternativeLabel</span> | <span class="prop-name">MuiStepLabel-alternativeLabel</span> | Pseudo-class applied to the root & icon container and `Typography` if `alternativeLabel={true}`.
+| <span class="prop-name">alternativeLabel</span> | <span class="prop-name">MuiStepLabel-alternativeLabel</span> | Pseudo-class applied to the root and icon container and `Typography` if `alternativeLabel={true}`.
 | <span class="prop-name">labelContainer</span> | <span class="prop-name">MuiStepLabel-labelContainer</span> | Styles applied to the container element which wraps `Typography` and `optional`.
 
 You can override the style of the component thanks to one of these customization points:

packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js

@@ -19,7 +19,7 @@ export const styles = theme => ({
   iconOpen: {
     transform: 'rotate(45deg)',
   },
-  /* Styles applied to the icon when and `openIcon` is provided & if `open={true}`. */
+  /* Styles applied to the icon when and `openIcon` is provided and if `open={true}`. */
   iconWithOpenIconOpen: {
     opacity: 0,
   },
@@ -32,7 +32,7 @@ export const styles = theme => ({
     opacity: 0,
     transform: 'rotate(-45deg)',
   },
-  /* Styles applied to the `openIcon` if provided & if `open={true}`. */
+  /* Styles applied to the `openIcon` if provided and if `open={true}`. */
   openIconOpen: {
     transform: 'rotate(0deg)',
     opacity: 1,

packages/material-ui/src/Button/Button.js

@@ -182,17 +182,17 @@ export const styles = theme => ({
     padding: '3px 9px',
     fontSize: theme.typography.pxToRem(13),
   },
-  /* Styles applied to the root element if `size="large" && variant="outlined"`. */
+  /* Styles applied to the root element if `size="large"` and `variant="outlined"`. */
   outlinedSizeLarge: {
     padding: '7px 21px',
     fontSize: theme.typography.pxToRem(15),
   },
-  /* Styles applied to the root element if `size="small" && variant="contained"`. */
+  /* Styles applied to the root element if `size="small"` and `variant="contained"`. */
   containedSizeSmall: {
     padding: '4px 10px',
     fontSize: theme.typography.pxToRem(13),
   },
-  /* Styles applied to the root element if `size="large" && && variant="contained"`. */
+  /* Styles applied to the root element if `size="large"` and `variant="contained"`. */
   containedSizeLarge: {
     padding: '8px 22px',
     fontSize: theme.typography.pxToRem(15),