Add position, z-index, opacity, visibility props to Box

Author: kyledurand

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

@@ -51,6 +51,7 @@
   --pc-box-padding-inline-end: initial;
   --pc-box-padding-block-start: initial;
   --pc-box-width: initial;
+  --pc-box-border-color: initial;
   --pc-box-border-width: var(--p-border-width-1);
   background-color: var(--pc-box-background);
   box-shadow: var(--pc-box-shadow);
@@ -91,6 +92,7 @@
     --pc-box-border-inline-end-width,
     var(--pc-box-border-width)
   );
+  border-color: var(--pc-box-border-color);
   color: var(--pc-box-color);
   min-height: var(--pc-box-min-height);
   min-width: var(--pc-box-min-width);
@@ -100,3 +102,7 @@
   width: var(--pc-box-width);
   -webkit-overflow-scrolling: touch;
 }
+
+.visuallyHidden {
+  @include visually-hidden;
+}

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

@@ -49,13 +49,6 @@ export type BorderTokenAlias =
 
 type Spacing = ResponsiveProp<SpacingSpaceScale>;
 
-interface Border {
-  blockStart: BorderTokenAlias;
-  blockEnd: BorderTokenAlias;
-  inlineStart: BorderTokenAlias;
-  inlineEnd: BorderTokenAlias;
-}
-
 export type BorderRadiusTokenScale =
   | '05'
   | '1'
@@ -75,20 +68,6 @@ export type BackgroundColors =
   | ColorsActionTokenAlias
   | ColorsSurfaceTokenAlias;
 
-interface BorderRadius {
-  startStart: BorderRadiusTokenScale;
-  startEnd: BorderRadiusTokenScale;
-  endStart: BorderRadiusTokenScale;
-  endEnd: BorderRadiusTokenScale;
-}
-
-interface BorderWidth {
-  blockStart: ShapeBorderWidthScale;
-  blockEnd: ShapeBorderWidthScale;
-  inlineStart: ShapeBorderWidthScale;
-  inlineEnd: ShapeBorderWidthScale;
-}
-
 export interface BoxProps {
   /** HTML Element type */
   as?: Element;
@@ -114,6 +93,8 @@ export interface BoxProps {
   borderRadiusStartStart?: BorderRadiusTokenScale;
   /** Verital start horizontal end border radius */
   borderRadiusStartEnd?: BorderRadiusTokenScale;
+  /** Border color */
+  borderColor?: ColorTokenScale;
   /** Border width */
   borderWidth?: ShapeBorderWidthScale;
   /** Vertical start border width */
@@ -128,11 +109,11 @@ export interface BoxProps {
   color?: ColorTokenScale;
   /** HTML id attribute */
   id?: string;
-  /** Set minimum height of container */
+  /** Minimum height of container */
   minHeight?: string;
-  /** Set minimum width of container */
+  /** Minimum width of container */
   minWidth?: string;
-  /** Set maximum width of container */
+  /** Maximum width of container */
   maxWidth?: string;
   /** Clip horizontal content of children */
   overflowX?: Overflow;
@@ -150,10 +131,20 @@ export interface BoxProps {
   paddingInlineEnd?: Spacing;
   /** Shadow */
   shadow?: DepthShadowAlias;
-  /** Set width of container */
+  /** Width of container */
   width?: string;
   /** Elements to display inside box */
   children?: React.ReactNode;
+  // These could be moved to new layout component(s) in the future
+  /** Position of the box */
+  position?: 'relative' | 'absolute' | 'fixed' | 'sticky';
+  top?: string;
+  right?: string;
+  bottom?: string;
+  left?: string;
+  opacity?: string;
+  visuallyHidden?: boolean;
+  zIndex?: string;
 }
 
 export const Box = forwardRef<HTMLElement, BoxProps>(
@@ -166,6 +157,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       borderInlineStart,
       borderInlineEnd,
       borderBlockStart,
+      borderColor,
       borderWidth,
       borderBlockStartWidth,
       borderBlockEndWidth,
@@ -191,75 +183,65 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       paddingInlineEnd,
       shadow,
       width,
+      visuallyHidden,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      opacity,
     },
     ref,
   ) => {
-    const borders = {
-      blockEnd: borderBlockEnd,
-      inlineStart: borderInlineStart,
-      inlineEnd: borderInlineEnd,
-      blockStart: borderBlockStart,
-    } as Border;
-
-    const borderRadiuses = {
-      endStart: borderRadiusEndStart,
-      endEnd: borderRadiusEndEnd,
-      startStart: borderRadiusStartStart,
-      startEnd: borderRadiusStartEnd,
-    } as BorderRadius;
-
-    const borderWidths = {
-      blockStart: borderBlockStartWidth,
-      blockEnd: borderBlockEndWidth,
-      inlineStart: borderInlineStartWidth,
-      inlineEnd: borderInlineEndWidth,
-    } as BorderWidth;
-
     const style = {
       '--pc-box-color': color ? `var(--p-${color})` : undefined,
       '--pc-box-background': background ? `var(--p-${background})` : undefined,
       '--pc-box-border': border ? `var(--p-border-${border})` : undefined,
-      '--pc-box-border-block-end': borders.blockEnd
-        ? `var(--p-border-${borders.blockEnd})`
+      '--pc-box-border-block-end': borderBlockEnd
+        ? `var(--p-border-${borderBlockEnd})`
         : undefined,
-      '--pc-box-border-inline-start': borders.inlineStart
-        ? `var(--p-border-${borders.inlineStart})`
+      '--pc-box-border-inline-start': borderInlineStart
+        ? `var(--p-border-${borderInlineStart})`
         : undefined,
-      '--pc-box-border-inline-end': borders.inlineEnd
-        ? `var(--p-border-${borders.inlineEnd})`
+      '--pc-box-border-inline-end': borderInlineEnd
+        ? `var(--p-border-${borderInlineEnd})`
         : undefined,
-      '--pc-box-border-block-start': borders.blockStart
-        ? `var(--p-border-${borders.blockStart})`
+      '--pc-box-border-block-start': borderBlockStart
+        ? `var(--p-border-${borderBlockStart})`
         : undefined,
       '--pc-box-border-radius': borderRadius
         ? `var(--p-border-radius-${borderRadius})`
         : undefined,
-      '--pc-box-border-radius-end-start': borderRadiuses.endStart
-        ? `var(--p-border-radius-${borderRadiuses.endStart})`
+      '--pc-box-border-radius-end-start': borderRadiusEndStart
+        ? `var(--p-border-radius-${borderRadiusEndStart})`
         : undefined,
-      '--pc-box-border-radius-end-end': borderRadiuses.endEnd
-        ? `var(--p-border-radius-${borderRadiuses.endEnd})`
+      '--pc-box-border-radius-end-end': borderRadiusEndEnd
+        ? `var(--p-border-radius-${borderRadiusEndEnd})`
         : undefined,
-      '--pc-box-border-radius-start-start': borderRadiuses.startStart
-        ? `var(--p-border-radius-${borderRadiuses.startStart})`
+      '--pc-box-border-radius-start-start': borderRadiusStartStart
+        ? `var(--p-border-radius-${borderRadiusStartStart})`
         : undefined,
-      '--pc-box-border-radius-start-end': borderRadiuses.startEnd
-        ? `var(--p-border-radius-${borderRadiuses.startEnd})`
+      '--pc-box-border-radius-start-end': borderRadiusStartEnd
+        ? `var(--p-border-radius-${borderRadiusStartEnd})`
+        : undefined,
+      '--pc-box-border-color': borderColor
+        ? `var(--p-${borderColor})`
         : undefined,
       '--pc-box-border-width': borderWidth
         ? `var(--p-border-width-${borderWidth})`
         : undefined,
-      '--pc-box-border-block-start-width': borderWidths.blockStart
-        ? `var(--p-border-width-${borderWidths.blockStart})`
+      '--pc-box-border-block-start-width': borderBlockStartWidth
+        ? `var(--p-border-width-${borderBlockStartWidth})`
         : undefined,
-      '--pc-box-border-block-end-width': borderWidths.blockEnd
-        ? `var(--p-border-width-${borderWidths.blockEnd})`
+      '--pc-box-border-block-end-width': borderBlockEndWidth
+        ? `var(--p-border-width-${borderBlockEndWidth})`
         : undefined,
-      '--pc-box-border-inline-start-width': borderWidths.inlineStart
-        ? `var(--p-border-width-${borderWidths.inlineStart})`
+      '--pc-box-border-inline-start-width': borderInlineStartWidth
+        ? `var(--p-border-width-${borderInlineStartWidth})`
         : undefined,
-      '--pc-box-border-inline-end-width': borderWidths.inlineEnd
-        ? `var(--p-border-width-${borderWidths.inlineEnd})`
+      '--pc-box-border-inline-end-width': borderInlineEndWidth
+        ? `var(--p-border-width-${borderInlineEndWidth})`
         : undefined,
       '--pc-box-min-height': minHeight,
       '--pc-box-min-width': minWidth,
@@ -293,9 +275,19 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       ),
       '--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : undefined,
       '--pc-box-width': width,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      opacity,
     } as React.CSSProperties;
 
-    const className = classNames(styles.Box);
+    const className = classNames(
+      styles.Box,
+      visuallyHidden && styles.visuallyHidden,
+    );
 
     return createElement(
       as,