[theme] Fix spacing string arguments (#23224)

mui · Oct 26, 2020 · 42183a9 · 42183a9
1 parent 62ecf26
commit 42183a9
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 11 deletions.
diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts
@@ -176,9 +176,9 @@ export type SpacingProps = PropsFor<typeof spacing>;
 export function createUnarySpacing<Spacing>(theme: {
   spacing: Spacing;
 }): Spacing extends number
-  ? (abs: number) => number
+  ? (abs: number | string) => number | number
   : Spacing extends any[]
-  ? <Index extends number>(abs: Index) => Spacing[Index]
+  ? <Index extends number>(abs: Index | string) => Spacing[Index] | string
   : Spacing extends (...args: unknown[]) => unknown
   ? Spacing
   : // warns in Dev

diff --git a/packages/material-ui-system/src/spacing.js b/packages/material-ui-system/src/spacing.js
@@ -79,9 +79,15 @@ export function createUnarySpacing(theme) {
 
   if (typeof themeSpacing === 'number') {
     return (abs) => {
+      if (typeof abs === 'string') {
+        return abs;
+      }
+
       if (process.env.NODE_ENV !== 'production') {
         if (typeof abs !== 'number') {
-          console.error(`Material-UI: Expected spacing argument to be a number, got ${abs}.`);
+          console.error(
+            `Material-UI: Expected spacing argument to be a number or a string, got ${abs}.`,
+          );
         }
       }
       return themeSpacing * abs;
@@ -90,6 +96,10 @@ export function createUnarySpacing(theme) {
 
   if (Array.isArray(themeSpacing)) {
     return (abs) => {
+      if (typeof abs === 'string') {
+        return abs;
+      }
+
       if (process.env.NODE_ENV !== 'production') {
         if (abs > themeSpacing.length - 1) {
           console.error(

diff --git a/packages/material-ui/src/styles/createSpacing.d.ts b/packages/material-ui/src/styles/createSpacing.d.ts
@@ -17,7 +17,9 @@ export interface Spacing {
 
 export type SpacingOptions =
   | number
+  | Spacing
   | ((factor: number) => string | number)
+  | ((factor: number | string) => string | number)
   | Array<string | number>;
 
 export default function createSpacing(spacing: SpacingOptions): Spacing;
diff --git a/packages/material-ui/src/styles/createSpacing.test.ts b/packages/material-ui/src/styles/createSpacing.test.ts
@@ -12,9 +12,9 @@ describe('createSpacing', () => {
     expect(spacing(2)).to.equal('16px');
     spacing = createSpacing(['0rem', '8rem', '16rem']);
     expect(spacing(2)).to.equal('16rem');
-    spacing = createSpacing((factor) => factor ** 2);
+    spacing = createSpacing((factor: number) => factor ** 2);
     expect(spacing(2)).to.equal('4px');
-    spacing = createSpacing((factor) => `${0.25 * factor}rem`);
+    spacing = createSpacing((factor: number) => `${0.25 * factor}rem`);
     expect(spacing(2)).to.equal('0.5rem');
   });
 
@@ -27,23 +27,25 @@ describe('createSpacing', () => {
     let spacing;
     spacing = createSpacing();
     expect(spacing()).to.equal('8px');
-    spacing = createSpacing((factor) => `${0.25 * factor}rem`);
+    spacing = createSpacing((factor: number) => `${0.25 * factor}rem`);
     expect(spacing()).to.equal('0.25rem');
   });
 
   it('should support multiple arguments', () => {
     let spacing;
     spacing = createSpacing();
     expect(spacing(1, 2)).to.equal('8px 16px');
-    spacing = createSpacing((factor) => `${0.25 * factor}rem`);
+    spacing = createSpacing((factor: number) => `${0.25 * factor}rem`);
     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`);
+    spacing = createSpacing((factor: number | string) =>
+      typeof factor === 'string' ? factor : `${0.25 * factor}rem`,
+    );
     expect(spacing(1, 'auto', 2, 3)).to.equal('0.25rem auto 0.5rem 0.75rem');
   });
 

diff --git a/packages/material-ui/src/styles/createSpacing.ts b/packages/material-ui/src/styles/createSpacing.ts
@@ -4,6 +4,7 @@ export type SpacingOptions =
   | number
   | Spacing
   | ((abs: number) => number | string)
+  | ((abs: number | string) => number | string)
   | Array<string | number>;
 
 export type SpacingArgument = number | string;
@@ -53,9 +54,6 @@ export default function createSpacing(spacingInput: SpacingOptions = 8): Spacing
 
     return args
       .map((argument) => {
-        if (typeof argument === 'string') {
-          return argument;
-        }
         const output = transform(argument);
         return typeof output === 'number' ? `${output}px` : output;
       })