[Layout foundations] Refactor and add border and borderRadius props

Author: laurkim

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

@@ -9,6 +9,14 @@
   padding-left: var(--pc-box-padding-left, initial);
   padding-right: var(--pc-box-padding-right, initial);
   padding-top: var(--pc-box-padding-top, initial);
+  border-bottom-left-radius: var(--pc-box-border-radius-bottom-left, initial);
+  border-bottom-right-radius: var(--pc-box-border-radius-bottom-right, initial);
+  border-top-left-radius: var(--pc-box-border-radius-top-left, initial);
+  border-top-right-radius: var(--pc-box-border-radius-top-right, initial);
+  border-bottom: var(--pc-box-border-bottom, initial);
+  border-left: var(--pc-box-border-left, initial);
+  border-right: var(--pc-box-border-right, initial);
+  border-top: var(--pc-box-border-top, initial);
   /* stylelint-enable declaration-block-no-redundant-longhand-properties */
 }
 
@@ -104,86 +112,6 @@
   background-color: var(--p-overlay);
 }
 
-.radius-05 {
-  border-radius: var(--p-border-radius-05);
-}
-
-.radius-1 {
-  border-radius: var(--p-border-radius-1);
-}
-
-.radius-2 {
-  border-radius: var(--p-border-radius-2);
-}
-
-.radius-3 {
-  border-radius: var(--p-border-radius-3);
-}
-
-.radius-4 {
-  border-radius: var(--p-border-radius-4);
-}
-
-.radius-5 {
-  border-radius: var(--p-border-radius-5);
-}
-
-.radius-6 {
-  border-radius: var(--p-border-radius-6);
-}
-
-.radius-base {
-  border-radius: var(--p-border-radius-base);
-}
-
-.radius-large {
-  border-radius: var(--p-border-radius-large);
-}
-
-.radius-half {
-  border-radius: var(--p-border-radius-half);
-}
-
-.width-1 {
-  border: var(--p-border-width-1) solid;
-}
-
-.width-2 {
-  border: var(--p-border-width-2) solid;
-}
-
-.width-3 {
-  border: var(--p-border-width-3) solid;
-}
-
-.width-4 {
-  border: var(--p-border-width-4) solid;
-}
-
-.width-5 {
-  border: var(--p-border-width-5) solid;
-}
-
-.base {
-  border: var(--p-border-base);
-}
-
-.dark {
-  border: var(--p-border-dark);
-}
-
-.transparent {
-  border: var(--p-border-transparent);
-}
-
-.divider {
-  border: var(--p-border-divider);
-}
-
-.divider-on-dark {
-  border: var(--p-border-divider-on-dark);
-}
-
 .shadowBase {
   box-shadow: var(--p-shadow-base);
 }

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

@@ -36,10 +36,34 @@ type Shadow = 'default' | 'transparent' | 'faint' | 'deep';
 type ShapeTokenGroup = typeof shape;
 type ShapeTokenName = keyof ShapeTokenGroup;
 
-type BorderTokenScale = ShapeTokenName extends `border-${infer Scale}`
+type BorderShapeTokenScale = ShapeTokenName extends `border-${infer Scale}`
   ? Scale
   : never;
 
+type BorderTokenScale = Exclude<
+  BorderShapeTokenScale,
+  `radius-${string}` | `width-${string}`
+>;
+
+interface Border {
+  bottom: BorderTokenScale;
+  left: BorderTokenScale;
+  right: BorderTokenScale;
+  top: BorderTokenScale;
+}
+
+type BorderRadiusTokenScale = Extract<
+  BorderShapeTokenScale,
+  `radius-${string}`
+>;
+
+interface BorderRadius {
+  bottomLeft: BorderRadiusTokenScale | '';
+  bottomRight: BorderRadiusTokenScale | '';
+  topLeft: BorderRadiusTokenScale | '';
+  topRight: BorderRadiusTokenScale | '';
+}
+
 type SpacingTokenGroup = typeof spacing;
 type SpacingTokenName = keyof SpacingTokenGroup;
 
@@ -48,18 +72,36 @@ type SpacingTokenScale = SpacingTokenName extends `space-${infer Scale}`
   ? Scale
   : never;
 
-type Spacing = {
+interface Spacing {
   bottom: SpacingTokenScale | '';
   left: SpacingTokenScale | '';
   right: SpacingTokenScale | '';
   top: SpacingTokenScale | '';
-};
+}
 
 interface BoxBaseProps {
   /** Background color of the Box */
   background?: Background;
   /** Border styling of the Box */
   border?: BorderTokenScale;
+  /** Bottom border styling of the Box */
+  borderBottom?: BorderTokenScale;
+  /** Left border styling of the Box */
+  borderLeft?: BorderTokenScale;
+  /** Right border styling of the Box */
+  borderRight?: BorderTokenScale;
+  /** Top border styling of the Box */
+  borderTop?: BorderTokenScale;
+  /** Border radius of the Box */
+  borderRadius?: BorderRadiusTokenScale;
+  /** Bottom left border radius of the Box */
+  borderRadiusBottomLeft?: BorderRadiusTokenScale;
+  /** Bottom right border radius of the Box */
+  borderRadiusBottomRight?: BorderRadiusTokenScale;
+  /** Top left border radius of the Box */
+  borderRadiusTopLeft?: BorderRadiusTokenScale;
+  /** Top right border radius of the Box */
+  borderRadiusTopRight?: BorderRadiusTokenScale;
   /** Inner content of the Box */
   children: ReactNode;
   /** Spacing outside of the Box */
@@ -95,7 +137,16 @@ export const Box = forwardRef(
     {
       as: Component = 'div',
       background,
-      border,
+      border = '',
+      borderBottom = '',
+      borderLeft = '',
+      borderRight = '',
+      borderTop = '',
+      borderRadius = '',
+      borderRadiusBottomLeft = '',
+      borderRadiusBottomRight = '',
+      borderRadiusTopLeft = '',
+      borderRadiusTopRight = '',
       children,
       margin = '',
       marginBottom = '',
@@ -111,6 +162,24 @@ export const Box = forwardRef(
     },
     ref,
   ) => {
+    const borders = {
+      bottom: borderBottom ? borderBottom : border,
+      left: borderLeft ? borderLeft : border,
+      right: borderRight ? borderRight : border,
+      top: borderTop ? borderTop : border,
+    } as Border;
+
+    const borderRadiuses = {
+      bottomLeft: borderRadiusBottomLeft
+        ? borderRadiusBottomLeft
+        : borderRadius,
+      bottomRight: borderRadiusBottomRight
+        ? borderRadiusBottomRight
+        : borderRadius,
+      topLeft: borderRadiusTopLeft ? borderRadiusTopLeft : borderRadius,
+      topRight: borderRadiusTopRight ? borderRadiusTopRight : borderRadius,
+    } as BorderRadius;
+
     const margins = {
       bottom: marginBottom ? marginBottom : margin,
       left: marginLeft ? marginLeft : margin,
@@ -148,12 +217,35 @@ export const Box = forwardRef(
       '--pc-box-padding-top': paddings.top
         ? `var(--p-space-${paddings.top})`
         : '',
+      '--pc-box-border-bottom': borders.bottom
+        ? `var(--p-border-${borders.bottom})`
+        : '',
+      '--pc-box-border-left': borders.left
+        ? `var(--p-border-${borders.left})`
+        : '',
+      '--pc-box-border-right': borders.right
+        ? `var(--p-border-${borders.right})`
+        : '',
+      '--pc-box-border-top': borders.top
+        ? `var(--p-border-${borders.top})`
+        : '',
+      '--pc-box-border-radius-bottom-left': borderRadiuses.bottomLeft
+        ? `var(--p-border-${borderRadiuses.bottomLeft})`
+        : '',
+      '--pc-box-border-radius-bottom-right': borderRadiuses.bottomRight
+        ? `var(--p-border-${borderRadiuses.bottomRight})`
+        : '',
+      '--pc-box-border-radius-top-left': borderRadiuses.topLeft
+        ? `var(--p-border-${borderRadiuses.topLeft})`
+        : '',
+      '--pc-box-border-radius-top-right': borderRadiuses.topRight
+        ? `var(--p-border-${borderRadiuses.topRight})`
+        : '',
     } as React.CSSProperties;
 
     const className = classNames(
       styles.root,
       background && styles[background],
-      border && styles[border],
       shadow && styles[shadow],
     );