[core] Remove usage of theme.spacing.unit (#12022)

mui · Jul 1, 2018 · c92d9f2 · c92d9f2
1 parent c377e61
commit c92d9f2
Show file tree

Hide file tree

Showing 46 changed files with 150 additions and 157 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -27,7 +27,7 @@ module.exports = [
  name: 'The size of all the modules of material-ui.',
  webpack: true,
  path: 'packages/material-ui/build/index.js',
- limit: '94.9 KB',
+ limit: '94.6 KB',
  },
  {
  name: 'The main bundle of the docs',

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: -96, // Offset for the anchor.
  position: 'absolute',
  },
  '& pre, & pre[class*="language-"]': {
- margin: `${theme.spacing.unit * 3}px 0`,
+ margin: '24px 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: '32px 0 16px',
  },
  '& .description': {
  ...theme.typography.headline,
- margin: `0 0 ${theme.spacing.unit * 5}px`,
+ margin: '0 0 40px',
  },
  '& h2': {
  ...theme.typography.display1,
  color: theme.palette.text.secondary,
- margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 3}px`,
+ margin: '32px 0 24px',
  },
  '& h3': {
  ...theme.typography.headline,
  color: theme.palette.text.secondary,
- margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 3}px`,
+ margin: '32px 0 24px',
  },
  '& h4': {
  ...theme.typography.title,
  color: theme.palette.text.secondary,
- margin: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 2}px`,
+ margin: '24px 0 16px',
  },
  '& 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 16px 8px 8px',
  textAlign: 'left',
  },
  '& td:last-child': {
- paddingRight: theme.spacing.unit * 3,
+ paddingRight: 24,
  },
  '& td compact': {
- paddingRight: theme.spacing.unit * 3,
+ paddingRight: 24,
  },
  '& 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 16px 0 8px',
  textAlign: 'left',
  },
  '& th:last-child': {
- paddingRight: theme.spacing.unit * 3,
+ paddingRight: 24,
  },
  '& 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: '4px 24px',
+ margin: '24px 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
@@ -10,7 +10,7 @@ import { duration } from '@material-ui/core/styles/transitions';
 import Button from '@material-ui/core/Button';
 import { isMuiElement } from '@material-ui/core/utils/reactHelpers';
 
-const styles = theme => ({
+const styles = {
  root: {
  zIndex: 1050,
  display: 'flex',
@@ -19,12 +19,12 @@ const styles = theme => ({
  actions: {
  display: 'flex',
  flexDirection: 'column-reverse', // Display the first action at the bottom.
- marginBottom: theme.spacing.unit * 2,
+ marginBottom: 16,
  },
  actionsClosed: {
  transition: 'top 0s linear 0.2s',
  },
-});
+};
 
 class SpeedDial extends React.Component {
  state = {

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: 40,
+ height: 40,
  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: 16,
  },
  '&$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 4px',
  [theme.breakpoints.up('sm')]: {
- padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+ padding: '8px 12px',
  },
  },
  action: {
- margin: `0 ${theme.spacing.unit / 2}px`,
+ margin: '0 4px',
  },
 });
 

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: 16,
+ paddingBottom: 16,
  '&:last-child': {
- paddingBottom: theme.spacing.unit * 3,
+ paddingBottom: 24,
  },
  }),
 });

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: 16,
+ paddingBottom: 16,
  }),
  avatar: {
  flex: '0 0 auto',
- marginRight: theme.spacing.unit * 2,
+ marginRight: 16,
  },
  action: {
  flex: '0 0 auto',
  alignSelf: 'flex-start',
- marginTop: theme.spacing.unit * -1,
- marginRight: theme.spacing.unit * -2,
+ marginTop: -8,
+ marginRight: -16,
  },
  content: {
  flex: '1 1 auto',

diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js
@@ -32,7 +32,7 @@ export const styles = theme => ({
  },
  paperScrollPaper: {
  flex: '0 1 auto',
- maxHeight: `calc(100% - ${48 * 2}px)`,
+ maxHeight: 'calc(100% - 96px)',
  },
  paperScrollBody: {
  margin: '48px 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 4px',
  },
  action: {
- margin: `0 ${theme.spacing.unit / 2}px`,
+ margin: '0 4px',
  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
@@ -3,19 +3,16 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => {
- const spacing = theme.spacing.unit * 3;
- return {
- root: {
- flex: '1 1 auto',
- overflowY: 'auto',
- WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
- padding: `0 ${spacing}px ${spacing}px ${spacing}px`,
- '&:first-child': {
- paddingTop: spacing,
- },
+export const styles = {
+ root: {
+ flex: '1 1 auto',
+ overflowY: 'auto',
+ WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+ padding: '0 24px 24px',
+ '&:first-child': {
+ paddingTop: 24,
  },
- };
+ },
 };
 
 function DialogContent(props) {

diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js
@@ -4,14 +4,13 @@ import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
 
-export const styles = theme => ({
+export const styles = {
  root: {
  margin: 0,
- padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px \
- 20px ${theme.spacing.unit * 3}px`,
+ padding: '24px 24px 20px',
  flex: '0 0 auto',
  },
-});
+};
 
 function DialogTitle(props) {
  const { children, classes, className, disableTypography, ...other } = props;

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: 72,
  },
  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: '16px 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: '16px 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 24px 24px',
  },
-});
+};
 
 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 24px 0 24px',
  '&: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: 32,
  },
  '&$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': {