changeset

Author: kyledurand

.changeset/gorgeous-ants-hammer.md

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

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

@@ -51,7 +51,6 @@
   --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);
@@ -92,7 +91,6 @@
     --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);

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

@@ -93,8 +93,6 @@ 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 */
@@ -157,7 +155,6 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       borderInlineStart,
       borderInlineEnd,
       borderBlockStart,
-      borderColor,
       borderWidth,
       borderBlockStartWidth,
       borderBlockEndWidth,
@@ -225,9 +222,6 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       '--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,