[Layout] Remove Columns default spacing (#8484)

### WHY are these changes introduced?

Fixes #8366 

### WHAT is this pull request doing?

Removes default spacing from `Columns` and updates instances of
`Columns` with adjusted `gap` values

Author: aveline

.changeset/green-elephants-develop.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Removed default `gap` from `Columns`

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

@@ -25,15 +25,14 @@ export interface ColumnsProps {
    */
   columns?: Columns;
   /** The spacing between children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
-   * @default '4'
    * @example
    * gap='2'
    * gap={{xs: '1', sm: '2', md: '3', lg: '4', xl: '5'}}
    */
   gap?: Gap;
 }
 
-export function Columns({children, columns, gap = '4'}: ColumnsProps) {
+export function Columns({children, columns, gap}: ColumnsProps) {
   const style = {
     ...getResponsiveValue(
       'columns',

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

@@ -4,16 +4,6 @@ import {mountWithApp} from 'tests/utilities';
 import {Columns} from '..';
 
 describe('Columns', () => {
-  it('renders custom properties with default values', () => {
-    const columns = mountWithApp(<Columns />);
-
-    expect(columns).toContainReactComponent('div', {
-      style: {
-        '--pc-columns-gap-xs': 'var(--p-space-4)',
-      } as React.CSSProperties,
-    });
-  });
-
   it('only renders custom properties that match the properties passed in', () => {
     const columns = mountWithApp(<Columns gap={{md: '1'}} />);
 
@@ -33,7 +23,6 @@ describe('Columns', () => {
       style: {
         '--pc-columns-grid-template-columns-xs': '1fr 1fr',
         '--pc-columns-grid-template-columns-lg': '1.5fr 0.5fr',
-        '--pc-columns-gap-xs': 'var(--p-space-4)',
       } as React.CSSProperties,
     });
   });
@@ -45,7 +34,6 @@ describe('Columns', () => {
       style: {
         '--pc-columns-grid-template-columns-xs': 'repeat(1, minmax(0, 1fr))',
         '--pc-columns-grid-template-columns-md': 'repeat(4, minmax(0, 1fr))',
-        '--pc-columns-gap-xs': 'var(--p-space-4)',
       } as React.CSSProperties,
     });
   });
@@ -63,7 +51,6 @@ describe('Columns', () => {
           'minmax(0, 1fr) minmax(0, 1fr)',
         '--pc-columns-grid-template-columns-md':
           'minmax(0, 1fr) minmax(0, 2fr)',
-        '--pc-columns-gap-xs': 'var(--p-space-4)',
       } as React.CSSProperties,
     });
   });

polaris-react/src/components/Modal/components/Header/Header.tsx

@@ -41,7 +41,7 @@ export function Header({
       paddingInlineEnd="5"
       borderBlockEnd="divider"
     >
-      <Columns columns={{xs: '1fr auto'}}>
+      <Columns columns={{xs: '1fr auto'}} gap="4">
         <Inline gap="4">
           <Text id={id} as="h2" variant="headingLg" breakWord>
             {children}

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

@@ -290,7 +290,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
         paddingInlineEnd={{xs: '4', sm: '5'}}
         zIndex="var(--pc-resource-item-content-stacking-order)"
       >
-        <Columns columns={{xs: '1fr auto'}} gap="0">
+        <Columns columns={{xs: '1fr auto'}}>
           <Columns
             columns={{xs: media || selectable ? 'auto 1fr' : '1fr'}}
             gap="5"