[Columns] Default to 6 columns (#7410)

We should be opinionated and apply smart defaults where we can. 

Also let's not worry about documenting children if we don't have to and
use the `PropsWithChildren` type

Author: kyledurand

.changeset/kind-kings-promise.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Apply default value to Columns

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

@@ -10,7 +10,7 @@ export default {
 export function BasicColumns() {
   return (
     <Page fullWidth>
-      <Columns columns={{xs: 1, sm: 2, md: 3, lg: 6}} spacing={{xs: '2'}}>
+      <Columns>
         <div style={{background: 'aquamarine'}}>one</div>
         <div style={{background: 'aquamarine'}}>two</div>
         <div style={{background: 'aquamarine'}}>three</div>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropsWithChildren} from 'react';
 import type {
   BreakpointsAlias,
   SpacingSpaceScale,
@@ -16,15 +16,18 @@ type Spacing = {
   [Breakpoint in BreakpointsAlias]?: SpacingSpaceScale;
 };
 
-export interface ColumnsProps {
+export interface ColumnsProps extends PropsWithChildren {
+  /** 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;
-  children?: React.ReactNode;
 }
 
 export function Columns({columns, children, spacing}: ColumnsProps) {
   const style = {
-    '--pc-columns-xs': formatColumns(columns?.xs),
+    '--pc-columns-xs': formatColumns(columns?.xs || 6),
     '--pc-columns-sm': formatColumns(columns?.sm),
     '--pc-columns-md': formatColumns(columns?.md),
     '--pc-columns-lg': formatColumns(columns?.lg),

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

@@ -7,14 +7,19 @@ describe('Columns', () => {
   it('does not render custom properties by default', () => {
     const columns = mountWithApp(<Columns />);
 
-    expect(columns).toContainReactComponent('div', {style: undefined});
+    expect(columns).toContainReactComponent('div', {
+      style: {
+        '--pc-columns-xs': 'repeat(6, minmax(0, 1fr))',
+      } as React.CSSProperties,
+    });
   });
 
   it('only renders custom properties that match the properties passed in', () => {
     const columns = mountWithApp(<Columns spacing={{md: '1'}} />);
 
     expect(columns).toContainReactComponent('div', {
       style: {
+        '--pc-columns-xs': 'repeat(6, minmax(0, 1fr))',
         '--pc-columns-space-md': 'var(--p-space-1)',
       } as React.CSSProperties,
     });