Tiles: Prevent hydration error

seek-oss · Dec 10, 2024 · 0e9cb20 · 0e9cb20
1 parent dfa816f
commit 0e9cb20
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/.changeset/clever-seahorses-yell.md b/.changeset/clever-seahorses-yell.md
@@ -0,0 +1,10 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Tiles
+---
+
+**Tiles**: Optimise layout implementation to prevent hydration error.
diff --git a/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx b/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx
@@ -46,10 +46,10 @@ export const Tiles = ({
       gap={space}
       className={styles.tiles}
       style={assignInlineVars({
-        [styles.mobileColumnsVar]: String(mobileColumns),
-        [styles.tabletColumnsVar]: String(tabletColumns),
-        [styles.desktopColumnsVar]: String(desktopColumns),
-        [styles.wideColumnsVar]: String(wideColumns),
+        [styles.mobileColumnsVar]: String(mobileColumns) || undefined,
+        [styles.tabletColumnsVar]: String(tabletColumns) || undefined,
+        [styles.desktopColumnsVar]: String(desktopColumns) || undefined,
+        [styles.wideColumnsVar]: String(wideColumns) || undefined,
       })}
       {...buildDataAttributes({ data, validateRestProps: restProps })}
     >