[Layout foundations] Refactor margin and padding logic

Including the `margin/padding` property was causing overrides when combining with `marginTop` or `paddingLeft`, for example.

Co-authored-by: Aveline Thelin <[email protected]>
Co-authored-by: Alex Page <[email protected]>

Author: 3 people

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

@@ -1,21 +1,15 @@
 .root {
-  --pc-box-margin-bottom: initial;
-  --pc-box-margin-left: initial;
-  --pc-box-margin-right: initial;
-  --pc-box-margin-top: initial;
-  --pc-box-padding-bottom: initial;
-  --pc-box-padding-left: initial;
-  --pc-box-padding-right: initial;
-  --pc-box-padding-top: initial;
   display: block;
-  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-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);
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+  margin-bottom: var(--pc-box-margin-bottom, initial);
+  margin-left: var(--pc-box-margin-left, initial);
+  margin-right: var(--pc-box-margin-right, initial);
+  margin-top: var(--pc-box-margin-top, initial);
+  padding-bottom: var(--pc-box-padding-bottom, initial);
+  padding-left: var(--pc-box-padding-left, initial);
+  padding-right: var(--pc-box-padding-right, initial);
+  padding-top: var(--pc-box-padding-top, initial);
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
 }
 
 .background {

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

@@ -1,10 +1,10 @@
 import React, {ReactNode, forwardRef} from 'react';
 import type * as Polymorphic from '@radix-ui/react-polymorphic';
+import type {spacing} from '@shopify/polaris-tokens';
 
 import {classNames} from '../../utilities/css';
 
 import styles from './Box.scss';
-import type {spacing} from '@shopify/polaris-tokens';
 
 type Background =
   | 'background'
@@ -48,10 +48,18 @@ type Shadow = 'default' | 'transparent' | 'faint' | 'deep';
 type SpacingTokenGroup = typeof spacing;
 type SpacingTokenName = keyof SpacingTokenGroup;
 
+// TODO: Bring this logic into tokens
 type SpacingTokenScale = SpacingTokenName extends `space-${infer Scale}`
   ? Scale
   : never;
 
+type Spacing = {
+  bottom: SpacingTokenScale | '';
+  left: SpacingTokenScale | '';
+  right: SpacingTokenScale | '';
+  top: SpacingTokenScale | '';
+};
+
 interface BoxBaseProps {
   /** Background color of the Box */
   background?: Background;
@@ -94,41 +102,57 @@ export const Box = forwardRef(
       background,
       borderRadius,
       children,
-      margin,
-      marginBottom,
-      marginLeft,
-      marginRight,
-      marginTop,
-      padding,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      paddingTop,
+      margin = '',
+      marginBottom = '',
+      marginLeft = '',
+      marginRight = '',
+      marginTop = '',
+      padding = '',
+      paddingBottom = '',
+      paddingLeft = '',
+      paddingRight = '',
+      paddingTop = '',
       shadow,
     },
     ref,
   ) => {
+    const margins = {
+      bottom: marginBottom ? marginBottom : margin,
+      left: marginLeft ? marginLeft : margin,
+      right: marginRight ? marginRight : margin,
+      top: marginTop ? marginTop : margin,
+    } as Spacing;
+
+    const paddings = {
+      bottom: paddingBottom ? paddingBottom : padding,
+      left: paddingLeft ? paddingLeft : padding,
+      right: paddingRight ? paddingRight : padding,
+      top: paddingTop ? paddingTop : padding,
+    } as Spacing;
+
     const style = {
-      '--pc-box-margin': margin ? `var(--p-space-${margin})` : '',
-      '--pc-box-margin-bottom': marginBottom
-        ? `var(--p-space-${marginBottom})`
+      '--pc-box-margin-bottom': margins.bottom
+        ? `var(--p-space-${margins.bottom})`
+        : '',
+      '--pc-box-margin-left': margins.left
+        ? `var(--p-space-${margins.left})`
+        : '',
+      '--pc-box-margin-right': margins.right
+        ? `var(--p-space-${margins.right})`
         : '',
-      '--pc-box-margin-left': marginLeft ? `var(--p-space-${marginLeft})` : '',
-      '--pc-box-margin-right': marginRight
-        ? `var(--p-space-${marginRight})`
+      '--pc-box-margin-top': margins.top ? `var(--p-space-${margins.top})` : '',
+      '--pc-box-padding-bottom': paddings.bottom
+        ? `var(--p-space-${paddings.bottom})`
         : '',
-      '--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': paddings.left
+        ? `var(--p-space-${paddings.left})`
         : '',
-      '--pc-box-padding-left': paddingLeft
-        ? `var(--p-space-${paddingLeft})`
+      '--pc-box-padding-right': paddings.right
+        ? `var(--p-space-${paddings.right})`
         : '',
-      '--pc-box-padding-right': paddingRight
-        ? `var(--p-space-${paddingRight})`
+      '--pc-box-padding-top': paddings.top
+        ? `var(--p-space-${paddings.top})`
         : '',
-      '--pc-box-padding-top': paddingTop ? `var(--p-space-${paddingTop})` : '',
     } as React.CSSProperties;
 
     const className = classNames(