[system] Warn for spacing when non integer value is used with theme.s…

…pacing array (#23460)
mui · Nov 10, 2020 · 1fca268 · 1fca268
1 parent 3cd5dd6
commit 1fca268
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/packages/material-ui-system/src/spacing.js b/packages/material-ui-system/src/spacing.js
@@ -101,7 +101,14 @@ export function createUnarySpacing(theme) {
       }
 
       if (process.env.NODE_ENV !== 'production') {
-        if (abs > themeSpacing.length - 1) {
+        if (!Number.isInteger(abs)) {
+          console.error(
+            [
+              'Material-UI: The `theme.spacing` array type cannot be combined with non integer values.' +
+                'You should either use an integer value that can be used as index, or define the `theme.spacing` as a number.',
+            ].join('\n'),
+          );
+        } else if (abs > themeSpacing.length - 1) {
           console.error(
             [
               `Material-UI: The value provided (${abs}) overflows.`,

diff --git a/packages/material-ui-system/src/spacing.test.js b/packages/material-ui-system/src/spacing.test.js
@@ -71,6 +71,31 @@ describe('spacing', () => {
       );
       expect(output).to.deep.equal({ padding: undefined });
     });
+
+    it('should warn if non integer value is used with theme.spacing defined as array', () => {
+      let output;
+      expect(() => {
+        output = spacing({
+          theme: {
+            spacing: [1, 2, 3, 4, 5, 6],
+          },
+          p: 0.5,
+        });
+      }).toErrorDev(
+        'Material-UI: The `theme.spacing` array type cannot be combined with non integer values.',
+      );
+      expect(output).to.deep.equal({ padding: undefined });
+    });
+
+    it('should accept non integer value', () => {
+      const output = spacing({
+        theme: {
+          spacing: 8,
+        },
+        p: 0.5,
+      });
+      expect(output).to.deep.equal({ padding: 4 });
+    });
   });
 
   it('should support negative values', () => {