[Box] Add support for minHeight and minWidth (#7450)

### WHY are these changes introduced?

Some layouts need a minimum height and width and we support `maxHeight`
with `Box` so also adding those props.

### WHAT is this pull request doing?

- Adds `minHeight` and `minWidth` props

<!-- ℹ️ 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

Author: laurkim

.changeset/funny-hairs-raise.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for `minHeight` and `minWidth` on `Box`

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

@@ -11,6 +11,8 @@
   --pc-box-border-right: initial;
   --pc-box-border-top: initial;
   --pc-box-color: initial;
+  --pc-box-min-height: initial;
+  --pc-box-min-width: initial;
   --pc-box-max-width: initial;
   --pc-box-overflow-x: initial;
   --pc-box-overflow-y: initial;
@@ -30,6 +32,8 @@
   border-right: var(--pc-box-border-right);
   border-top: var(--pc-box-border-top);
   color: var(--pc-box-color);
+  min-height: var(--pc-box-min-height);
+  min-width: var(--pc-box-min-width);
   max-width: var(--pc-box-max-width);
   overflow-x: var(--pc-box-overflow-x);
   overflow-y: var(--pc-box-overflow-y);

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

@@ -164,6 +164,10 @@ export interface BoxProps extends PropsWithChildren {
   color?: ColorTokenScale;
   /** HTML id attribute */
   id?: string;
+  /** Set minimum height of container */
+  minHeight?: string;
+  /** Set minimum width of container */
+  minWidth?: string;
   /** Set maximum width of container */
   maxWidth?: string;
   /** Clip horizontal content of children */
@@ -204,6 +208,8 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       children,
       color,
       id,
+      minHeight,
+      minWidth,
       maxWidth,
       overflowX,
       overflowY,
@@ -269,6 +275,8 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       '--pc-box-border-radius-top-right': borderRadiuses.topRight
         ? `var(--p-border-radius-${borderRadiuses.topRight})`
         : undefined,
+      '--pc-box-min-height': minHeight ?? undefined,
+      '--pc-box-min-width': minWidth ?? undefined,
       '--pc-box-max-width': maxWidth ?? undefined,
       '--pc-box-overflow-x': overflowX ?? undefined,
       '--pc-box-overflow-y': overflowY ?? undefined,