[core] Remove usage of theme.spacing.unit

mui · Jun 30, 2018 · e248ef7 · e248ef7
1 parent c377e61
commit e248ef7
Show file tree

Hide file tree

Showing 44 changed files with 123 additions and 126 deletions.
diff --git a/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js b/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
@@ -83,11 +83,11 @@ const styles = theme => ({
     fontSize: 16,
     color: theme.palette.text.primary,
     '& .anchor-link': {
-      marginTop: -theme.spacing.unit * 12, // Offset for the anchor.
+      marginTop: -8 * 12, // Offset for the anchor.
       position: 'absolute',
     },
     '& pre, & pre[class*="language-"]': {
-      margin: `${theme.spacing.unit * 3}px 0`,
+      margin: `${8 * 3}px 0`,
       padding: '12px 18px',
       backgroundColor: theme.palette.background.paper,
       borderRadius: theme.shape.borderRadius,
@@ -110,26 +110,26 @@ const styles = theme => ({
     '& h1': {
       ...theme.typography.display2,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px`,
+      margin: `${8 * 4}px 0 ${8 * 2}px`,
     },
     '& .description': {
       ...theme.typography.headline,
-      margin: `0 0 ${theme.spacing.unit * 5}px`,
+      margin: `0 0 ${8 * 5}px`,
     },
     '& h2': {
       ...theme.typography.display1,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 3}px`,
+      margin: `${8 * 4}px 0 ${8 * 3}px`,
     },
     '& h3': {
       ...theme.typography.headline,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 3}px`,
+      margin: `${8 * 4}px 0 ${8 * 3}px`,
     },
     '& h4': {
       ...theme.typography.title,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 2}px`,
+      margin: `${8 * 3}px 0 ${8 * 2}px`,
     },
     '& p, & ul, & ol': {
       lineHeight: 1.6,
@@ -149,7 +149,7 @@ const styles = theme => ({
       '&:hover .anchor-link-style': {
         display: 'inline-block',
         opacity: 1,
-        padding: `0 ${theme.spacing.unit}px`,
+        padding: `0 8px`,
         color: theme.palette.text.hint,
         '&:hover': {
           color: theme.palette.text.secondary,
@@ -199,16 +199,14 @@ const styles = theme => ({
     },
     '& td': {
       borderBottom: `1px solid ${theme.palette.divider}`,
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px ${theme.spacing.unit}px ${
-        theme.spacing.unit
-      }px`,
+      padding: `8px ${8 * 2}px 8px 8px`,
       textAlign: 'left',
     },
     '& td:last-child': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 8 * 3,
     },
     '& td compact': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 8 * 3,
     },
     '& td code': {
       fontSize: 13,
@@ -218,11 +216,11 @@ const styles = theme => ({
       whiteSpace: 'pre',
       borderBottom: `1px solid ${theme.palette.divider}`,
       fontWeight: theme.typography.fontWeightMedium,
-      padding: `0 ${theme.spacing.unit * 2}px 0 ${theme.spacing.unit}px`,
+      padding: `0 ${8 * 2}px 0 8px`,
       textAlign: 'left',
     },
     '& th:last-child': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 8 * 3,
     },
     '& tr': {
       height: 48,
@@ -236,8 +234,8 @@ const styles = theme => ({
     '& blockquote': {
       borderLeft: `5px solid ${theme.palette.text.hint}`,
       backgroundColor: theme.palette.background.paper,
-      padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 3}px`,
-      margin: `${theme.spacing.unit * 3}px 0`,
+      padding: `${8 / 2}px ${8 * 3}px`,
+      margin: `${8 * 3}px 0`,
     },
     '& a, & a code': {
       // Style taken from the Link component

diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
@@ -19,7 +19,7 @@ const styles = theme => ({
   actions: {
     display: 'flex',
     flexDirection: 'column-reverse', // Display the first action at the bottom.
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: 8 * 2,
   },
   actionsClosed: {
     transition: 'top 0s linear 0.2s',

diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
@@ -10,7 +10,7 @@ const styles = theme => ({
     position: 'relative',
   },
   button: {
-    margin: theme.spacing.unit,
+    margin: 8,
     color: theme.palette.text.secondary,
     transition: `${theme.transitions.create('transform', {
       duration: theme.transitions.duration.shorter,

diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js
@@ -10,8 +10,8 @@ export const styles = theme => ({
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
-    width: theme.spacing.unit * 5,
-    height: theme.spacing.unit * 5,
+    width: 8 * 5,
+    height: 8 * 5,
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(20),
     borderRadius: '50%',

diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js
@@ -12,7 +12,7 @@ export const styles = theme => ({
     transition: theme.transitions.create(['color', 'padding-top'], {
       duration: theme.transitions.duration.short,
     }),
-    paddingTop: theme.spacing.unit,
+    paddingTop: 8,
     paddingBottom: 10,
     paddingLeft: 12,
     paddingRight: 12,
@@ -21,7 +21,7 @@ export const styles = theme => ({
     color: theme.palette.text.secondary,
     flex: '1',
     '&$iconOnly': {
-      paddingTop: theme.spacing.unit * 2,
+      paddingTop: 8 * 2,
     },
     '&$selected': {
       paddingTop: 6,

diff --git a/packages/material-ui/src/CardActions/CardActions.js b/packages/material-ui/src/CardActions/CardActions.js
@@ -10,13 +10,13 @@ export const styles = theme => ({
     display: 'flex',
     alignItems: 'center',
     boxSizing: 'border-box',
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
+    padding: `8px ${8 / 2}px`,
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+      padding: `8px ${8 * 1.5}px`,
     },
   },
   action: {
-    margin: `0 ${theme.spacing.unit / 2}px`,
+    margin: `0 ${8 / 2}px`,
   },
 });
 

diff --git a/packages/material-ui/src/CardContent/CardContent.js b/packages/material-ui/src/CardContent/CardContent.js
@@ -5,10 +5,10 @@ import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
   root: theme.mixins.gutters({
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
+    paddingTop: 8 * 2,
+    paddingBottom: 8 * 2,
     '&:last-child': {
-      paddingBottom: theme.spacing.unit * 3,
+      paddingBottom: 8 * 3,
     },
   }),
 });

diff --git a/packages/material-ui/src/CardHeader/CardHeader.js b/packages/material-ui/src/CardHeader/CardHeader.js
@@ -8,18 +8,18 @@ export const styles = theme => ({
   root: theme.mixins.gutters({
     display: 'flex',
     alignItems: 'center',
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
+    paddingTop: 8 * 2,
+    paddingBottom: 8 * 2,
   }),
   avatar: {
     flex: '0 0 auto',
-    marginRight: theme.spacing.unit * 2,
+    marginRight: 8 * 2,
   },
   action: {
     flex: '0 0 auto',
     alignSelf: 'flex-start',
-    marginTop: theme.spacing.unit * -1,
-    marginRight: theme.spacing.unit * -2,
+    marginTop: 8 * -1,
+    marginRight: 8 * -2,
   },
   content: {
     flex: '1 1 auto',

diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js
@@ -5,19 +5,19 @@ import withStyles from '../styles/withStyles';
 import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
     flex: '0 0 auto',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
+    margin: `8px ${8 / 2}px`,
   },
   action: {
-    margin: `0 ${theme.spacing.unit / 2}px`,
+    margin: `0 ${8 / 2}px`,
     minWidth: 64,
   },
-});
+};
 
 function DialogActions(props) {
   const { disableActionSpacing, children, classes, className, ...other } = props;

diff --git a/packages/material-ui/src/DialogContent/DialogContent.js b/packages/material-ui/src/DialogContent/DialogContent.js
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
 export const styles = theme => {
-  const spacing = theme.spacing.unit * 3;
+  const spacing = 8 * 3;
   return {
     root: {
       flex: '1 1 auto',

diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js
@@ -7,8 +7,8 @@ import Typography from '../Typography';
 export const styles = theme => ({
   root: {
     margin: 0,
-    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px \
-      20px ${theme.spacing.unit * 3}px`,
+    padding: `${8 * 3}px ${8 * 3}px \
+      20px ${8 * 3}px`,
     flex: '0 0 auto',
   },
 });

diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
@@ -19,7 +19,7 @@ export const styles = theme => ({
     width: '100%',
   },
   inset: {
-    marginLeft: theme.spacing.unit * 9,
+    marginLeft: 8 * 9,
   },
   light: {
     backgroundColor: fade(theme.palette.divider, 0.08),

diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
@@ -60,7 +60,7 @@ export const styles = theme => {
       },
     },
     expanded: {
-      margin: `${theme.spacing.unit * 2}px 0`,
+      margin: `${8 * 2}px 0`,
       '&:first-child': {
         marginTop: 0,
       },

diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
@@ -5,17 +5,17 @@ import withStyles from '../styles/withStyles';
 import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
-    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit}px`,
+    padding: `${8 * 2}px 8px`,
   },
   action: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: 8,
   },
-});
+};
 
 function ExpansionPanelActions(props) {
   const { children, classes, className, ...other } = props;

diff --git a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`,
+    padding: `8px ${8 * 3}px ${8 * 3}px`,
   },
-});
+};
 
 function ExpansionPanelDetails(props) {
   const { classes, children, className, ...other } = props;

diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
@@ -14,9 +14,9 @@ export const styles = theme => {
   return {
     root: {
       display: 'flex',
-      minHeight: theme.spacing.unit * 6,
+      minHeight: 8 * 6,
       transition: theme.transitions.create(['min-height', 'background-color'], transition),
-      padding: `0 ${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 3}px`,
+      padding: `0 ${8 * 3}px 0 ${8 * 3}px`,
       '&:hover:not($disabled)': {
         cursor: 'pointer',
       },
@@ -39,7 +39,7 @@ export const styles = theme => {
       transition: theme.transitions.create(['margin'], transition),
       margin: '12px 0',
       '& > :last-child': {
-        paddingRight: theme.spacing.unit * 4,
+        paddingRight: 8 * 4,
       },
       '&$expanded': {
         margin: '20px 0',
@@ -48,7 +48,7 @@ export const styles = theme => {
     expandIcon: {
       position: 'absolute',
       top: '50%',
-      right: theme.spacing.unit,
+      right: 8,
       transform: 'translateY(-50%) rotate(0deg)',
       transition: theme.transitions.create('transform', transition),
       '&:hover': {

diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js
@@ -18,12 +18,12 @@ export const styles = theme => ({
     border: 0,
   },
   marginNormal: {
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit,
+    marginTop: 8 * 2,
+    marginBottom: 8,
   },
   marginDense: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit / 2,
+    marginTop: 8,
+    marginBottom: 8 / 2,
   },
   fullWidth: {
     width: '100%',

diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
@@ -16,7 +16,7 @@ export const styles = theme => ({
     // Remove grey highlight
     WebkitTapHighlightColor: 'transparent',
     marginLeft: -14,
-    marginRight: theme.spacing.unit * 2, // used for row presentation of radio/checkbox
+    marginRight: 8 * 2, // used for row presentation of radio/checkbox
     '&$disabled': {
       cursor: 'default',
     },

diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js
@@ -9,7 +9,7 @@ export const styles = theme => ({
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(12),
     textAlign: 'left',
-    marginTop: theme.spacing.unit,
+    marginTop: 8,
     lineHeight: '1em',
     minHeight: '1em',
     margin: 0,
@@ -23,7 +23,7 @@ export const styles = theme => ({
   error: {},
   disabled: {},
   marginDense: {
-    marginTop: theme.spacing.unit / 2,
+    marginTop: 8 / 2,
   },
 });