Update Grid component

Signed-off-by: Charles de Dreuille <[email protected]>
autodesk-forks · Dec 19, 2024 · 58ecccb · 58ecccb
1 parent 9164389
commit 58ecccb
Show file tree

Hide file tree

Showing 12 changed files with 491 additions and 88 deletions.
diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
@@ -61,6 +61,20 @@ export const Default: Story = {
   ),
 };
 
+export const Test: Story = {
+  args: {
+    columns: 12,
+    gap: 'md',
+  },
+  render: args => (
+    <Grid {...args}>
+      <FakeBox />
+      <FakeBox />
+      <FakeBox />
+    </Grid>
+  ),
+};
+
 export const LargeGap: Story = {
   args: {
     gap: 'lg',

diff --git a/packages/canon/src/components/Grid/Grid.tsx b/packages/canon/src/components/Grid/Grid.tsx
@@ -16,62 +16,54 @@
 
 import { createElement, forwardRef } from 'react';
 import { GridItemProps, GridProps } from './types';
-import { gridItemSprinkles, gridSprinkles } from './sprinkles.css';
+import { getClassNames } from '../../utils/getClassNames';
 
 const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const {
     children,
-    columns,
     gap = 'xs',
+    columns = 'auto',
     className,
     style,
     ...restProps
   } = props;
 
-  const sprinklesClassName = gridSprinkles({
-    ...restProps,
-    gap,
-    gridTemplateColumns: columns ? columns : 'auto',
-  });
+  const utilityClassNames = getClassNames({ gap, columns, ...restProps });
 
-  const classNames = ['grid', sprinklesClassName, className]
+  const classNames = ['canon-grid', utilityClassNames, className]
     .filter(Boolean)
     .join(' ');
 
-  return createElement(
-    'div',
-    {
-      ref,
-      className: classNames,
-      style,
-    },
+  return createElement('div', {
+    ref,
+    className: classNames,
+    style,
     children,
-  );
+  });
 });
 
 const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
-  const { children, rowSpan, colSpan, start, end, className, style } = props;
+  const { children, className, style, ...restProps } = props;
 
-  const sprinklesClassName = gridItemSprinkles({
-    rowSpan,
-    colSpan,
-    start,
-    end,
-  });
+  const utilityClassNames = getClassNames(restProps);
 
-  const classNames = ['grid-item', sprinklesClassName, className]
+  // const sprinklesClassName = gridItemSprinkles({
+  //   rowSpan,
+  //   colSpan,
+  //   start,
+  //   end,
+  // });
+
+  const classNames = ['grid-item', utilityClassNames, className]
     .filter(Boolean)
     .join(' ');
 
-  return createElement(
-    'div',
-    {
-      ref,
-      className: classNames,
-      style,
-    },
+  return createElement('div', {
+    ref,
+    className: classNames,
+    style,
     children,
-  );
+  });
 });
 
 /** @public */

diff --git a/packages/canon/src/components/Grid/styles.css b/packages/canon/src/components/Grid/styles.css
@@ -1,3 +1,3 @@
-.grid {
+.canon-grid {
   display: grid;
 }
diff --git a/packages/canon/src/components/Grid/types.ts b/packages/canon/src/components/Grid/types.ts
@@ -13,27 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ColorProps } from '../../layout/types';
-import { SpaceProps } from '../../layout/types';
-import type { Breakpoint } from '../../types';
-/** @public */
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+import type { UtilityProps, SpaceProps } from '../../types';
 
 /** @public */
-export interface GridProps extends SpaceProps, ColorProps {
+export interface GridProps extends SpaceProps {
   children?: React.ReactNode;
-  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
   className?: string;
+  columns?: UtilityProps['columns'];
+  gap?: UtilityProps['gap'];
   style?: React.CSSProperties;
 }
 
 /** @public */
 export interface GridItemProps {
   children: React.ReactNode;
-  rowSpan?: Columns | 'full';
-  colSpan?: Columns | 'full';
-  start?: Columns | 'auto';
-  end?: Columns | 'auto';
   className?: string;
+  colSpan?: UtilityProps['colSpan'];
+  colEnd?: UtilityProps['colEnd'];
+  colStart?: UtilityProps['colStart'];
+  rowSpan?: UtilityProps['rowSpan'];
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
@@ -612,5 +612,57 @@
     .cu-2xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-2xl-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
@@ -612,5 +612,57 @@
     .cu-lg-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-lg-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
@@ -612,5 +612,57 @@
     .cu-md-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-md-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
@@ -612,5 +612,57 @@
     .cu-sm-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-sm-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }