[material-ui][Typography] Color prop check for primitive type (mui#39071

)
mnajdova · Oct 9, 2023 · c5da41f · c5da41f
1 parent 2d44905
commit c5da41f
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 9 deletions.
diff --git a/packages/mui-material/src/Typography/Typography.test.js b/packages/mui-material/src/Typography/Typography.test.js
@@ -112,6 +112,20 @@ describe('<Typography />', () => {
     });
   });
 
+  describe('prop: color', () => {
+    it('should check for invalid color value', () => {
+      const msg =
+        'MUI: The value found in theme for prop: "background" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".';
+      expect(() => {
+        render(
+          <Typography variant="h6" color="background">
+            Hello
+          </Typography>,
+        );
+      }).toWarnDev([msg, msg]);
+    });
+  });
+
   it('combines system properties with the sx prop', () => {
     const { container } = render(<Typography mt={2} mr={1} sx={{ marginRight: 5, mb: 2 }} />);
 

diff --git a/packages/mui-system/src/palette.test.js b/packages/mui-system/src/palette.test.js
@@ -9,10 +9,16 @@ const theme = {
 
 describe('palette', () => {
   it('should treat grey as CSS color', () => {
-    const output = palette({
-      theme,
-      backgroundColor: 'grey',
-    });
+    let output;
+    expect(() => {
+      output = palette({
+        theme,
+        backgroundColor: 'grey',
+      });
+    }).toWarnDev(
+      'MUI: The value found in theme for prop: "grey" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".',
+    );
+
     expect(output).to.deep.equal({
       backgroundColor: 'grey',
     });

diff --git a/packages/mui-system/src/style.js b/packages/mui-system/src/style.js
@@ -35,6 +35,14 @@ export function getStyleValue(themeMapping, transform, propValueFinal, userValue
     value = getPath(themeMapping, propValueFinal) || userValue;
   }
 
+  if (typeof value === 'object') {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `MUI: The value found in theme for prop: "${propValueFinal}" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".`,
+      );
+    }
+  }
+
   if (transform) {
     value = transform(value, userValue, themeMapping);
   }

diff --git a/packages/mui-system/src/style.test.js b/packages/mui-system/src/style.test.js
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import style from './style';
+import style, { getStyleValue } from './style';
 
 describe('style', () => {
   const bgcolor = style({
@@ -258,4 +258,60 @@ describe('style', () => {
       });
     });
   });
+  describe('getStyleValue', () => {
+    it('should warn on acceptable object', () => {
+      const round = (value) => Math.round(value * 1e5) / 1e5;
+      let output;
+
+      expect(() => {
+        output = getStyleValue(
+          {
+            body1: {
+              fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+              fontSize: '1rem',
+              letterSpacing: `${round(0.15 / 16)}em`,
+              fontWeight: 400,
+              lineHeight: 1.5,
+            },
+          },
+          null,
+          'body1',
+        );
+      }).toWarnDev(
+        'MUI: The value found in theme for prop: "body1" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".',
+      );
+
+      expect(output).to.deep.equal({
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontSize: '1rem',
+        letterSpacing: `${round(0.15 / 16)}em`,
+        fontWeight: 400,
+        lineHeight: 1.5,
+      });
+    });
+
+    it('should warn on unacceptable object', () => {
+      const theme = {
+        palette: {
+          grey: { 100: '#f5f5f5' },
+        },
+      };
+
+      const paletteTransform = (value, userValue) => {
+        if (userValue === 'grey') {
+          return userValue;
+        }
+        return value;
+      };
+      let output;
+
+      expect(() => {
+        output = getStyleValue(theme.palette, paletteTransform, 'grey');
+      }).toWarnDev(
+        'MUI: The value found in theme for prop: "grey" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".',
+      );
+
+      expect(output).to.be.equal('grey');
+    });
+  });
 });
diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
@@ -93,10 +93,17 @@ describe('styleFunctionSx', () => {
     });
 
     it('resolves system typography', () => {
-      const result = styleFunctionSx({
-        theme,
-        sx: { typography: ['body2', 'body1'] },
-      });
+      let result;
+
+      expect(() => {
+        result = styleFunctionSx({
+          theme,
+          sx: { typography: ['body2', 'body1'] },
+        });
+      }).toWarnDev([
+        'MUI: The value found in theme for prop: "body2" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".',
+        'MUI: The value found in theme for prop: "body1" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".',
+      ]);
 
       expect(result).to.deep.equal({
         '@media (min-width:0px)': {