[@mantine/core] Grid: Add order prop support to Gird.Col (#2143)

* [@mantine/core] Grid: add order prop to Grid.Col

* [@mantine/core] Grid: Added responsive order props to demo

docs/src/docs/core/Grid.mdx

@@ -42,6 +42,12 @@ Set `offset` prop on `Grid.Col` component to create gaps in grid.
 
 <Demo data={GridDemos.offset} />
 
+## Order
+
+Set the `order` prop on `Grid.Col` component to change the order of columns:
+
+<Demo data={GridDemos.order} />
+
 ## Multiple rows
 
 Once children columns span and offset sum exceeds `columns` prop (defaults to 12),

src/mantine-core/src/Grid/Col/Col.styles.ts

@@ -22,6 +22,12 @@ interface ColStyles {
   md: number;
   lg: number;
   xl: number;
+  order: React.CSSProperties['order'];
+  orderXs: React.CSSProperties['order'];
+  orderSm: React.CSSProperties['order'];
+  orderMd: React.CSSProperties['order'];
+  orderLg: React.CSSProperties['order'];
+  orderXl: React.CSSProperties['order'];
 }
 
 const getColumnWidth = (colSpan: number, columns: number) => `${100 / (columns / colSpan)}%`;
@@ -31,19 +37,22 @@ const getColumnOffset = (offset: number, columns: number) =>
 function getBreakpointsStyles({
   sizes,
   offsets,
+  orders,
   theme,
   columns,
   grow,
 }: {
   sizes: Record<MantineSize, number>;
   offsets: Record<MantineSize, number>;
+  orders: Record<MantineSize, React.CSSProperties['order']>;
   grow: boolean;
   theme: MantineTheme;
   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),
@@ -73,11 +82,18 @@ export default createStyles(
       md,
       lg,
       xl,
+      order,
+      orderXs,
+      orderSm,
+      orderMd,
+      orderLg,
+      orderXl,
     }: ColStyles
   ) => ({
     root: {
       boxSizing: 'border-box',
       flexGrow: grow ? 1 : 0,
+      order,
       padding: theme.fn.size({ size: gutter, sizes: theme.spacing }) / 2,
       marginLeft: getColumnOffset(offset, columns),
       flexBasis: getColumnWidth(span, columns),
@@ -86,6 +102,7 @@ export default createStyles(
       ...getBreakpointsStyles({
         sizes: { xs, sm, md, lg, xl },
         offsets: { xs: offsetXs, sm: offsetSm, md: offsetMd, lg: offsetLg, xl: offsetXl },
+        orders: { xs: orderXs, sm: orderSm, md: orderMd, lg: orderLg, xl: orderXl },
         theme,
         columns,
         grow,

src/mantine-core/src/Grid/Col/Col.tsx

@@ -11,6 +11,24 @@ export interface ColProps extends DefaultProps, React.ComponentPropsWithoutRef<'
   /** Column left offset */
   offset?: number;
 
+  /** Default col order */
+  order?: React.CSSProperties['order'];
+
+  /** Col order at (min-width: theme.breakpoints.xs) */
+  orderXs?: React.CSSProperties['order'];
+
+  /** Col order at (min-width: theme.breakpoints.sm) */
+  orderSm?: React.CSSProperties['order'];
+
+  /** Col order at (min-width: theme.breakpoints.md) */
+  orderMd?: React.CSSProperties['order'];
+
+  /** Col order at (min-width: theme.breakpoints.lg) */
+  orderLg?: React.CSSProperties['order'];
+
+  /** Col order at (min-width: theme.breakpoints.xl) */
+  orderXl?: React.CSSProperties['order'];
+
   /** Column left offset at (min-width: theme.breakpoints.xs) */
   offsetXs?: number;
 
@@ -70,6 +88,12 @@ export const Col = forwardRef<HTMLDivElement, ColProps>((props: ColProps, ref) =
     md,
     lg,
     xl,
+    order,
+    orderXs,
+    orderSm,
+    orderMd,
+    orderLg,
+    orderXl,
     className,
     id,
     unstyled,
@@ -97,6 +121,12 @@ export const Col = forwardRef<HTMLDivElement, ColProps>((props: ColProps, ref) =
       md,
       lg,
       xl,
+      order,
+      orderXs,
+      orderSm,
+      orderMd,
+      orderLg,
+      orderXl,
       grow: ctx.grow,
       columns: ctx.columns,
       span: colSpan,

src/mantine-demos/src/demos/core/Grid/Grid.demo.order.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Grid } from '@mantine/core';
+import { ColWrapper as Col } from './_col-wrapper';
+
+const code = `
+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>
+  );
+}
+`;
+
+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>
+  );
+}
+
+export const order: MantineDemo = {
+  type: 'demo',
+  code,
+  component: Demo,
+};

src/mantine-demos/src/demos/core/Grid/index.ts

@@ -1,6 +1,7 @@
 export { usage } from './Grid.demo.usage';
 export { growConfigurator } from './Grid.demo.growConfigurator';
 export { offset } from './Grid.demo.offset';
+export { order } from './Grid.demo.order';
 export { rows } from './Grid.demo.rows';
 export { flexConfigurator } from './Grid.demo.flexConfigurator';
 export { responsive } from './Grid.demo.responsive';