[Box] Add support for overflowX, overflowY, and width props (#7432

)

### WHY are these changes introduced?

While rebuilding the `Modal` component with our layout primitives, I
came across gaps that our layout components don't yet support. We have
no way of handling content overflow and while we did ship a PR to add
`maxWidth` support to `Box`, we should also support `width`.

### WHAT is this pull request doing?

- Adds `width` prop
- Adds `overflowX` and `overflowY` with type definition limited to
`hidden` or `scroll` after discussions with @sarahill
- Removes `px` from being interpolated in the `maxWidth` prop because
these could be percentages

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/kind-carrots-leave.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for `overflowX`, `overflowY`, and `width` props to `Box`

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

@@ -12,10 +12,13 @@
   --pc-box-border-top: initial;
   --pc-box-color: initial;
   --pc-box-max-width: initial;
+  --pc-box-overflow-x: initial;
+  --pc-box-overflow-y: initial;
   --pc-box-padding-bottom: initial;
   --pc-box-padding-left: initial;
   --pc-box-padding-right: initial;
   --pc-box-padding-top: initial;
+  --pc-box-width: initial;
   background-color: var(--pc-box-background);
   box-shadow: var(--pc-box-shadow);
   border-bottom-left-radius: var(--pc-box-border-radius-bottom-left);
@@ -28,9 +31,13 @@
   border-top: var(--pc-box-border-top);
   color: var(--pc-box-color);
   max-width: var(--pc-box-max-width);
+  overflow-x: var(--pc-box-overflow-x);
+  overflow-y: var(--pc-box-overflow-y);
   padding-bottom: var(--pc-box-padding-bottom);
   padding-left: var(--pc-box-padding-left);
   padding-right: var(--pc-box-padding-right);
   padding-top: var(--pc-box-padding-top);
+  width: var(--pc-box-width);
   /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+  -webkit-overflow-scrolling: touch;
 }

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

@@ -10,6 +10,8 @@ import styles from './Box.scss';
 
 type Element = 'div' | 'span';
 
+type Overflow = 'hidden' | 'scroll';
+
 export type BackgroundColorTokenScale =
   | 'action-critical'
   | 'action-critical-depressed'
@@ -164,8 +166,12 @@ export interface BoxProps {
   color?: ColorTokenScale;
   /** HTML id attribute */
   id?: string;
-  /** Spacing outside of container */
+  /** Set maximum width of container */
   maxWidth?: string;
+  /** Clip horizontal content of children */
+  overflowX?: Overflow;
+  /** Clip vertical content of children */
+  overflowY?: Overflow;
   /** Spacing around children */
   padding?: SpacingSpaceScale;
   /** Bottom spacing around children */
@@ -178,6 +184,8 @@ export interface BoxProps {
   paddingTop?: SpacingSpaceScale;
   /** Shadow */
   shadow?: DepthShadowAlias;
+  /** Set width of container */
+  width?: string;
 }
 
 export const Box = forwardRef<HTMLElement, BoxProps>(
@@ -199,12 +207,15 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       color,
       id,
       maxWidth,
+      overflowX,
+      overflowY,
       padding,
       paddingBottom,
       paddingLeft,
       paddingRight,
       paddingTop,
       shadow,
+      width,
     },
     ref,
   ) => {
@@ -270,7 +281,9 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
           }
         : undefined),
       ...(color ? {'--pc-box-color': `var(--p-${color})`} : undefined),
-      ...(maxWidth ? {'--pc-box-max-width': `${maxWidth}px`} : undefined),
+      ...(maxWidth ? {'--pc-box-max-width': `${maxWidth}`} : undefined),
+      ...(overflowX ? {'--pc-box-overflow-x': `${overflowX}`} : undefined),
+      ...(overflowY ? {'--pc-box-overflow-y': `${overflowY}`} : undefined),
       ...(paddings.bottom
         ? {'--pc-box-padding-bottom': `var(--p-space-${paddings.bottom})`}
         : undefined),
@@ -286,6 +299,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       ...(shadow
         ? {'--pc-box-shadow': `var(--p-shadow-${shadow})`}
         : undefined),
+      ...(width ? {'--pc-box-max-width': `${width}`} : undefined),
     } as React.CSSProperties;
 
     const className = classNames(styles.Box);