diff --git a/.changeset/afraid-dolls-visit.md b/.changeset/afraid-dolls-visit.md
new file mode 100644
index 00000000000..a0cf17c051b
--- /dev/null
+++ b/.changeset/afraid-dolls-visit.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+TileGrid renders Tiles in a
, wrapping each Tile in an -
diff --git a/packages/components/src/Tile/TileGrid/TileGrid.module.scss b/packages/components/src/Tile/TileGrid/TileGrid.module.scss
index d30c1948a3f..3d5b7dea070 100644
--- a/packages/components/src/Tile/TileGrid/TileGrid.module.scss
+++ b/packages/components/src/Tile/TileGrid/TileGrid.module.scss
@@ -3,6 +3,7 @@
@import '../subcomponents/GenericTile/variables';
.grid {
+ list-style-type: none;
display: grid;
// the more we shave off the width here,
// the less the tiles will grow when they lose one from the row
diff --git a/packages/components/src/Tile/TileGrid/TileGrid.tsx b/packages/components/src/Tile/TileGrid/TileGrid.tsx
index 351e73de995..cdb6672cb8f 100644
--- a/packages/components/src/Tile/TileGrid/TileGrid.tsx
+++ b/packages/components/src/Tile/TileGrid/TileGrid.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, ReactElement } from 'react'
+import React, { HTMLAttributes, ReactElement, ReactNode } from 'react'
import classnames from 'classnames'
import { OverrideClassName } from '~components/types/OverrideClassName'
import { InformationTileProps } from '../InformationTile'
@@ -9,7 +9,7 @@ type TileProps = InformationTileProps | MultiActionTileProps
export type TileElement = ReactElement
-export interface TileGridProps extends OverrideClassName> {
+export interface TileGridProps extends OverrideClassName> {
children: TileElement[] | TileElement
}
@@ -21,10 +21,35 @@ export const TileGrid = ({
children,
classNameOverride,
...restProps
-}: TileGridProps): JSX.Element => (
-
- {children}
-
-)
+}: TileGridProps): JSX.Element => {
+ const isFragment = !Array.isArray(children) && children.type === React.Fragment
+ return (
+
+ {isFragment ? (
+ children?.props?.children ? (
+
+ ) : null
+ ) : (
+
+ )}
+
+ )
+}
TileGrid.displayName = 'TileGrid'
+
+type TileListItemProps = { tiles: ReactNode }
+
+const TileListItem = ({ tiles }: TileListItemProps): JSX.Element => {
+ if (Array.isArray(tiles)) {
+ return (
+ <>
+ {tiles.map((tile: TileElement, index) => (
+ - {tile}
+ ))}
+ >
+ )
+ }
+
+ return - {tiles}
+}
diff --git a/packages/components/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx b/packages/components/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx
index 59fedc60ee6..caf5e90d692 100644
--- a/packages/components/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx
+++ b/packages/components/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx
@@ -105,6 +105,46 @@ const StickerSheetTemplate: StickerSheetStory = {
/>
+
+
+ Footer>}
+ />
+
+
+
+
+ <>
+ Footer>}
+ />
+ Footer>}
+ />
+ Footer>}
+ />
+ Footer>}
+ />
+ >
+
+
),
}
diff --git a/packages/components/src/Tile/TileGrid/_docs/TileGrid.stories.tsx b/packages/components/src/Tile/TileGrid/_docs/TileGrid.stories.tsx
index 507057ad1d2..90ec0d8a346 100644
--- a/packages/components/src/Tile/TileGrid/_docs/TileGrid.stories.tsx
+++ b/packages/components/src/Tile/TileGrid/_docs/TileGrid.stories.tsx
@@ -47,7 +47,6 @@ export const Playground: Story = {
},
}
-// Test for multiple tiles, flipping one doesn't flip others
export const FlipOneNotOthers: Story = {
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement)
@@ -78,3 +77,81 @@ export const FlipOneNotOthers: Story = {
})
},
}
+
+export const OneTile: Story = {
+ args: {
+ children: (
+ Footer>}
+ />
+ ),
+ },
+ play: async ({ canvasElement, step }) => {
+ const canvas = within(canvasElement)
+
+ await step('Tile renders as - ', async () => {
+ await waitFor(() => {
+ expect(canvas.getByRole('listitem')).toBeInTheDocument()
+ })
+ })
+ },
+}
+
+export const MultipleTiles: Story = {
+ render: () => {
+ return (
+
+ Footer>}
+ />
+ Footer>}
+ />
+ Footer>}
+ />
+
+ )
+ },
+ play: async ({ canvasElement, step }) => {
+ const canvas = within(canvasElement)
+
+ await step('All Tiles marked up as individual
- elements', async () => {
+ await waitFor(() => {
+ const listOfTiles = canvas.getByRole('list')
+ const { getAllByRole } = within(listOfTiles)
+ const tiles = getAllByRole('listitem')
+
+ expect(tiles.length).toBe(3)
+ })
+ })
+ },
+}
+
+export const Fragment: Story = {
+ play: async ({ canvasElement, step }) => {
+ const canvas = within(canvasElement)
+
+ await step('All Tiles marked up as individual
- elements', async () => {
+ await waitFor(() => {
+ const listOfTiles = canvas.getByRole('list')
+ const { getAllByRole } = within(listOfTiles)
+ const tiles = getAllByRole('listitem')
+
+ expect(tiles.length).toBe(3)
+ })
+ })
+ },
+}