Fix docs usage

mui · Sep 11, 2020 · 13e72db · 13e72db
1 parent 40c9c5a
commit 13e72db
Show file tree

Hide file tree

Showing 33 changed files with 50 additions and 50 deletions.
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
@@ -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': {

diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
@@ -19,7 +19,7 @@ const styles = (theme) => ({
  },
  container: {
  marginBottom: theme.spacing(20),
- maxWidth: 680 + theme.spacing(8 + 4),
+ maxWidth: `calc(680 + ${theme.spacing(12)})`,
  '& .markdownElement': {
  fontSize: 18,
  lineHeight: 1.7,

diff --git a/docs/src/modules/components/TopLayoutCompany.js b/docs/src/modules/components/TopLayoutCompany.js
@@ -13,7 +13,7 @@ const styles = (theme) => ({
  },
  container: {
  marginBottom: theme.spacing(20),
- maxWidth: 680 + theme.spacing(8 + 4),
+ maxWidth: `calc(680 + ${theme.spacing(12)})`,
  '& .markdownElement': {
  [theme.breakpoints.up('md')]: {
  paddingRight: theme.spacing(4),

diff --git a/docs/src/modules/components/ad.styles.js b/docs/src/modules/components/ad.styles.js
@@ -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: {

diff --git a/docs/src/pages/components/app-bar/PrimarySearchAppBar.js b/docs/src/pages/components/app-bar/PrimarySearchAppBar.js
@@ -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')]: {

diff --git a/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx b/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx
@@ -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')]: {

diff --git a/docs/src/pages/components/app-bar/SearchAppBar.js b/docs/src/pages/components/app-bar/SearchAppBar.js
@@ -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')]: {

diff --git a/docs/src/pages/components/app-bar/SearchAppBar.tsx b/docs/src/pages/components/app-bar/SearchAppBar.tsx
@@ -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')]: {

diff --git a/docs/src/pages/components/buttons/ButtonBase.js b/docs/src/pages/components/buttons/ButtonBase.js
@@ -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,

diff --git a/docs/src/pages/components/buttons/ButtonBase.tsx b/docs/src/pages/components/buttons/ButtonBase.tsx
@@ -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,

diff --git a/docs/src/pages/components/dividers/SubheaderDividers.js b/docs/src/pages/components/dividers/SubheaderDividers.js
@@ -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)}`,
  },
 }));
 

diff --git a/docs/src/pages/components/dividers/SubheaderDividers.tsx b/docs/src/pages/components/dividers/SubheaderDividers.tsx
@@ -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)}`,
  },
  }),
 );

diff --git a/docs/src/pages/components/drawers/MiniDrawer.js b/docs/src/pages/components/drawers/MiniDrawer.js
@@ -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: {

diff --git a/docs/src/pages/components/drawers/MiniDrawer.tsx b/docs/src/pages/components/drawers/MiniDrawer.tsx
@@ -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: {

diff --git a/docs/src/pages/components/grid/AutoGridNoWrap.js b/docs/src/pages/components/grid/AutoGridNoWrap.js
@@ -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),
  },
 }));

diff --git a/docs/src/pages/components/grid/AutoGridNoWrap.tsx b/docs/src/pages/components/grid/AutoGridNoWrap.tsx
@@ -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),
  },
  }),

diff --git a/docs/src/pages/components/slider/CustomizedSlider.js b/docs/src/pages/components/slider/CustomizedSlider.js
@@ -7,7 +7,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 
 const useStyles = makeStyles((theme) => ({
  root: {
- width: 300 + theme.spacing(3) * 2,
+ width: `calc(300 + ${theme.spacing(6)})`,
  },
  margin: {
  height: theme.spacing(3),

diff --git a/docs/src/pages/components/slider/CustomizedSlider.tsx b/docs/src/pages/components/slider/CustomizedSlider.tsx
@@ -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(300 + ${theme.spacing(6)})`,
  },
  margin: {
  height: theme.spacing(3),

diff --git a/docs/src/pages/customization/spacing/spacing-de.md b/docs/src/pages/customization/spacing/spacing-de.md
@@ -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'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing-es.md b/docs/src/pages/customization/spacing/spacing-es.md
@@ -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'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing-fr.md b/docs/src/pages/customization/spacing/spacing-fr.md
@@ -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'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing-ja.md b/docs/src/pages/customization/spacing/spacing-ja.md
@@ -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'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing-pt.md b/docs/src/pages/customization/spacing/spacing-pt.md
@@ -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'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing-ru.md b/docs/src/pages/customization/spacing/spacing-ru.md
@@ -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'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing-zh.md b/docs/src/pages/customization/spacing/spacing-zh.md
@@ -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'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing.md b/docs/src/pages/customization/spacing/spacing.md
@@ -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'
 ```
 

diff --git a/docs/src/pages/getting-started/templates/checkout/Checkout.js b/docs/src/pages/getting-started/templates/checkout/Checkout.js
@@ -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',
@@ -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),

diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js
@@ -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,

diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.tsx b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.tsx
@@ -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,

diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/Typography.js b/docs/src/pages/premium-themes/onepirate/modules/components/Typography.js
@@ -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']]: {

diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/Typography.tsx b/docs/src/pages/premium-themes/onepirate/modules/components/Typography.tsx
@@ -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']]: {

diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductCategories.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductCategories.js
@@ -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,

diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductCategories.tsx b/docs/src/pages/premium-themes/onepirate/modules/views/ProductCategories.tsx
@@ -75,7 +75,7 @@ const styles = (theme: 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,