[Grid] Refactor

mui · Nov 30, 2021 · d7069b2 · d7069b2
1 parent c47d11c
commit d7069b2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/mui-material/src/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js
@@ -175,13 +175,16 @@ export function generateColumnGap({ theme, ownerState }) {
   return styles;
 }
 
-export function getSpacingStyles(spacing, container, styles = {}) {
-  if (!container || !spacing) {
+export function resolveSpacingClasses(spacing, container, styles = {}) {
+  // in case of grid item or `spacing` <= 0
+  if (!container || spacing <= 0) {
     return [];
   }
-  if (Number.isNaN(Number(spacing)) === false && Number(spacing) > 0) {
+  // in case of string/number `spacing`
+  if ((typeof spacing === 'string' && !Number.isNaN(Number(spacing))) || typeof spacing === 'number') {
     return [styles[`spacing-xs-${String(spacing)}`] || `spacing-xs-${String(spacing)}`];
   }
+  // in case of object `spacing`
   const { xs, sm, md, lg, xl } = spacing;
 
   return [
@@ -211,7 +214,7 @@ const GridRoot = styled('div', {
       container && styles.container,
       item && styles.item,
       zeroMinWidth && styles.zeroMinWidth,
-      ...getSpacingStyles(spacing, container, styles),
+      ...resolveSpacingClasses(spacing, container, styles),
       direction !== 'row' && styles[`direction-xs-${String(direction)}`],
       wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`],
       xs !== false && styles[`grid-xs-${String(xs)}`],
@@ -263,7 +266,7 @@ const useUtilityClasses = (ownerState) => {
       container && 'container',
       item && 'item',
       zeroMinWidth && 'zeroMinWidth',
-      ...getSpacingStyles(spacing, container),
+      ...resolveSpacingClasses(spacing, container),
       direction !== 'row' && `direction-xs-${String(direction)}`,
       wrap !== 'wrap' && `wrap-xs-${String(wrap)}`,
       xs !== false && `grid-xs-${String(xs)}`,

diff --git a/packages/mui-material/src/Grid/Grid.test.js b/packages/mui-material/src/Grid/Grid.test.js
@@ -165,6 +165,7 @@ describe('<Grid />', () => {
         paddingLeft: '12px',
       });
     });
+
     it('should not support undefined values', () => {
       const { container } = render(
         <Grid container>
@@ -173,6 +174,7 @@ describe('<Grid />', () => {
       );
       expect(container.firstChild).not.to.have.class('MuiGrid-spacing-xs-undefined');
     });
+
     it('should not support zero values', () => {
       const { container } = render(
         <Grid container spacing={0}>
@@ -181,6 +183,7 @@ describe('<Grid />', () => {
       );
       expect(container.firstChild).not.to.have.class('MuiGrid-spacing-xs-0');
     });
+
     it('should support object values', () => {
       const { container } = render(
         <Grid container spacing={{ sm: 1.5, md: 2 }}>