feat(box, style-props): enable css grid style props

.changeset/beige-plums-wonder.md

@@ -0,0 +1,7 @@
+---
+'@twilio-paste/box': minor
+'@twilio-paste/style-props': minor
+'@twilio-paste/core': minor
+---
+
+[box, style-props] Enable CSS Grid on Box by adding all the requisite style props to the Box component.

packages/paste-core/primitives/box/__tests__/box.test.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import {render, screen} from '@testing-library/react';
 import {CustomizationProvider} from '@twilio-paste/customization';
 import {Box} from '../src';
@@ -384,6 +383,44 @@ describe('Spaces', () => {
   });
 });
 
+describe('Grid CSS', () => {
+  it('handles css grid style props', (): void => {
+    render(
+      <CustomizationProvider baseTheme="default" theme={TestTheme}>
+        <Box
+          display="grid"
+          gridColumn="1 / span 2"
+          gridRow="1 / span 3"
+          gridAutoFlow="column"
+          gridAutoRows={['100px', '150px']}
+          gridAutoColumns="160px"
+          gridArea="2 / 1 / span 2 / span 3"
+          gridTemplateColumns="min-content"
+          gridTemplateRows="max-content"
+          gridTemplateAreas="myArea myArea2"
+        >
+          Grid test
+        </Box>
+      </CustomizationProvider>
+    );
+
+    const renderedBox = screen.getByText('Grid test');
+    expect(renderedBox).toHaveStyleRule('display', 'grid');
+    expect(renderedBox).toHaveStyleRule('grid-column', '1/span 2');
+    expect(renderedBox).toHaveStyleRule('grid-row', '1/span 3');
+    expect(renderedBox).toHaveStyleRule('grid-auto-flow', 'column');
+    expect(renderedBox).toHaveStyleRule('grid-auto-rows', '100px');
+    expect(renderedBox).toHaveStyleRule('grid-auto-rows', '150px', {
+      media: 'screen and (min-width:25rem)',
+    });
+    expect(renderedBox).toHaveStyleRule('grid-auto-columns', '160px');
+    expect(renderedBox).toHaveStyleRule('grid-area', '2/1/span 2/span 3');
+    expect(renderedBox).toHaveStyleRule('grid-template-columns', 'min-content');
+    expect(renderedBox).toHaveStyleRule('grid-template-rows', 'max-content');
+    expect(renderedBox).toHaveStyleRule('grid-template-areas', 'myArea myArea2');
+  });
+});
+
 describe('Shadows', () => {
   it('should render single values', (): void => {
     render(

packages/paste-core/primitives/box/src/SafelySpreadProps.ts

@@ -6,6 +6,7 @@ import {
   SHADOW_PROPS,
   POSITION_PROPS,
   FLEXBOX_PROPS,
+  GRID_PROPS,
   TYPOGRAPHY_PROPS,
 } from '@twilio-paste/style-props';
 import {PseudoPropStyles} from './PseudoPropStyles';
@@ -18,6 +19,7 @@ export const BOX_PROPS_TO_BLOCK = [
   ...SHADOW_PROPS,
   ...POSITION_PROPS,
   ...FLEXBOX_PROPS,
+  ...GRID_PROPS,
   ...TYPOGRAPHY_PROPS,
   ...Object.keys(PseudoPropStyles),
   'className',

packages/paste-core/primitives/box/src/index.tsx

@@ -10,6 +10,7 @@ import {
   boxShadow,
   position,
   flexbox,
+  grid,
   createShouldForwardProp,
   props as defaultStylingProps,
 } from '@twilio-paste/styling-library';
@@ -38,7 +39,7 @@ export const StyledBox = styled('div', {shouldForwardProp})<StyledBoxProps>(
   {
     boxSizing: 'border-box',
   },
-  compose(space, layout, flexbox, background, border, boxShadow, position, typography, PasteStyleProps),
+  compose(space, layout, flexbox, grid, background, border, boxShadow, position, typography, PasteStyleProps),
   getPseudoStyles,
   getCustomElementStyles
 ) as unknown as StyledComponent<

packages/paste-core/primitives/box/src/types.ts

@@ -2,6 +2,7 @@ import type {
   BackgroundProps,
   BorderProps,
   FlexboxProps,
+  GridProps,
   LayoutProps,
   PositionProps,
   ShadowProps,
@@ -39,7 +40,8 @@ export interface BoxBaseStyleProps
     ShadowProps,
     PositionProps,
     TypographyProps,
-    FlexboxProps {
+    FlexboxProps,
+    GridProps {
   animation?: AnimationProperty;
   appearance?: AppearanceProperty;
   boxSizing?: BoxSizingProperty;

packages/paste-style-props/src/grid.ts

@@ -0,0 +1,11 @@
+export const GRID_PROPS = [
+  'gridColumn',
+  'gridRow',
+  'gridAutoFlow',
+  'gridAutoColumns',
+  'gridAutoRows',
+  'gridTemplateColumns',
+  'gridTemplateRows',
+  'gridTemplateAreas',
+  'gridArea',
+];

packages/paste-style-props/src/index.ts

@@ -1,6 +1,7 @@
 export * from './background';
 export * from './border';
 export * from './flexbox';
+export * from './grid';
 export * from './layout';
 export * from './position';
 export * from './shadow';

packages/paste-style-props/src/types/grid.ts

@@ -0,0 +1,41 @@
+// https://styled-system.com/api/#grid-layout
+/* NOTE:
+ * `gridGap`, `gridColumnGap`, `gridRowGap` are excluded as
+ * `rowGap` and `columnGap` are already defined elsewhere and used
+ * in our system
+ */
+import type {Properties} from 'csstype';
+import type {ResponsiveValue} from '@twilio-paste/styling-library';
+
+// CSS native
+export type GridRowOptions = Properties['gridRow'];
+export type GridColumnOptions = Properties['gridColumn'];
+export type GridAutoFlowOptions = Properties['gridAutoFlow'];
+export type GridAutoColumnsOptions = Properties['gridAutoColumns'];
+export type GridAutoRowsOptions = Properties['gridAutoRows'];
+export type GridTemplateColumnsOptions = Properties['gridTemplateColumns'];
+export type GridTemplateRowsOptions = Properties['gridTemplateRows'];
+export type GridTemplateAreasOptions = Properties['gridTemplateAreas'];
+export type GridAreaOptions = Properties['gridArea'];
+
+export type GridRow = ResponsiveValue<GridRowOptions>;
+export type GridColumn = ResponsiveValue<GridColumnOptions>;
+export type GridAutoFlow = ResponsiveValue<GridAutoFlowOptions>;
+export type GridAutoColumns = ResponsiveValue<GridAutoColumnsOptions>;
+export type GridAutoRows = ResponsiveValue<GridAutoRowsOptions>;
+export type GridTemplateColumns = ResponsiveValue<GridTemplateColumnsOptions>;
+export type GridTemplateRows = ResponsiveValue<GridTemplateRowsOptions>;
+export type GridTemplateAreas = ResponsiveValue<GridTemplateAreasOptions>;
+export type GridArea = ResponsiveValue<GridAreaOptions>;
+
+export interface GridProps {
+  gridRow?: GridRow;
+  gridColumn?: GridColumn;
+  gridAutoFlow?: GridAutoFlow;
+  gridAutoColumns?: GridAutoColumns;
+  gridAutoRows?: GridAutoRows;
+  gridTemplateColumns?: GridTemplateColumns;
+  gridTemplateRows?: GridTemplateRows;
+  gridTemplateAreas?: GridTemplateAreas;
+  gridArea?: GridArea;
+}

packages/paste-style-props/src/types/index.ts

@@ -1,6 +1,7 @@
 export * from './background';
 export * from './border';
 export * from './flexbox';
+export * from './grid';
 export * from './layout';
 export * from './position';
 export * from './css-props';