Add outline style prop to Box

.changeset/hip-maps-dance.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for `outline` to `Box`

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

@@ -39,6 +39,7 @@
   --pc-box-min-height: initial;
   --pc-box-min-width: initial;
   --pc-box-max-width: initial;
+  --pc-box-outline: initial;
   --pc-box-overflow-x: initial;
   --pc-box-overflow-y: initial;
   --pc-box-width: initial;
@@ -126,6 +127,8 @@
   min-width: var(--pc-box-min-width);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   max-width: var(--pc-box-max-width);
+  // stylelint-disable-next-line -- component custom property that maps to Polaris tokens
+  outline: var(--pc-box-outline);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   overflow-x: var(--pc-box-overflow-x);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

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

@@ -175,6 +175,8 @@ export interface BoxProps extends React.AriaAttributes {
   insetInlineEnd?: Spacing;
   /** Opacity of box */
   opacity?: string;
+  /** Outline style */
+  outline?: BorderTokenAlias;
   /** Visually hide the contents during print */
   printHidden?: boolean;
   /** Visually hide the contents (still announced by screenreader) */
@@ -211,6 +213,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       maxWidth,
       overflowX,
       overflowY,
+      outline,
       padding,
       paddingBlockStart,
       paddingBlockEnd,
@@ -282,6 +285,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       '--pc-box-min-height': minHeight,
       '--pc-box-min-width': minWidth,
       '--pc-box-max-width': maxWidth,
+      '--pc-box-outline': outline ? `var(--p-border-${outline})` : undefined,
       '--pc-box-overflow-x': overflowX,
       '--pc-box-overflow-y': overflowY,
       ...getResponsiveProps(