Tiles: Migrate to CSS gap

.changeset/cold-bats-act.md

@@ -0,0 +1,24 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - Tiles
+---
+
+**Tiles:** Remove `columns` limit
+
+The `columns` prop was previously limited from 1 to 6.
+With the migration to [CSS Grid] this limit no longer applies.
+
+Note: Responsive values are also still supported, e.g. `columns={{ mobile: 1, tablet: 8 }}`.
+
+**EXAMPLE USAGE:**
+```jsx
+<Tiles columns={8}>
+  ...
+</Tiles>
+```
+
+[CSS Grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid

.changeset/tricky-penguins-search.md

@@ -5,6 +5,7 @@
 ---
 updated:
   - Stack
+  - Tiles
 ---
 
 Migrate to CSS `gap` internally.

packages/braid-design-system/package.json

@@ -190,7 +190,7 @@
     "@capsizecss/vanilla-extract": "^2.0.0",
     "@vanilla-extract/css": "^1.9.2",
     "@vanilla-extract/css-utils": "^0.1.3",
-    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/dynamic": "^2.1.2",
     "@vanilla-extract/sprinkles": "^1.5.1",
     "assert": "^2.0.0",
     "autosuggest-highlight": "^3.3.4",

packages/braid-design-system/src/lib/components/Spread/Spread.screenshots.tsx

@@ -112,15 +112,15 @@ export const screenshots: ComponentScreenshot = {
         <Tiles space="large" columns={3}>
           <Spread direction="vertical" space="large">
             <Placeholder height={60} width={50} />
-            <Placeholder height={20} width={80} />
+            <Placeholder height={20} />
           </Spread>
           <Spread direction="vertical" space="large">
             <Placeholder height={20} width={50} />
-            <Placeholder height={20} width={80} />
+            <Placeholder height={20} />
           </Spread>
           <Spread direction="vertical" space="large">
             <Placeholder height={100} width={50} />
-            <Placeholder height={20} width={80} />
+            <Placeholder height={20} />
           </Spread>
         </Tiles>
       ),

packages/braid-design-system/src/lib/components/Tiles/Tiles.css.ts

@@ -1,24 +1,46 @@
-import { styleVariants } from '@vanilla-extract/css';
-import type { Breakpoint } from '../../css/breakpoints';
+import { createVar, fallbackVar, style } from '@vanilla-extract/css';
 import { responsiveStyle } from '../../css/responsiveStyle';
 
-const columnsWidths = {
-  1: '100%',
-  2: `${100 / 2}%`,
-  3: `${100 / 3}%`,
-  4: `${100 / 4}%`,
-  5: `${100 / 5}%`,
-  6: `${100 / 6}%`,
-} as const;
+const columns = createVar();
+export const mobileColumnsVar = createVar();
+export const tabletColumnsVar = createVar();
+export const desktopColumnsVar = createVar();
+export const wideColumnsVar = createVar();
 
-const makeColumnsAtoms = (breakpoint: Breakpoint) =>
-  styleVariants(
-    columnsWidths,
-    (width) => responsiveStyle({ [breakpoint]: { flex: `0 0 ${width}` } }),
-    `columns_${breakpoint}`,
-  );
-
-export const columnsMobile = makeColumnsAtoms('mobile');
-export const columnsTablet = makeColumnsAtoms('tablet');
-export const columnsDesktop = makeColumnsAtoms('desktop');
-export const columnsWide = makeColumnsAtoms('wide');
+export const tiles = style([
+  {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+  },
+  responsiveStyle({
+    mobile: {
+      vars: {
+        [columns]: mobileColumnsVar,
+      },
+    },
+    tablet: {
+      vars: {
+        [columns]: fallbackVar(tabletColumnsVar, mobileColumnsVar),
+      },
+    },
+    desktop: {
+      vars: {
+        [columns]: fallbackVar(
+          desktopColumnsVar,
+          tabletColumnsVar,
+          mobileColumnsVar,
+        ),
+      },
+    },
+    wide: {
+      vars: {
+        [columns]: fallbackVar(
+          wideColumnsVar,
+          desktopColumnsVar,
+          tabletColumnsVar,
+          mobileColumnsVar,
+        ),
+      },
+    },
+  }),
+]);

packages/braid-design-system/src/lib/components/Tiles/Tiles.playroom.tsx

@@ -2,10 +2,6 @@ import React from 'react';
 import { cleanSpaceValue } from '../../playroom/cleanSpaceValue';
 import { type TilesProps, Tiles as BraidTiles } from './Tiles';
 
-export const Tiles = ({ space, columns, ...restProps }: TilesProps) => (
-  <BraidTiles
-    space={cleanSpaceValue(space) || 'none'}
-    columns={typeof columns === 'boolean' || !columns ? 1 : columns}
-    {...restProps}
-  />
+export const Tiles = ({ space, ...restProps }: TilesProps) => (
+  <BraidTiles space={cleanSpaceValue(space) || 'none'} {...restProps} />
 );

packages/braid-design-system/src/lib/components/Tiles/Tiles.screenshots.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import type { ComponentScreenshot } from 'site/types';
 import { Tiles } from '../';
 import { Placeholder } from '../private/Placeholder/Placeholder';
@@ -29,27 +29,5 @@ export const screenshots: ComponentScreenshot = {
         </Tiles>
       ),
     },
-    {
-      label:
-        'Test - Should flatten fragments (6 tiles should be evenly spaced)',
-      Example: () => (
-        <Tiles space="small" columns={3}>
-          <Fragment>
-            <Placeholder height={40} />
-          </Fragment>
-          <Fragment>
-            <Placeholder height={40} />
-            <Placeholder height={40} />
-          </Fragment>
-          <Fragment>
-            <Fragment>
-              <Placeholder height={40} />
-            </Fragment>
-            <Placeholder height={40} />
-          </Fragment>
-          <Placeholder height={40} />
-        </Tiles>
-      ),
-    },
   ],
 };

packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx

@@ -1,20 +1,21 @@
-import React, { Children } from 'react';
-import flattenChildren from '../../utils/flattenChildren';
+import React from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { Box } from '../Box/Box';
-import type { Space } from '../../css/atoms/atoms';
-import { negativeMargin } from '../../css/negativeMargin/negativeMargin';
-import { resolveResponsiveProp } from '../../utils/resolveResponsiveProp';
-import * as styles from './Tiles.css';
+import type { ResponsiveSpace } from '../../css/atoms/atoms';
 import type { ReactNodeNoStrings } from '../private/ReactNodeNoStrings';
-import type { RequiredResponsiveValue } from '../../css/atoms/sprinkles.css';
 import buildDataAttributes, {
   type DataAttributeMap,
 } from '../private/buildDataAttributes';
+import {
+  type RequiredResponsiveValue,
+  normalizeResponsiveValue,
+} from '../../css/atoms/sprinkles.css';
+import * as styles from './Tiles.css';
 
 export interface TilesProps {
   children: ReactNodeNoStrings;
-  space: RequiredResponsiveValue<Space>;
-  columns: RequiredResponsiveValue<1 | 2 | 3 | 4 | 5 | 6>;
+  space: ResponsiveSpace;
+  columns: RequiredResponsiveValue<number>;
   data?: DataAttributeMap;
 }
 
@@ -24,37 +25,35 @@ export const Tiles = ({
   columns = 1,
   data,
   ...restProps
-}: TilesProps) => (
-  <Box
-    className={negativeMargin('top', space)}
-    {...buildDataAttributes({ data, validateRestProps: restProps })}
-  >
+}: TilesProps) => {
+  /**
+   * Defaulting the normalised column values to empty strings so that when
+   * parsed to strings for `assignInlineVars`, they are correctly omitted
+   * from the style attribute when not defined.
+   *
+   * Without this, `undefined` would be parsed to the string "undefined",
+   * requiring additional logic to omit them manually from the style attribute.
+   */
+  const {
+    mobile: mobileColumns = '',
+    tablet: tabletColumns = '',
+    desktop: desktopColumns = '',
+    wide: wideColumns = '',
+  } = normalizeResponsiveValue(columns);
+
+  return (
     <Box
-      display="flex"
-      flexWrap="wrap"
-      className={negativeMargin('left', space)}
+      gap={space}
+      className={styles.tiles}
+      style={assignInlineVars({
+        [styles.mobileColumnsVar]: String(mobileColumns),
+        [styles.tabletColumnsVar]: String(tabletColumns),
+        [styles.desktopColumnsVar]: String(desktopColumns),
+        [styles.wideColumnsVar]: String(wideColumns),
+      })}
+      {...buildDataAttributes({ data, validateRestProps: restProps })}
     >
-      {Children.map(flattenChildren(children), (child) => (
-        <Box
-          minWidth={0}
-          className={resolveResponsiveProp(
-            columns,
-            styles.columnsMobile,
-            styles.columnsTablet,
-            styles.columnsDesktop,
-            styles.columnsWide,
-          )}
-        >
-          <Box
-            height="full"
-            // This needs to be a separate element to support IE11.
-            paddingTop={space}
-            paddingLeft={space}
-          >
-            {child}
-          </Box>
-        </Box>
-      ))}
+      {children}
     </Box>
-  </Box>
-);
+  );
+};

packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap

@@ -8630,14 +8630,9 @@ exports[`Tiles 1`] = `
   props: {
     children: ReactNodeNoStrings
     columns: 
-        | 1
-        | 2
-        | 3
-        | 4
-        | 5
-        | 6
-        | RequiredConditionalObject<"mobile", "tablet" | "desktop" | "wide", 1 | 2 | 3 | 4 | 5 | 6>
-        | RequiredResponsiveArray<1 | 2 | 3 | 4, 1 | 2 | 3 | 4 | 5 | 6 | null>
+        | RequiredConditionalObject<"mobile", "tablet" | "desktop" | "wide", number>
+        | RequiredResponsiveArray<1 | 2 | 3 | 4, number | null>
+        | number
     data?: DataAttributeMap
     space: 
         | "gutter"