Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[theme] Always return default spacing value with px units #22552

Merged
merged 7 commits into from
Sep 12, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/modules/components/AppTableOfContents.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const useStyles = makeStyles((theme) => ({
},
item: {
fontSize: '.8125rem',
padding: theme.spacing(0.5, 0, 0.5, `${Math.max(0, theme.spacing(1) - 3)}px`),
padding: theme.spacing(0.5, 0, 0.5, '5px'),
borderLeft: `3px solid transparent`,
boxSizing: 'border-box',
'&:hover': {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/TopLayoutBlog.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const styles = (theme) => ({
},
container: {
marginBottom: theme.spacing(20),
maxWidth: 680 + theme.spacing(8 + 4),
maxWidth: `calc(680px + ${theme.spacing(12)})`,
'& .markdownElement': {
fontSize: 18,
lineHeight: 1.7,
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/TopLayoutCompany.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const styles = (theme) => ({
},
container: {
marginBottom: theme.spacing(20),
maxWidth: 680 + theme.spacing(8 + 4),
maxWidth: `calc(680px + ${theme.spacing(12)})`,
'& .markdownElement': {
[theme.breakpoints.up('md')]: {
paddingRight: theme.spacing(4),
Expand Down
6 changes: 3 additions & 3 deletions docs/src/modules/components/ad.styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ const adBodyImageStyles = (theme) => ({
display: 'block',
overflow: 'hidden',
border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
padding: `${theme.spacing(1.5)}px ${theme.spacing(1.5)}px ${theme.spacing(1.5)}px ${
theme.spacing(1.5) + 130
}px`,
padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)} ${theme.spacing(
1.5,
)} calc(${theme.spacing(1.5)} + 130px)`,
borderRadius: theme.shape.borderRadius,
},
imgWrapper: {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/app-bar/PrimarySearchAppBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const useStyles = makeStyles((theme) => ({
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('md')]: {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const useStyles = makeStyles((theme: Theme) =>
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('md')]: {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/app-bar/SearchAppBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const useStyles = makeStyles((theme) => ({
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/app-bar/SearchAppBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const useStyles = makeStyles((theme: Theme) =>
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/buttons/ButtonBase.js
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,9 @@ const useStyles = makeStyles((theme) => ({
},
imageTitle: {
position: 'relative',
padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${
theme.spacing(1) + 6
}px`,
padding: `${theme.spacing(2)} ${theme.spacing(4)} calc(${theme.spacing(
1,
)} + 6px)`,
},
imageMarked: {
height: 3,
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/buttons/ButtonBase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,9 @@ const useStyles = makeStyles((theme: Theme) =>
},
imageTitle: {
position: 'relative',
padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${
theme.spacing(1) + 6
}px`,
padding: `${theme.spacing(2)} ${theme.spacing(4)} calc(${theme.spacing(
1,
)} + 6px)`,
},
imageMarked: {
height: 3,
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/dividers/SubheaderDividers.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ const useStyles = makeStyles((theme) => ({
backgroundColor: theme.palette.background.paper,
},
dividerFullWidth: {
margin: `5px 0 0 ${theme.spacing(2)}px`,
margin: `5px 0 0 ${theme.spacing(2)}`,
},
dividerInset: {
margin: `5px 0 0 ${theme.spacing(9)}px`,
margin: `5px 0 0 ${theme.spacing(9)}`,
},
}));

Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/dividers/SubheaderDividers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ const useStyles = makeStyles((theme: Theme) =>
backgroundColor: theme.palette.background.paper,
},
dividerFullWidth: {
margin: `5px 0 0 ${theme.spacing(2)}px`,
margin: `5px 0 0 ${theme.spacing(2)}`,
},
dividerInset: {
margin: `5px 0 0 ${theme.spacing(9)}px`,
margin: `5px 0 0 ${theme.spacing(9)}`,
},
}),
);
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/drawers/MiniDrawer.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ const useStyles = makeStyles((theme) => ({
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: 'hidden',
width: theme.spacing(7) + 1,
width: `calc(${theme.spacing(7)} + 1px)`,
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9) + 1,
width: `calc(${theme.spacing(9)} + 1px)`,
},
},
toolbar: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/drawers/MiniDrawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,9 @@ const useStyles = makeStyles((theme: Theme) =>
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: 'hidden',
width: theme.spacing(7) + 1,
width: `calc(${theme.spacing(7)} + 1px)`,
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9) + 1,
width: `calc(${theme.spacing(9)} + 1px)`,
},
},
toolbar: {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/grid/AutoGridNoWrap.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const useStyles = makeStyles((theme) => ({
},
paper: {
maxWidth: 400,
margin: `${theme.spacing(1)}px auto`,
margin: `${theme.spacing(1)} auto`,
padding: theme.spacing(2),
},
}));
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/grid/AutoGridNoWrap.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const useStyles = makeStyles((theme: Theme) =>
},
paper: {
maxWidth: 400,
margin: `${theme.spacing(1)}px auto`,
margin: `${theme.spacing(1)} auto`,
padding: theme.spacing(2),
},
}),
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/slider/CustomizedSlider.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Tooltip from '@material-ui/core/Tooltip';

const useStyles = makeStyles((theme) => ({
root: {
width: 300 + theme.spacing(3) * 2,
width: `calc(300px + ${theme.spacing(6)})`,
},
margin: {
height: theme.spacing(3),
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/slider/CustomizedSlider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import Tooltip from '@material-ui/core/Tooltip';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: 300 + theme.spacing(3) * 2,
width: `calc(300px + ${theme.spacing(6)})`,
},
margin: {
height: theme.spacing(3),
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/customization/spacing/spacing-de.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ theme.spacing(2); // = 8
Der `theme.spacing ()` Helfer akzeptiert bis zu 4 Argumente. Sie können die Argumente verwenden, um den Boilerplate zu reduzieren.

```diff
-padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
+padding: theme.spacing(1, 2), // '8px 16px'
```

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/customization/spacing/spacing-es.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ theme.spacing(2); // = 8
The `theme.spacing()` helper accepts up to 4 arguments. You can use the arguments to reduce the boilerplate.

```diff
-padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
+padding: theme.spacing(1, 2), // '8px 16px'
```

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/customization/spacing/spacing-fr.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ theme.spacing(2); // = 8
The `theme.spacing()` helper accepts up to 4 arguments. You can use the arguments to reduce the boilerplate.

```diff
-padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
+padding: theme.spacing(1, 2), // '8px 16px'
```

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/customization/spacing/spacing-ja.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ theme.spacing(2); // = 8
`theme.spacing()` ヘルパーは最大4つの引数を受け入れます。 You can use the arguments to reduce the boilerplate.

```diff
-padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
+padding: theme.spacing(1, 2), // '8px 16px'
```

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/customization/spacing/spacing-pt.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ theme.spacing(2); // = 8
O auxiliar ` theme.spacing()` aceita até 4 argumentos. Você pode usar os argumentos para reduzir o trabalho.

```diff
-padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
+padding: theme.spacing(1, 2), // '8px 16px'
```

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/customization/spacing/spacing-ru.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ theme.spacing(2); // = 8
Вспомогательная функция ` theme.spacing () ` принимает до 4 аргументов. Вы можете использовать аргументы, чтобы уменьшить шаблон.

```diff
-padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
+padding: theme.spacing(1, 2), // '8px 16px'
```

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/customization/spacing/spacing-zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ theme.spacing(2); // = 8
` theme.spacing() ` 最多接受4个参数。 你可以使用参数来减少样板代码(boilerplate)。

```diff
-padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
+padding: theme.spacing(1, 2), // '8px 16px'
```

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/customization/spacing/spacing.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ The `theme.spacing()` helper accepts up to 4 arguments.
You can use the arguments to reduce the boilerplate.

```diff
-padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
+padding: theme.spacing(1, 2), // '8px 16px'
```

Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/getting-started/templates/checkout/Checkout.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const useStyles = makeStyles((theme) => ({
width: 'auto',
marginLeft: theme.spacing(2),
marginRight: theme.spacing(2),
[theme.breakpoints.up(600 + theme.spacing(2) * 2)]: {
[theme.breakpoints.up('md')]: {
width: 600,
marginLeft: 'auto',
marginRight: 'auto',
Expand All @@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) => ({
marginTop: theme.spacing(3),
marginBottom: theme.spacing(3),
padding: theme.spacing(2),
[theme.breakpoints.up(600 + theme.spacing(3) * 2)]: {
[theme.breakpoints.up('md')]: {
marginTop: theme.spacing(6),
marginBottom: theme.spacing(6),
padding: theme.spacing(3),
Expand Down
24 changes: 24 additions & 0 deletions docs/src/pages/guides/migration-v4/migration-v4.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,30 @@ For a smoother transition, the `adaptV4Theme` helper allows you to iteratively u
+},
```

- `theme.spacing` now returns single values with px units by default.
This change improves the integration with styled-components & emotion.

Before:

```
theme.spacing(2) => 16
```

After:

```
theme.spacing(2) => '16px'
```

You can restore the previous behavior with:

```diff
-const theme = createMuiTheme();
+const theme = createMuiTheme({
+ spacing: x => x * 8,
+});
```

- The `theme.palette.text.hint` key was unused in Material-UI components, and has been removed.

```diff
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,12 @@ const styles = (theme) => ({
[inputSyleMapping['small']]: {
fontSize: 14,
padding: theme.spacing(1),
width: `calc(100% - ${theme.spacing(2)}px)`,
width: `calc(100% - ${theme.spacing(2)})`,
},
[inputSyleMapping['medium']]: {
fontSize: 16,
padding: theme.spacing(2),
width: `calc(100% - ${theme.spacing(4)}px)`,
width: `calc(100% - ${theme.spacing(4)})`,
},
[inputSyleMapping['large']]: {
fontSize: 18,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,12 @@ const styles = (theme: any) =>
[inputSyleMapping['small']]: {
fontSize: 14,
padding: theme.spacing(1),
width: `calc(100% - ${theme.spacing(2)}px)`,
width: `calc(100% - ${theme.spacing(2)})`,
},
[inputSyleMapping['medium']]: {
fontSize: 16,
padding: theme.spacing(2),
width: `calc(100% - ${theme.spacing(4)}px)`,
width: `calc(100% - ${theme.spacing(4)})`,
},
[inputSyleMapping['large']]: {
fontSize: 18,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,21 +35,21 @@ const styles = (theme) => ({
height: 4,
width: 73,
display: 'block',
margin: `${theme.spacing(1)}px auto 0`,
margin: `${theme.spacing(1)} auto 0`,
backgroundColor: theme.palette.secondary.main,
},
[markSyleMapping['center']['h3']]: {
height: 4,
width: 55,
display: 'block',
margin: `${theme.spacing(1)}px auto 0`,
margin: `${theme.spacing(1)} auto 0`,
backgroundColor: theme.palette.secondary.main,
},
[markSyleMapping['center']['h4']]: {
height: 4,
width: 55,
display: 'block',
margin: `${theme.spacing(1)}px auto 0`,
margin: `${theme.spacing(1)} auto 0`,
backgroundColor: theme.palette.secondary.main,
},
[markSyleMapping['left']['h6']]: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,21 +42,21 @@ const styles = (theme: Theme) =>
height: 4,
width: 73,
display: 'block',
margin: `${theme.spacing(1)}px auto 0`,
margin: `${theme.spacing(1)} auto 0`,
backgroundColor: theme.palette.secondary.main,
},
[markSyleMapping['center']['h3']]: {
height: 4,
width: 55,
display: 'block',
margin: `${theme.spacing(1)}px auto 0`,
margin: `${theme.spacing(1)} auto 0`,
backgroundColor: theme.palette.secondary.main,
},
[markSyleMapping['center']['h4']]: {
height: 4,
width: 55,
display: 'block',
margin: `${theme.spacing(1)}px auto 0`,
margin: `${theme.spacing(1)} auto 0`,
backgroundColor: theme.palette.secondary.main,
},
[markSyleMapping['left']['h6']]: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const styles = (theme) => ({
},
imageTitle: {
position: 'relative',
padding: `${theme.spacing(2)}px ${theme.spacing(4)}px 14px`,
padding: `${theme.spacing(2)} ${theme.spacing(4)} 14px`,
},
imageMarked: {
height: 3,
Expand Down
Loading