[Grid] Add wrap prop (#159)

mui · Jun 24, 2024 · 78b8d86 · 78b8d86
1 parent 3bbd8f5
commit 78b8d86
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 4 deletions.
diff --git a/apps/pigment-css-vite-app/src/pages/grid.tsx b/apps/pigment-css-vite-app/src/pages/grid.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@pigment-css/react/Box';
-import Grid from '@pigment-css/react/Grid';
+import Grid, { GridProps } from '@pigment-css/react/Grid';
 import { styled } from '@pigment-css/react';
 
 const Item = styled.div`
@@ -264,6 +264,32 @@ function GridDemo10() {
   );
 }
 
+function GridDemo11() {
+  return (
+    <React.Fragment>
+      {['wrap', 'nowrap', 'wrap-reverse'].map((wrap) => (
+        <div key={wrap}>
+          <h3>wrap = {wrap}</h3>
+          <Grid container spacing={3} sx={{ flexGrow: 1 }} wrap={wrap as GridProps['wrap']}>
+            <Grid size={6}>
+              <Item>1</Item>
+            </Grid>
+            <Grid size={6}>
+              <Item>2</Item>
+            </Grid>
+            <Grid size={4}>
+              <Item>3</Item>
+            </Grid>
+            <Grid size={6}>
+              <Item>4</Item>
+            </Grid>
+          </Grid>
+        </div>
+      ))}
+    </React.Fragment>
+  );
+}
+
 const demos = [
   { id: '1', component: GridDemo1 },
   { id: '2', component: GridDemo2 },
@@ -275,6 +301,7 @@ const demos = [
   { id: '8', component: GridDemo8 },
   { id: '9', component: GridDemo9 },
   { id: '10', component: GridDemo10 },
+  { id: '11', component: GridDemo11 },
 ];
 
 export default function InteractiveGrid() {

diff --git a/packages/pigment-css-react/src/Grid.d.ts b/packages/pigment-css-react/src/Grid.d.ts
@@ -15,6 +15,7 @@ type GridBaseProps = {
   rowSpacing?: CssProperty<number | string>;
   size?: CssProperty<number | 'grow' | 'auto'>;
   spacing?: CssProperty<number | string>;
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
 };
 
 declare const Grid: PolymorphicComponent<GridBaseProps>;

diff --git a/packages/pigment-css-react/src/Grid.jsx b/packages/pigment-css-react/src/Grid.jsx
@@ -108,7 +108,6 @@ const GridComponent = styled('div')({
       props: { container: true },
       style: {
         display: 'flex',
-        flexWrap: 'wrap',
         gap: 'var(--Grid-self-row-spacing) var(--Grid-self-column-spacing)',
       },
     },
@@ -126,6 +125,12 @@ const GridComponent = styled('div')({
         marginLeft: 'var(--Grid-self-margin-left)',
       },
     },
+    ...['nowrap', 'wrap-reverse', 'wrap'].map((wrap) => ({
+      props: { wrap, container: true },
+      style: {
+        flexWrap: wrap,
+      },
+    })),
   ],
 });
 
@@ -150,6 +155,7 @@ const Grid = React.forwardRef(function Grid(
     unstable_parent_column_spacing,
     // eslint-disable-next-line react/prop-types
     unstable_parent_row_spacing,
+    wrap = 'wrap',
     ...rest
   },
   ref,
@@ -190,7 +196,7 @@ const Grid = React.forwardRef(function Grid(
     gridAtomicsObj['--Grid-self-margin-left'] = offset;
   }
 
-  const ownerState = { container, size, offset };
+  const ownerState = { container, size, offset, wrap };
 
   const gridClasses = gridAtomics(gridAtomicsObj);
   return (
@@ -304,6 +310,12 @@ process.env.NODE_ENV !== 'production' &&
      * @ignore
      */
     style: PropTypes.object,
+    /**
+     * Defines the `flex-wrap` style property.
+     * It's applied for all screen sizes.
+     * @default 'wrap'
+     */
+    wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
   });
 
 Grid.displayName = 'Grid';

diff --git a/packages/pigment-css-react/tests/Grid/fixtures/Grid.output.css b/packages/pigment-css-react/tests/Grid/fixtures/Grid.output.css
@@ -356,7 +356,6 @@
 }
 .g1i5ygey-1 {
   display: flex;
-  flex-wrap: wrap;
   gap: var(--Grid-self-row-spacing) var(--Grid-self-column-spacing);
 }
 .g1i5ygey-2 {
@@ -367,3 +366,12 @@
 .g1i5ygey-3 {
   margin-left: var(--Grid-self-margin-left);
 }
+.g1i5ygey-4 {
+  flex-wrap: nowrap;
+}
+.g1i5ygey-5 {
+  flex-wrap: wrap-reverse;
+}
+.g1i5ygey-6 {
+  flex-wrap: wrap;
+}
diff --git a/packages/pigment-css-react/tests/Grid/fixtures/Grid.output.js b/packages/pigment-css-react/tests/Grid/fixtures/Grid.output.js
@@ -207,6 +207,27 @@ const GridComponent = /*#__PURE__*/ _styled('div')({
       props: ({ offset }) => offset !== undefined,
       className: 'g1i5ygey-3',
     },
+    {
+      props: {
+        wrap: 'nowrap',
+        container: true,
+      },
+      className: 'g1i5ygey-4',
+    },
+    {
+      props: {
+        wrap: 'wrap-reverse',
+        container: true,
+      },
+      className: 'g1i5ygey-5',
+    },
+    {
+      props: {
+        wrap: 'wrap',
+        container: true,
+      },
+      className: 'g1i5ygey-6',
+    },
   ],
 });
 const Grid = React.forwardRef(function Grid(
@@ -230,6 +251,7 @@ const Grid = React.forwardRef(function Grid(
     unstable_parent_column_spacing,
     // eslint-disable-next-line react/prop-types
     unstable_parent_row_spacing,
+    wrap = 'wrap',
     ...rest
   },
   ref,
@@ -267,6 +289,7 @@ const Grid = React.forwardRef(function Grid(
     container,
     size,
     offset,
+    wrap,
   };
   const gridClasses = gridAtomics(gridAtomicsObj);
   return (
@@ -381,6 +404,12 @@ process.env.NODE_ENV !== 'production' &&
      * @ignore
      */
     style: PropTypes.object,
+    /**
+     * Defines the `flex-wrap` style property.
+     * It's applied for all screen sizes.
+     * @default 'wrap'
+     */
+    wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
   });
 Grid.displayName = 'Grid';
 export default Grid;