[@mantine/core] Grid: Fix offset and order responsive props (mantined…

…ev#2163)
nmay231 · Aug 22, 2022 · 898c5aa · 898c5aa
1 parent 863cb31
commit 898c5aa
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/src/mantine-core/src/Grid/Col/Col.styles.ts b/src/mantine-core/src/Grid/Col/Col.styles.ts
@@ -50,15 +50,17 @@ function getBreakpointsStyles({
   columns: number;
 }) {
   return MANTINE_SIZES.reduce((acc, size) => {
-    if (typeof sizes[size] === 'number') {
-      acc[`@media (min-width: ${theme.breakpoints[size] + 1}px)`] = {
-        order: orders[size],
-        flexBasis: getColumnWidth(sizes[size], columns),
-        flexShrink: 0,
-        maxWidth: grow ? 'unset' : getColumnWidth(sizes[size], columns),
-        marginLeft: getColumnOffset(offsets[size], columns),
-      };
-    }
+    acc[`@media (min-width: ${theme.breakpoints[size] + 1}px)`] = {
+      order: orders[size],
+      flexBasis: typeof sizes[size] === 'number' ? getColumnWidth(sizes[size], columns) : 'auto',
+      flexShrink: 0,
+      maxWidth: grow
+        ? 'unset'
+        : typeof sizes[size] === 'number'
+        ? getColumnWidth(sizes[size], columns)
+        : 'none',
+      marginLeft: getColumnOffset(offsets[size], columns),
+    };
     return acc;
   }, {});
 }

diff --git a/src/mantine-demos/src/demos/core/Grid/Grid.demo.order.tsx b/src/mantine-demos/src/demos/core/Grid/Grid.demo.order.tsx
@@ -8,9 +8,9 @@ import { Grid } from '@mantine/core';
 function Demo() {
   return (
     <Grid>
-      <Col span={3} order={2} orderSm={1} orderLg={3}>2</Col>
-      <Col span={3} order={3} orderSm={1} orderLg={2}>3</Col>
-      <Col span={3} order={1} orderSm={3} orderLg={1}>1</Col>
+      <Grid.Col span={3} order={2} orderSm={1} orderLg={3}>2</Grid.Col>
+      <Grid.Col span={3} order={3} orderSm={1} orderLg={2}>3</Grid.Col>
+      <Grid.Col span={3} order={1} orderSm={3} orderLg={1}>1</Grid.Col>
     </Grid>
   );
 }