Multiple arity

Author: oliviertassinari

.size-limit.js

@@ -28,7 +28,7 @@ module.exports = [
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '92.3 KB',
+    limit: '92.4 KB',
   },
   {
     name: 'The theme object',
@@ -66,7 +66,7 @@ module.exports = [
     name: 'The size of the @material-ui/core/Modal component',
     webpack: true,
     path: 'packages/material-ui/build/esm/Modal/index.js',
-    limit: '24.0 KB',
+    limit: '24.1 KB',
   },
   {
     // vs https://bundlephobia.com/result?p=react-popper

docs/src/modules/components/AppSearch.js

@@ -153,9 +153,7 @@ const styles = theme => ({
     color: 'inherit',
   },
   inputInput: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(
-      9,
-    )}px`,
+    padding: theme.spacing(1, 1, 1, 9),
   },
 });
 

docs/src/modules/components/AppTableOfContents.js

@@ -71,7 +71,7 @@ const styles = theme => ({
   },
   item: {
     fontSize: 13,
-    padding: `${theme.spacing(0.5)}px 0`,
+    padding: theme.spacing(0.5, 0),
   },
 });
 

docs/src/modules/components/Demo.js

@@ -43,7 +43,7 @@ const styles = theme => ({
     marginLeft: -theme.spacing(2),
     marginRight: -theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
-      padding: `0 ${theme.spacing(1)}px`,
+      padding: theme.spacing(0, 1),
       marginLeft: 0,
       marginRight: 0,
     },

docs/src/modules/components/HomeFooter.js

@@ -11,9 +11,9 @@ const styles = theme => ({
   root: {
     maxWidth: theme.spacing(110),
     margin: 'auto',
-    padding: `${theme.spacing(3)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(3, 2),
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing(6)}px ${theme.spacing(2)}px`,
+      padding: theme.spacing(6, 2),
     },
   },
   list: {

docs/src/modules/components/HomeSteps.js

@@ -18,11 +18,11 @@ import Link from 'docs/src/modules/components/Link';
 const styles = theme => ({
   step: {
     border: `12px solid ${theme.palette.background.paper}`,
-    padding: `${theme.spacing(3)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(3, 2),
     borderRightWidth: 0,
     borderLeftWidth: 0,
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing(5)}px ${theme.spacing(4)}px`,
+      padding: theme.spacing(5, 4),
     },
     [theme.breakpoints.up('md')]: {
       borderRightWidth: 12,

docs/src/modules/components/MarkdownDocs.js

@@ -34,7 +34,7 @@ const styles = theme => ({
   markdownElement: {
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(2),
-    padding: `0 ${theme.spacing(1)}px`,
+    padding: theme.spacing(0, 1),
   },
 });
 

docs/src/modules/components/Tidelift.js

@@ -9,9 +9,7 @@ import compose from 'recompose/compose';
 
 const styles = theme => ({
   root: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(
-      2,
-    )}px`,
+    padding: theme.spacing(1, 1, 1, 2),
     right: 0,
     left: 0,
     display: 'flex',
@@ -32,7 +30,7 @@ const styles = theme => ({
     content: '""',
     width: 20,
     height: 20,
-    margin: `0 ${theme.spacing(1)}px 0 0`,
+    margin: theme.spacing(0, 1, 0, 0),
   },
 });
 

docs/src/pages/customization/themes/WithTheme.js

@@ -11,12 +11,12 @@ function WithTheme(props) {
   const styles = {
     primaryText: {
       backgroundColor: theme.palette.background.default,
-      padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+      padding: theme.spacing(1, 2),
       color: primaryText,
     },
     primaryColor: {
       backgroundColor: primaryColor,
-      padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+      padding: theme.spacing(1, 2),
       color: theme.palette.common.white,
     },
   };

docs/src/pages/customization/themes/themes.md

@@ -319,12 +319,21 @@ theme.spacing(2) // = 4 * 2
 
 ```js
 const theme = createMuiTheme({
-  spacing: x => `${0.25 * x}rem`, // (Bootstrap strategy)
+  spacing: factor => `${0.25 * factor}rem`, // (Bootstrap strategy)
 });
 
 theme.spacing(2) // = 0.5rem = 8px
 ```
 
+#### Multiple arity
+
+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`,
++  padding: theme.spacing(1, 2), // '8px 16px'
+```
+
 ### Other variables
 
 In addition to the palette, dark and light types, and typography, the theme normalizes implementation by providing many more default values, such as breakpoints, shadows, transitions, etc.

docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js

@@ -214,7 +214,7 @@ const useStyles = makeStyles(theme => ({
     right: 0,
   },
   chip: {
-    margin: `${theme.spacing(0.5)}px ${2}px`,
+    margin: theme.spacing(0.5, 2),
   },
   inputRoot: {
     flexWrap: 'wrap',

docs/src/pages/demos/autocomplete/IntegrationDownshift.js

@@ -229,7 +229,7 @@ const styles = theme => ({
     right: 0,
   },
   chip: {
-    margin: `${theme.spacing(0.5)}px ${2}px`,
+    margin: theme.spacing(0.5, 2),
   },
   inputRoot: {
     flexWrap: 'wrap',

docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js

@@ -70,7 +70,7 @@ const useStyles = makeStyles(theme => ({
     overflow: 'hidden',
   },
   chip: {
-    margin: `${theme.spacing(0.5)}px ${2}px`,
+    margin: theme.spacing(0.5, 2),
   },
   chipFocused: {
     backgroundColor: emphasize(
@@ -79,7 +79,7 @@ const useStyles = makeStyles(theme => ({
     ),
   },
   noOptionsMessage: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
   singleValue: {
     fontSize: 16,

docs/src/pages/demos/autocomplete/IntegrationReactSelect.js

@@ -71,7 +71,7 @@ const styles = theme => ({
     overflow: 'hidden',
   },
   chip: {
-    margin: `${theme.spacing(0.5)}px ${2}px`,
+    margin: theme.spacing(0.5, 2),
   },
   chipFocused: {
     backgroundColor: emphasize(
@@ -80,7 +80,7 @@ const styles = theme => ({
     ),
   },
   noOptionsMessage: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
   singleValue: {
     fontSize: 16,

docs/src/pages/demos/badges/SimpleBadge.js

@@ -15,7 +15,7 @@ const styles = theme => ({
     margin: theme.spacing(2),
   },
   padding: {
-    padding: `0 ${theme.spacing(2)}px`,
+    padding: theme.spacing(0, 2),
   },
 });
 

docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js

@@ -14,7 +14,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   paper: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
 });
 

docs/src/pages/demos/breadcrumbs/CustomSeparator.js

@@ -13,7 +13,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   paper: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
 });
 

docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js

@@ -11,7 +11,7 @@ import GrainIcon from '@material-ui/icons/Grain';
 
 const styles = theme => ({
   root: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
   link: {
     display: 'flex',

docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js

@@ -12,7 +12,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   paper: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
 });
 

docs/src/pages/demos/dividers/MiddleDividers.js

@@ -17,13 +17,13 @@ const styles = theme => ({
     marginRight: theme.spacing(1),
   },
   section1: {
-    margin: `${theme.spacing(3)}px ${theme.spacing(2)}px`,
+    margin: theme.spacing(3, 2),
   },
   section2: {
     margin: theme.spacing(2),
   },
   section3: {
-    margin: `${theme.spacing(6)}px ${theme.spacing(2)}px ${theme.spacing(2)}px`,
+    margin: theme.spacing(6, 2, 2),
   },
 });
 

docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js

@@ -36,7 +36,7 @@ const styles = theme => ({
   },
   helper: {
     borderLeft: `2px solid ${theme.palette.divider}`,
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
   link: {
     color: theme.palette.primary.main,

docs/src/pages/demos/lists/InteractiveList.hooks.js

@@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.paper,
   },
   title: {
-    margin: `${theme.spacing(4)}px 0 ${theme.spacing(2)}px`,
+    margin: theme.spacing(4, 0, 2),
   },
 }));
 

docs/src/pages/demos/lists/InteractiveList.js

@@ -26,7 +26,7 @@ const styles = theme => ({
     backgroundColor: theme.palette.background.paper,
   },
   title: {
-    margin: `${theme.spacing(4)}px 0 ${theme.spacing(2)}px`,
+    margin: theme.spacing(4, 0, 2),
   },
 });
 

docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js

@@ -15,7 +15,7 @@ const useStyles = makeStyles(theme => ({
     margin: theme.spacing(3),
   },
   group: {
-    margin: `${theme.spacing(1)}px 0`,
+    margin: theme.spacing(1, 0),
   },
 }));
 

docs/src/pages/demos/selection-controls/RadioButtonsGroup.js

@@ -16,7 +16,7 @@ const styles = theme => ({
     margin: theme.spacing(3),
   },
   group: {
-    margin: `${theme.spacing(1)}px 0`,
+    margin: theme.spacing(1, 0),
   },
 });
 

docs/src/pages/discover-more/team/Team.js

@@ -89,7 +89,7 @@ const members = [
 
 const styles = theme => ({
   details: {
-    margin: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px 0`,
+    margin: theme.spacing(1, 1, 1, 0),
   },
   cover: {
     width: theme.spacing(10),

docs/src/pages/getting-started/page-layout-examples/album/Album.js

@@ -27,7 +27,7 @@ const styles = theme => ({
   heroContent: {
     maxWidth: 600,
     margin: '0 auto',
-    padding: `${theme.spacing(8)}px 0 ${theme.spacing(6)}px`,
+    padding: theme.spacing(8, 0, 6),
   },
   heroButtons: {
     marginTop: theme.spacing(4),
@@ -43,7 +43,7 @@ const styles = theme => ({
     },
   },
   cardGrid: {
-    padding: `${theme.spacing(8)}px 0`,
+    padding: theme.spacing(8, 0),
   },
   card: {
     height: '100%',

docs/src/pages/getting-started/page-layout-examples/blog/Blog.js

@@ -45,7 +45,7 @@ const styles = theme => ({
     marginBottom: theme.spacing(4),
   },
   mainFeaturedPostContent: {
-    padding: `${theme.spacing(6)}px`,
+    padding: theme.spacing(6),
     [theme.breakpoints.up('md')]: {
       paddingRight: 0,
     },
@@ -63,7 +63,7 @@ const styles = theme => ({
     width: 160,
   },
   markdown: {
-    padding: `${theme.spacing(3)}px 0`,
+    padding: theme.spacing(3, 0),
   },
   sidebarAboutBox: {
     padding: theme.spacing(2),
@@ -75,7 +75,7 @@ const styles = theme => ({
   footer: {
     backgroundColor: theme.palette.background.paper,
     marginTop: theme.spacing(8),
-    padding: `${theme.spacing(6)}px 0`,
+    padding: theme.spacing(6, 0),
   },
 });
 

docs/src/pages/getting-started/page-layout-examples/checkout/Checkout.js

@@ -39,7 +39,7 @@ const styles = theme => ({
     },
   },
   stepper: {
-    padding: `${theme.spacing(3)}px 0 ${theme.spacing(5)}px`,
+    padding: theme.spacing(3, 0, 5),
   },
   buttons: {
     display: 'flex',

docs/src/pages/getting-started/page-layout-examples/checkout/Review.js

@@ -24,7 +24,7 @@ const payments = [
 
 const styles = theme => ({
   listItem: {
-    padding: `${theme.spacing(1)}px 0`,
+    padding: theme.spacing(1, 0),
   },
   total: {
     fontWeight: '700',

docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js

@@ -39,7 +39,7 @@ const styles = theme => ({
   heroContent: {
     maxWidth: 600,
     margin: '0 auto',
-    padding: `${theme.spacing(8)}px 0 ${theme.spacing(6)}px`,
+    padding: theme.spacing(8, 0, 6),
   },
   cardHeader: {
     backgroundColor: theme.palette.grey[200],
@@ -58,7 +58,7 @@ const styles = theme => ({
   footer: {
     marginTop: theme.spacing(8),
     borderTop: `1px solid ${theme.palette.divider}`,
-    padding: `${theme.spacing(6)}px 0`,
+    padding: theme.spacing(6, 0),
   },
 });
 

docs/src/pages/getting-started/page-layout-examples/sign-in/SignIn.js

@@ -30,7 +30,7 @@ const styles = theme => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`,
+    padding: theme.spacing(2, 3, 3),
   },
   avatar: {
     margin: theme.spacing(1),