[Box] Add position and visibility properties (#7755)

kyledurand · web-flow · commit 1e5a2b665ac4 · 2022-11-18T12:19:29.000-05:00
This unblocks resource item work and will unblock lots of other components as well Closes #7733 ```jsx import React from 'react'; import {Box, Page} from '../src'; export function Playground() { return ( <Page title="Playground"> <Box position="relative" width="100%" minHeight="600px" background="action-primary-depressed" > <Box position="absolute" left="0" bottom="0" width="50px" minHeight="50px" background="action-critical-depressed" zIndex="1" /> <Box position="absolute" left="0" bottom="25px" width="50px" minHeight="50px" background="action-critical" zIndex="2" /> <Box position="absolute" top="var(--p-space-4)" right="var(--p-space-4)" width="100px" minHeight="100px" background="action-critical" zIndex="2" > <Box position="absolute" bottom="var(--p-space-2)" left="0" width="50px" minHeight="50px" background="action-secondary" zIndex="1" > <Box visuallyHidden>asdf</Box> </Box> </Box> </Box> </Page> ); } ```
diff --git a/.changeset/gorgeous-ants-hammer.md b/.changeset/gorgeous-ants-hammer.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added position, opacity, top, left, right, bottom, z-index to `Box`
diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
@@ -52,6 +52,14 @@
   --pc-box-padding-block-start: initial;
   --pc-box-width: initial;
   --pc-box-border-width: var(--p-border-width-1);
+  --pc-box-top: initial;
+  --pc-box-right: initial;
+  --pc-box-bottom: initial;
+  --pc-box-left: initial;
+  top: var(--pc-box-top);
+  right: var(--pc-box-right);
+  bottom: var(--pc-box-bottom);
+  left: var(--pc-box-left);
   background-color: var(--pc-box-background);
   box-shadow: var(--pc-box-shadow);
   border-radius: var(--pc-box-border-radius);
@@ -100,3 +108,7 @@
   width: var(--pc-box-width);
   -webkit-overflow-scrolling: touch;
 }
+
+.visuallyHidden {
+  @include visually-hidden;
+}
diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
@@ -20,8 +20,8 @@ import {
 import styles from './Box.scss';
 
 type Element = 'div' | 'span' | 'section';
-
 type Overflow = 'hidden' | 'scroll';
+type Position = 'relative' | 'absolute' | 'fixed' | 'sticky';
 
 export type ColorTokenScale =
   | 'text'
@@ -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;
@@ -128,11 +107,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;
@@ -170,10 +149,27 @@ 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?: Position;
+  /** Top position of the box */
+  top?: Spacing;
+  /** Bottom position of the box */
+  right?: Spacing;
+  /** Left position of the box */
+  bottom?: Spacing;
+  /** Right position of the box */
+  left?: Spacing;
+  /** Opcity of the box */
+  opacity?: string;
+  /** Visually hide the contents (still announced by screenreader) */
+  visuallyHidden?: boolean;
+  /** z-index of the box */
+  zIndex?: string;
 }
 
 export const Box = forwardRef<HTMLElement, BoxProps>(
@@ -211,75 +207,62 @@ 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-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,
@@ -313,9 +296,19 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       ),
       '--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : undefined,
       '--pc-box-width': width,
+      position,
+      '--pc-box-top': top ? `var(--p-space-${top})` : undefined,
+      '--pc-box-right': right ? `var(--p-space-${right})` : undefined,
+      '--pc-box-bottom': bottom ? `var(--p-space-${bottom})` : undefined,
+      '--pc-box-left': left ? `var(--p-space-${left})` : undefined,
+      zIndex,
+      opacity,
     } as React.CSSProperties;
 
-    const className = classNames(styles.Box);
+    const className = classNames(
+      styles.Box,
+      visuallyHidden && styles.visuallyHidden,
+    );
 
     return createElement(
       as,
diff --git a/polaris.shopify.com/src/data/props.json b/polaris.shopify.com/src/data/props.json

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@shopify/polaris': patch
 +---
++
 +Added position, opacity, top, left, right, bottom, z-index to `Box`