[Grid] Prevent crash if spacing is set to zero in theme (#33777)

* [docs] demo density tool crashes * [docs] prettier executed * [docs] code changed as per suggestions * add test Co-authored-by: ZeeshanTamboli <[email protected]>
mui · Aug 5, 2022 · 67e1579 · 67e1579
1 parent 812876d
commit 67e1579
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/docs/data/material/customization/density/DensityTool.js b/docs/data/material/customization/density/DensityTool.js
@@ -25,9 +25,20 @@ export default function DensityTool() {
   };
 
   const handleSpacingChange = (event, value) => {
+    let spacing = value || +event.target.value;
+
+    //  If the entered value is greater than maxSpacing, setting up maxSpacing as value
+    if (spacing > maxSpacing) {
+      spacing = maxSpacing;
+    }
+    //  If the entered value is less than minSpacing, setting up minSpacing as value
+    if (spacing < minSpacing) {
+      spacing = minSpacing;
+    }
+
     dispatch({
       type: 'SET_SPACING',
-      payload: value || +event.target.value,
+      payload: spacing,
     });
   };
 
@@ -71,7 +82,11 @@ export default function DensityTool() {
           </Typography>
         </Grid>
         <Grid item>
-          <IconButton aria-label={t('increaseSpacing')} onClick={decreaseSpacing}>
+          <IconButton
+            aria-label={t('decreaseSpacing')}
+            onClick={decreaseSpacing}
+            disabled={spacingUnit === minSpacing}
+          >
             <DecreaseIcon />
           </IconButton>
           <Input
@@ -86,7 +101,11 @@ export default function DensityTool() {
               'aria-labelledby': 'input-slider',
             }}
           />
-          <IconButton aria-label={t('decreaseSpacing')} onClick={increaseSpacing}>
+          <IconButton
+            aria-label={t('increaseSpacing')}
+            onClick={increaseSpacing}
+            disabled={spacingUnit === maxSpacing}
+          >
             <IncreaseIcon />
           </IconButton>
         </Grid>

diff --git a/packages/mui-material/src/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js
@@ -181,7 +181,7 @@ export function generateRowGap({ theme, ownerState }) {
         };
       }
 
-      if (zeroValueBreakpointKeys.includes(breakpoint)) {
+      if (zeroValueBreakpointKeys?.includes(breakpoint)) {
         return {};
       }
 
@@ -227,7 +227,7 @@ export function generateColumnGap({ theme, ownerState }) {
         };
       }
 
-      if (zeroValueBreakpointKeys.includes(breakpoint)) {
+      if (zeroValueBreakpointKeys?.includes(breakpoint)) {
         return {};
       }
 

diff --git a/packages/mui-material/src/Grid/Grid.test.js b/packages/mui-material/src/Grid/Grid.test.js
@@ -689,6 +689,25 @@ describe('Material UI <Grid />', () => {
         'Warning: Failed prop type: The prop `spacing` of `Grid` can only be used together with the `container` prop.',
       );
     });
+
+    it('should not throw error for setting zero spacing in theme', () => {
+      const theme = createTheme({ spacing: 0 });
+
+      const App = () => {
+        return (
+          <ThemeProvider theme={theme}>
+            <Grid container spacing={4}>
+              <Grid item>test</Grid>
+              <Grid item>test</Grid>
+            </Grid>
+          </ThemeProvider>
+        );
+      };
+
+      expect(() => {
+        render(<App />);
+      }).not.to.throw();
+    });
   });
 
   describe('prop: rowSpacing, columnSpacing', () => {