fix(Grid): Default to 100% width

Grid now defaults to 100% width so that when it's composed within other layout components (Space / SpaceVertical) it will "fill" its container without developer specify it. Width can be overridden if needed.

Also modernized test coverage (removed snapshots, specifically tested CSS conditions)

Author: Luke Bowerman

packages/components/src/Layout/Grid/Grid.test.tsx

@@ -26,38 +26,52 @@
 
 import 'jest-styled-components'
 import React from 'react'
-import { assertSnapshot } from '@looker/components-test-utils'
+import { renderWithTheme } from '@looker/components-test-utils'
+import { screen } from '@testing-library/react'
 import { Grid } from './Grid'
 
-test('Grid default', () => {
-  assertSnapshot(
-    <Grid>
-      <div>🥑</div>
-      <div>🐛</div>
-      <div>🦜</div>
-      <div>🐈</div>
-    </Grid>
-  )
-})
+const content = (
+  <>
+    <div>first</div>
+    <div>second</div>
+    <div>third</div>
+    <div>fourth</div>
+  </>
+)
 
-test('Grid with specified gap', () => {
-  assertSnapshot(
-    <Grid gap="xlarge">
-      <div>🥑</div>
-      <div>🐛</div>
-      <div>🦜</div>
-      <div>🐈</div>
-    </Grid>
-  )
-})
+describe('Grid', () => {
+  test('default', () => {
+    renderWithTheme(<Grid data-testid="grid">{content} </Grid>)
+    expect(screen.getByTestId('grid')).toHaveStyleRule('display', 'grid')
+  })
+
+  test('specified gap', () => {
+    renderWithTheme(
+      <Grid data-testid="grid" gap="xlarge">
+        {content}
+      </Grid>
+    )
+    expect(screen.getByTestId('grid')).toHaveStyleRule('grid-gap', '2rem')
+  })
+
+  test('specified columns', () => {
+    renderWithTheme(
+      <Grid data-testid="grid" columns={4}>
+        {content}
+      </Grid>
+    )
+    expect(screen.getByTestId('grid')).toHaveStyleRule(
+      'grid-template-columns',
+      'repeat(4,minmax(0,1fr))'
+    )
+  })
 
-test('Grid with specified columns', () => {
-  assertSnapshot(
-    <Grid columns={4}>
-      <div>🥑</div>
-      <div>🐛</div>
-      <div>🦜</div>
-      <div>🐈</div>
-    </Grid>
-  )
+  test('specified width', () => {
+    renderWithTheme(
+      <Grid data-testid="grid" width="50%">
+        {content}
+      </Grid>
+    )
+    expect(screen.getByTestId('grid')).toHaveStyleRule('width', '50%')
+  })
 })

packages/components/src/Layout/Grid/Grid.tsx

@@ -37,11 +37,18 @@ export interface GridProps extends SpaceHelperProps {
   columns?: number
 }
 
-export const Grid = styled.div.withConfig({ shouldForwardProp })<GridProps>`
+/**
+ * Grid provides a simple implementation of the CSS Grid.
+ *
+ * By default `Grid` has two columns with a "medium" `gap` between grid cells and "100%" `width`
+ */
+export const Grid = styled.div
+  .withConfig({ shouldForwardProp })
+  .attrs<GridProps>(({ width = '100%' }) => ({ width }))<GridProps>`
   ${simpleLayoutCSS}
 
   display: grid;
   grid-gap: ${({ gap, theme }) => theme.space[gap || defaultGap]};
-  grid-template-columns: ${({ columns }) =>
-    `repeat(${columns || 2}, minmax(0, 1fr))`};
+  grid-template-columns:
+    repeat(${({ columns }) => columns || 2}, minmax(0, 1fr));
 `

packages/components/src/Layout/Grid/__snapshots__/Grid.test.tsx.snap

@@ -8,7 +8,7 @@ storybook: true
 
 ## Default
 
-Out-of-the-box the `Grid` has two columns with a "medium" `gap` between grid cells.
+By default `Grid` has two columns with a "medium" `gap` between grid cells and "100%" `width`
 
 ```jsx
 <Grid>