[Stack, system] Apply correct responsive styles if any custom breakpo…

…ints are provided (#32913)
mui · Jun 8, 2022 · e55bafd · e55bafd
1 parent 96f5a72
commit e55bafd
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 3 deletions.
diff --git a/packages/mui-material/src/Stack/Stack.js b/packages/mui-material/src/Stack/Stack.js
@@ -60,7 +60,10 @@ export const style = ({ ownerState, theme }) => {
     const transformer = createUnarySpacing(theme);
 
     const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-      if (ownerState.spacing[breakpoint] != null || ownerState.direction[breakpoint] != null) {
+      if (
+        (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null) ||
+        (typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null)
+      ) {
         acc[breakpoint] = true;
       }
       return acc;

diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js
@@ -256,5 +256,69 @@ describe('<Stack />', () => {
         flexDirection: 'column',
       });
     });
+
+    it('should generate correct styles if custom breakpoints are provided in theme', () => {
+      const customTheme = createTheme({
+        breakpoints: {
+          values: {
+            smallest: 0,
+            small: 375,
+            mobile: 600,
+            tablet: 992,
+            desktop: 1200,
+          },
+        },
+      });
+
+      expect(
+        style({
+          ownerState: {
+            direction: 'column',
+            spacing: 4,
+          },
+          theme: customTheme,
+        }),
+      ).to.deep.equal({
+        '& > :not(style) + :not(style)': {
+          margin: 0,
+          marginTop: '32px',
+        },
+        display: 'flex',
+        flexDirection: 'column',
+      });
+    });
+
+    it('should generate correct responsive styles if custom responsive spacing values are provided', () => {
+      const customTheme = createTheme({
+        breakpoints: {
+          values: {
+            smallest: 0,
+            small: 375,
+            mobile: 600,
+            tablet: 992,
+            desktop: 1200,
+          },
+        },
+      });
+
+      expect(
+        style({
+          ownerState: {
+            direction: 'column',
+            spacing: { small: 4 },
+          },
+          theme: customTheme,
+        }),
+      ).to.deep.equal({
+        [`@media (min-width:${customTheme.breakpoints.values.small}px)`]: {
+          '& > :not(style) + :not(style)': {
+            margin: 0,
+            marginTop: '32px',
+          },
+        },
+        display: 'flex',
+        flexDirection: 'column',
+      });
+    });
   });
 });
diff --git a/packages/mui-system/src/breakpoints.js b/packages/mui-system/src/breakpoints.js
@@ -158,12 +158,14 @@ export function resolveBreakpointValues({
       acc[breakpoint] =
         breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
       previous = i;
-    } else {
+    } else if (typeof breakpointValues === 'object') {
       acc[breakpoint] =
         breakpointValues[breakpoint] != null
           ? breakpointValues[breakpoint]
-          : breakpointValues[previous] || breakpointValues;
+          : breakpointValues[previous];
       previous = breakpoint;
+    } else {
+      acc[breakpoint] = breakpointValues;
     }
     return acc;
   }, {});

diff --git a/packages/mui-system/src/breakpoints.test.js b/packages/mui-system/src/breakpoints.test.js
@@ -192,6 +192,32 @@ describe('breakpoints', () => {
         expect(values).to.equal(3);
       });
 
+      it('return prop as it is for prop of fixed string value', () => {
+        const directionValue = 'columns';
+        const values = resolveBreakpointValues({
+          values: directionValue,
+        });
+        expect(values).to.equal('columns');
+      });
+
+      it('given custom base, resolve breakpoint values for prop of string type', () => {
+        const directionValue = 'columns';
+        const values = resolveBreakpointValues({
+          values: directionValue,
+          base: { small: true },
+        });
+        expect(values).to.deep.equal({ small: directionValue });
+      });
+
+      it('given custom base, resolve breakpoint values for prop of number type', () => {
+        const spacingValue = 3;
+        const values = resolveBreakpointValues({
+          values: spacingValue,
+          base: { small: true },
+        });
+        expect(values).to.deep.equal({ small: spacingValue });
+      });
+
       it('given custom base, resolve breakpoint values for prop of array type', () => {
         const columns = [1, 2, 3];
         const customBase = { extraSmall: true, small: true, medium: true, large: true };