From b07f16ff4fff0a1d2f3a8b5eaf2a1979f28355eb Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Sat, 4 Apr 2020 23:34:15 -0300
Subject: [PATCH] [theme] Support string args in theme.spacing

---
 docs/src/pages/customization/spacing/spacing.md       | 11 ++++++-----
 packages/material-ui/src/styles/createSpacing.js      |  7 +++++--
 packages/material-ui/src/styles/createSpacing.test.js |  8 ++++++++
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/docs/src/pages/customization/spacing/spacing.md b/docs/src/pages/customization/spacing/spacing.md
index 46059738729256..a1b0cd9e8dcf37 100644
--- a/docs/src/pages/customization/spacing/spacing.md
+++ b/docs/src/pages/customization/spacing/spacing.md
@@ -47,14 +47,15 @@ theme.spacing(2); // = 8
 ## Multiple arity
 
 The `theme.spacing()` helper accepts up to 4 arguments.
-You can use the arguments to reduce the boilerplate. Instead of doing:
+You can use the arguments to reduce the boilerplate.
 
-```js
-padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+```diff
+-padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
++padding: theme.spacing(1, 2), // '8px 16px'
 ```
 
-you can do:
+Mixing string values is also supported:
 
 ```js
-padding: theme.spacing(1, 2), // '8px 16px'
+margin: theme.spacing(1, 'auto'), // '8px auto'
 ```
diff --git a/packages/material-ui/src/styles/createSpacing.js b/packages/material-ui/src/styles/createSpacing.js
index 644d2a9a79c984..779a8d2aeca72a 100644
--- a/packages/material-ui/src/styles/createSpacing.js
+++ b/packages/material-ui/src/styles/createSpacing.js
@@ -33,8 +33,11 @@ export default function createSpacing(spacingInput = 8) {
     }
 
     return args
-      .map((factor) => {
-        const output = transform(factor);
+      .map((argument) => {
+        if (typeof argument === 'string') {
+          return argument;
+        }
+        const output = transform(argument);
         return typeof output === 'number' ? `${output}px` : output;
       })
       .join(' ');
diff --git a/packages/material-ui/src/styles/createSpacing.test.js b/packages/material-ui/src/styles/createSpacing.test.js
index 72cd90f5cf9636..e936df81cbef52 100644
--- a/packages/material-ui/src/styles/createSpacing.test.js
+++ b/packages/material-ui/src/styles/createSpacing.test.js
@@ -38,6 +38,14 @@ describe('createSpacing', () => {
     expect(spacing(1, 2)).to.equal('0.25rem 0.5rem');
   });
 
+  it('should support string arguments', () => {
+    let spacing;
+    spacing = createSpacing();
+    expect(spacing(1, 'auto')).to.equal('8px auto');
+    spacing = createSpacing((factor) => `${0.25 * factor}rem`);
+    expect(spacing(1, 'auto', 2, 3)).to.equal('0.25rem auto 0.5rem 0.75rem');
+  });
+
   describe('warnings', () => {
     beforeEach(() => {
       consoleErrorMock.spy();