Fix typo in box property, remove PropsWithChildren (#7561)

Author: kyledurand

.changeset/stale-dots-knock.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fix typo in box property, remove PropsWithChildren

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

@@ -42,7 +42,7 @@
     --pc-box-border-radius-start-end,
     var(--pc-box-border-radius)
   );
-  border-block-end: var(--pc-box-border-bottom, var(--pc-box-border));
+  border-block-end: var(--pc-box-border-block-end, var(--pc-box-border));
   border-inline-start: var(--pc-box-border-inline-start, var(--pc-box-border));
   border-inline-end: var(--pc-box-border-inline-end, var(--pc-box-border));
   border-block-start: var(--pc-box-border-block-start, var(--pc-box-border));

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

@@ -1,4 +1,4 @@
-import React, {createElement, forwardRef, PropsWithChildren} from 'react';
+import React, {createElement, forwardRef} from 'react';
 import type {
   DepthShadowAlias,
   SpacingSpaceScale,
@@ -135,7 +135,7 @@ interface Spacing {
   inlineEnd: SpacingSpaceScale;
 }
 
-export interface BoxProps extends PropsWithChildren {
+export interface BoxProps {
   /** HTML Element type */
   as?: Element;
   /** Background color */
@@ -188,6 +188,8 @@ export interface BoxProps extends PropsWithChildren {
   shadow?: DepthShadowAlias;
   /** Set width of container */
   width?: string;
+  /** Elements to display inside box */
+  children?: React.ReactNode;
 }
 
 export const Box = forwardRef<HTMLElement, BoxProps>(
@@ -248,7 +250,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       '--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-bottom': borders.blockEnd
+      '--pc-box-border-block-end': borders.blockEnd
         ? `var(--p-border-${borders.blockEnd})`
         : undefined,
       '--pc-box-border-inline-start': borders.inlineStart

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

@@ -1,4 +1,4 @@
-import React, {PropsWithChildren} from 'react';
+import React from 'react';
 import type {
   BreakpointsAlias,
   SpacingSpaceScale,
@@ -16,13 +16,14 @@ type Spacing = {
   [Breakpoint in BreakpointsAlias]?: SpacingSpaceScale;
 };
 
-export interface ColumnsProps extends PropsWithChildren {
+export interface ColumnsProps {
   /** The space between columns */
   spacing?: Spacing;
   /** The number of columns to display
    * @default {xs: 6, sm: 6, md: 6, lg: 6, xl: 6}
    */
   columns?: Columns;
+  /** Elements to display inside columns */
   children?: React.ReactNode;
 }