[Layout foundations] Add margin and padding props

Co-authored-by: Aaron Casanova <[email protected]>

Author: laurkim

polaris-react/src/components/Box/Box.scss

@@ -1,5 +1,26 @@
 .root {
+  --pc-box-margin: initial;
+  --pc-box-margin-bottom: initial;
+  --pc-box-margin-left: initial;
+  --pc-box-margin-right: initial;
+  --pc-box-margin-top: initial;
+  --pc-box-padding: initial;
+  --pc-box-padding-bottom: initial;
+  --pc-box-padding-left: initial;
+  --pc-box-padding-right: initial;
+  --pc-box-padding-top: initial;
+
   display: block;
+  margin: var(--pc-box-margin);
+  margin-bottom: var(--pc-box-margin-bottom);
+  margin-left: var(--pc-box-margin-left);
+  margin-right: var(--pc-box-margin-right);
+  margin-top: var(--pc-box-margin-top);
+  padding: var(--pc-box-padding);
+  padding-bottom: var(--pc-box-padding-bottom);
+  padding-left: var(--pc-box-padding-left);
+  padding-right: var(--pc-box-padding-right);
+  padding-top: var(--pc-box-padding-top);
 }
 
 .background {

polaris-react/src/components/Box/Box.tsx

@@ -4,6 +4,7 @@ import type * as Polymorphic from '@radix-ui/react-polymorphic';
 import {classNames} from '../../utilities/css';
 
 import styles from './Box.scss';
+import type {spacing} from '@shopify/polaris-tokens';
 
 type Background =
   | 'background'
@@ -44,15 +45,42 @@ type BorderRadius =
 
 type Shadow = 'default' | 'transparent' | 'faint' | 'deep';
 
+type SpacingTokenGroup = typeof spacing;
+type SpacingTokenName = keyof SpacingTokenGroup;
+
+type SpacingTokenScale = SpacingTokenName extends `space-${infer Scale}`
+  ? Scale
+  : never;
+
 interface BoxBaseProps {
   /** Background color of the Box */
   background?: Background;
   /** Border radius of the Box */
   borderRadius?: BorderRadius;
-  /** Shadow on the Box */
-  shadow?: Shadow;
   /** Inner content of the Box */
   children: ReactNode;
+  /** Spacing outside of the Box */
+  margin?: SpacingTokenScale;
+  /** Bottom spacing outside of the Box */
+  marginBottom?: SpacingTokenScale;
+  /** Left side spacing outside of the Box */
+  marginLeft?: SpacingTokenScale;
+  /** Right side spacing outside of the Box */
+  marginRight?: SpacingTokenScale;
+  /** Top spacing outside of the Box */
+  marginTop?: SpacingTokenScale;
+  /** Spacing inside of the Box */
+  padding?: SpacingTokenScale;
+  /** Bottom spacing inside of the Box */
+  paddingBottom?: SpacingTokenScale;
+  /** Left side spacing inside of the Box */
+  paddingLeft?: SpacingTokenScale;
+  /** Right side spacing inside of the Box */
+  paddingRight?: SpacingTokenScale;
+  /** Top spacing inside of the Box */
+  paddingTop?: SpacingTokenScale;
+  /** Shadow on the Box */
+  shadow?: Shadow;
 }
 
 type PolymorphicBox = Polymorphic.ForwardRefComponent<'div', BoxBaseProps>;
@@ -61,9 +89,48 @@ export type BoxProps = Polymorphic.OwnProps<PolymorphicBox>;
 
 export const Box = forwardRef(
   (
-    {as: Component = 'div', background, borderRadius, shadow, children},
+    {
+      as: Component = 'div',
+      background,
+      borderRadius,
+      children,
+      margin,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      marginTop,
+      padding,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      shadow,
+    },
     ref,
   ) => {
+    const style = {
+      '--pc-box-margin': margin ? `var(--p-space-${margin})` : '',
+      '--pc-box-margin-bottom': marginBottom
+        ? `var(--p-space-${marginBottom})`
+        : '',
+      '--pc-box-margin-left': marginLeft ? `var(--p-space-${marginLeft})` : '',
+      '--pc-box-margin-right': marginRight
+        ? `var(--p-space-${marginRight})`
+        : '',
+      '--pc-box-margin-top': marginTop ? `var(--p-space-${marginTop})` : '',
+      '--pc-box-padding': padding ? `var(--p-space-${padding})` : '',
+      '--pc-box-padding-bottom': paddingBottom
+        ? `var(--p-space-${paddingBottom})`
+        : '',
+      '--pc-box-padding-left': paddingLeft
+        ? `var(--p-space-${paddingLeft})`
+        : '',
+      '--pc-box-padding-right': paddingRight
+        ? `var(--p-space-${paddingRight})`
+        : '',
+      '--pc-box-padding-top': paddingTop ? `var(--p-space-${paddingTop})` : '',
+    } as React.CSSProperties;
+
     const className = classNames(
       styles.root,
       background && styles[background],
@@ -72,7 +139,7 @@ export const Box = forwardRef(
     );
 
     return (
-      <Component ref={ref} className={className}>
+      <Component ref={ref} className={className} style={style}>
         {children}
       </Component>
     );