Merge pull request #3812 from Sage/FE-3546_update_styled_system_imple…

…mentation_for_grid feat(grid-container): use prop-types from styled-system
Sage · Apr 16, 2021 · 290556c · 290556c
2 parents 20336b7 + 303d539
commit 290556c
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 159 deletions.
diff --git a/src/components/grid/__snapshots__/grid.spec.js.snap b/src/components/grid/__snapshots__/grid.spec.js.snap
@@ -12,32 +12,32 @@ exports[`Grid GridItem builds the style rules for the GridItem with custom align
 
 .c1 {
   margin: 0;
+  justify-self: left;
   -webkit-align-self: start;
   -ms-flex-item-align: start;
   align-self: start;
-  justify-self: left;
-  grid-column: 1 / 13;
   grid-row: auto;
+  grid-column: 1 / 13;
 }
 
 .c2 {
   margin: 0;
+  justify-self: center;
   -webkit-align-self: start;
   -ms-flex-item-align: start;
   align-self: start;
-  justify-self: center;
-  grid-column: 1 / 13;
   grid-row: auto;
+  grid-column: 1 / 13;
 }
 
 .c3 {
   margin: 0;
+  justify-self: right;
   -webkit-align-self: start;
   -ms-flex-item-align: start;
   align-self: start;
-  justify-self: right;
-  grid-column: 1 / 13;
   grid-row: auto;
+  grid-column: 1 / 13;
 }
 
 @media screen and (max-width:1920px) {
@@ -68,6 +68,7 @@ exports[`Grid GridItem builds the style rules for the GridItem with custom align
 <div
   className="c0"
   data-component="grid"
+  id="testContainer"
 >
   <div
     className="c1"
@@ -99,20 +100,20 @@ exports[`Grid GridItem builds the style rules for the GridItem with responsiveSe
 
 .c1 {
   margin: 0;
-  grid-column: 1 / 13;
   grid-row: auto;
+  grid-column: 1 / 13;
 }
 
 .c2 {
   margin: 0;
-  grid-column: 1 / 13;
   grid-row: auto;
+  grid-column: 1 / 13;
 }
 
 .c3 {
   margin: 0;
-  grid-column: 1 / 13;
   grid-row: auto;
+  grid-column: 1 / 13;
 }
 
 @media screen and (max-width:1920px) {
@@ -242,6 +243,7 @@ exports[`Grid GridItem builds the style rules for the GridItem with responsiveSe
 <div
   className="c0"
   data-component="grid"
+  id="testContainer"
 >
   <div
     className="c1"

diff --git a/src/components/grid/grid-container/grid-container.component.js b/src/components/grid/grid-container/grid-container.component.js
@@ -1,30 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
+import propTypes from "@styled-system/prop-types";
 import GridContainerStyle from "./grid-container.style";
 import GridItem from "../grid-item";
 
 const GridContainer = (props) => {
-  const { children, p, pl, pr, pt, pb, px, py, gridGap } = props;
-
-  const styledSystemProps = {
-    p,
-    pl,
-    pr,
-    pt,
-    pb,
-    gridGap,
-  };
-
-  if (px) {
-    styledSystemProps.px = px;
-  }
-
-  if (py) {
-    styledSystemProps.py = py;
-  }
-
+  const { children, ...rest } = props;
   return (
-    <GridContainerStyle data-component="grid" {...styledSystemProps}>
+    <GridContainerStyle data-component="grid" {...rest}>
       {children}
     </GridContainerStyle>
   );
@@ -38,27 +21,7 @@ GridContainer.propTypes = {
   /** Defines the Components to be rendered within the GridContainer. Requires a GridItem */
   children: PropTypes.oneOfType([gridItemType, PropTypes.arrayOf(gridItemType)])
     .isRequired,
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding */
-  p: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-left */
-  pl: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-right */
-  pr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-top */
-  pt: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-bottom */
-  pb: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Any valid CSS value or a number to be multiplied by base spacing unit (8).
-   * Overrides default horizontal paddings
-   * */
-  px: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Any valid CSS value or a number to be multiplied by base spacing unit (8).
-   * Overrides default vertical paddings
-   * */
-  py: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Any valid CSS value to override default grid-gap */
-  gridGap: PropTypes.string,
+  ...propTypes.space,
+  gridGap: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 export default GridContainer;
diff --git a/src/components/grid/grid-container/grid-container.style.js b/src/components/grid/grid-container/grid-container.style.js
@@ -28,8 +28,7 @@ const GridContainerStyle = styled.div`
 
   @media screen {
     ${space}
-    ${grid}
-  }
+    ${({ gridGap }) => grid({ gridGap })}
 `;
 
 export default GridContainerStyle;
diff --git a/src/components/grid/grid-container/index.d.ts b/src/components/grid/grid-container/index.d.ts
@@ -1,30 +1,12 @@
+import propTypes from "@styled-system/space";
 import { GridItemProps } from "../grid-item";
+import { SpacingProps } from "../../../utils/helpers/options-helper";
 
-export interface GridContainerProps {
+export interface GridContainerProps extends SpacingProps {
   /** Defines the Components to be rendered within the GridContainer. Requires GridItemProps */
   children: Array<React.ReactElement<GridItemProps>> | React.ReactElement<GridItemProps>;
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding */
-  p?: string | number;
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-left */
-  pl?: string | number;
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-right */
-  pr?: string | number;
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-top */
-  pt?: string | number;
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-bottom */
-  pb?: string | number;
-  /**
-   * Any valid CSS value or a number to be multiplied by base spacing unit (8).
-   * Overrides default horizontal paddings
-   */
-  px?: string | number;
-  /**
-   * Any valid CSS value or a number to be multiplied by base spacing unit (8).
-   * Overrides default vertical paddings
-   */
-  py?: string | number;
   /** Any valid CSS value to override default grid-gap */
-  gridGap?: string;
+  gridGap?: string | number;
 }
 
 declare const GridContainer: React.FunctionComponent<GridContainerProps>;

diff --git a/src/components/grid/grid-item/grid-item.component.js b/src/components/grid/grid-item/grid-item.component.js
@@ -1,55 +1,23 @@
 /* eslint-disable max-len */
 import React from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import GridItemStyle from "./grid-item.style";
+import { filterStyledSystemPaddingProps } from "../../../style/utils";
 
 const GridItem = (props) => {
-  const {
-    children,
-    responsiveSettings,
-    gridColumn,
-    gridRow,
-    alignSelf,
-    justifySelf,
-    p,
-    pl,
-    pr,
-    pt,
-    pb,
-    px,
-    py,
-  } = props;
-
-  const styledSystemProps = {
-    gridColumn,
-    gridRow,
-    alignSelf,
-    justifySelf,
-    p,
-    pl,
-    pr,
-    pt,
-    pb,
-  };
-
-  if (px) {
-    styledSystemProps.px = px;
-  }
-
-  if (py) {
-    styledSystemProps.py = py;
-  }
-
+  const { children, responsiveSettings, ...rest } = props;
   return (
-    <GridItemStyle
-      responsiveSettings={responsiveSettings}
-      {...styledSystemProps}
-    >
+    <GridItemStyle responsiveSettings={responsiveSettings} {...rest}>
       {children}
     </GridItemStyle>
   );
 };
 
+const paddingPropTypes = filterStyledSystemPaddingProps(
+  styledSystemPropTypes.space
+);
+
 GridItem.propTypes = {
   /** Defines the Component(s) to be rendered within the GridItem */
   children: PropTypes.node,
@@ -61,20 +29,7 @@ GridItem.propTypes = {
   gridRow: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /** How the grid item is aligned along the inline (row) axis. Values: start, end, center, stretch */
   justifySelf: PropTypes.string,
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding */
-  p: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-left */
-  pl: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-right */
-  pr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-top */
-  pt: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-bottom */
-  pb: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default horizontal paddings */
-  px: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default vertical paddings */
-  py: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  ...paddingPropTypes,
   responsiveSettings: PropTypes.arrayOf(
     PropTypes.shape({
       /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
@@ -87,16 +42,7 @@ GridItem.propTypes = {
       justifySelf: PropTypes.string,
       /** Maximum width of the item */
       maxWidth: PropTypes.string,
-      /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding */
-      p: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-left */
-      pl: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-right */
-      pr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-top */
-      pt: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      /** Any valid CSS value or a number to be multiplied by base spacing unit (8). Overrides default padding-bottom */
-      pb: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      ...paddingPropTypes,
     })
   ),
 };

diff --git a/src/components/grid/grid-item/grid-item.style.js b/src/components/grid/grid-item/grid-item.style.js
@@ -1,7 +1,10 @@
 import styled, { css } from "styled-components";
-import { space, grid, flexbox } from "styled-system";
+import { grid, flexbox } from "styled-system";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import { padding } from "@styled-system/space";
 import PropTypes from "prop-types";
 import { baseTheme } from "../../../style/themes";
+import { filterStyledSystemPaddingProps } from "../../../style/utils";
 
 function responsiveGridItem(responsiveSettings, theme) {
   return responsiveSettings.map((setting) => {
@@ -42,12 +45,18 @@ function getSpacing(prop, theme) {
   return prop;
 }
 
+const paddingPropTypes = filterStyledSystemPaddingProps(
+  styledSystemPropTypes.space
+);
+
 const GridItemStyle = styled.div`
   margin: 0;
 
-  ${flexbox}
-  ${space}
-  ${grid}
+  ${({ justifySelf }) => flexbox({ justifySelf })}
+  ${({ alignSelf }) => flexbox({ alignSelf })}
+  ${padding}
+  ${({ gridRow }) => grid({ gridRow })}
+  ${({ gridColumn }) => grid({ gridColumn })}
   ${({ responsiveSettings, theme }) =>
     responsiveSettings &&
     css`
@@ -60,25 +69,15 @@ GridItemStyle.propTypes = {
   gridColumn: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   gridRow: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   justifySelf: PropTypes.string,
-  p: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  pl: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  pr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  pt: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  pb: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  px: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  py: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  ...paddingPropTypes,
   responsiveSettings: PropTypes.arrayOf(
     PropTypes.shape({
       alignSelf: PropTypes.string,
       gridColumn: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
       gridRow: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
       justifySelf: PropTypes.string,
       maxWidth: PropTypes.string,
-      p: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      pl: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      pr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      pt: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      pb: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      ...paddingPropTypes,
     })
   ),
 };

diff --git a/src/components/grid/grid.stories.mdx b/src/components/grid/grid.stories.mdx
@@ -5,6 +5,7 @@ import Pod from "../pod";
 import { GridContainer, GridItem } from ".";
 import { Dl, Dt, Dd } from "../definition-list";
 import Button from "../button";
+import StyledSystemProps from "../../../.storybook/utils/styled-system-props";
 
 <Meta title="Design System/Grid" parameters={{ chromatic: { disable: true }}}/>
 
@@ -412,11 +413,11 @@ This example is best viewed in the Canvas tab using full-screen mode with device
 
 ## Props
 
-### GridContainer 
-<Props of={GridContainer} />
+<StyledSystemProps of={GridContainer} spacing />
 
-### GridItem 
-<Props of={GridItem} />
+## GridItem Props
+
+<StyledSystemProps of={GridItem} padding />
 
 ### responsiveSettings
 <ArgsTable