[Layout foundations] Remove default spacing from Inline (#8454)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #8368 <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

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

---------

Co-authored-by: Lo Kim <lo.kim@shopify.com>

Author: chazdean

.changeset/eight-spies-complain.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Removed default spacing from `Inline`

polaris-react/src/components/ActionList/components/Item/Item.tsx

@@ -88,7 +88,7 @@ export function Item({
   const textMarkup = <span className={styles.Text}>{contentMarkup}</span>;
 
   const contentElement = (
-    <Inline blockAlign="center" gap="0">
+    <Inline blockAlign="center">
       {prefixMarkup}
       {textMarkup}
       {badgeMarkup}

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

@@ -194,7 +194,7 @@ export function WithEndJustifiedContent() {
   return (
     <Banner status="critical">
       <AlphaStack gap="1" fullWidth>
-        <Inline align="space-between">
+        <Inline gap="4" align="space-between">
           <Text variant="headingMd" fontWeight="semibold" as="h3">
             Deployment failed in 5min
           </Text>

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

@@ -33,7 +33,7 @@ export function Default() {
     <div style={{padding: '0'}}>
       <AlphaStack gap="4">
         {files.map((file, index) => (
-          <Inline align="center" key={index}>
+          <Inline gap="4" align="center" key={index}>
             <Thumbnail
               size="small"
               alt={file.name}
@@ -89,7 +89,7 @@ export function WithImageFileUpload() {
   const uploadedFiles = files.length > 0 && (
     <AlphaStack gap="4">
       {files.map((file, index) => (
-        <Inline align="center" key={index}>
+        <Inline gap="4" align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -146,7 +146,7 @@ export function WithSingleFileUpload() {
 
   const fileUpload = !file && <DropZone.FileUpload />;
   const uploadedFile = file && (
-    <Inline>
+    <Inline gap="4">
       <Thumbnail
         size="small"
         alt={file.name}
@@ -188,7 +188,7 @@ export function WithDropOnPage() {
   const uploadedFiles = files.length > 0 && (
     <AlphaStack gap="4">
       {files.map((file, index) => (
-        <Inline align="center" key={index}>
+        <Inline gap="4" align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -250,7 +250,7 @@ export function AcceptsOnlySVGFiles() {
   const uploadedFiles = files.length > 0 && (
     <AlphaStack gap="4">
       {files.map((file, index) => (
-        <Inline align="center" key={index}>
+        <Inline gap="4" align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -313,7 +313,7 @@ export function Nested() {
   const uploadedFiles = files.length > 0 && (
     <AlphaStack gap="4">
       {files.map((file, index) => (
-        <Inline align="center" key={index}>
+        <Inline gap="4" align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -385,7 +385,7 @@ export function WithCustomFileUploadText() {
   const uploadedFiles = files.length > 0 && (
     <AlphaStack gap="4">
       {files.map((file, index) => (
-        <Inline align="center" key={index}>
+        <Inline gap="4" align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -434,7 +434,7 @@ export function WithCustomFileDialogTrigger() {
   const uploadedFiles = files.length > 0 && (
     <AlphaStack gap="4">
       {files.map((file, index) => (
-        <Inline align="center" key={index}>
+        <Inline gap="4" align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}

polaris-react/src/components/Frame/components/Toast/Toast.tsx

@@ -74,7 +74,7 @@ export function Toast({
     <div className={className}>
       <KeypressListener keyCode={Key.Escape} handler={onDismiss} />
       {leadingIconMarkup}
-      <Inline blockAlign="center">
+      <Inline gap="4" blockAlign="center">
         <Text as="span" variant="bodyMd" fontWeight="medium">
           {content}
         </Text>

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

@@ -28,7 +28,6 @@ export interface InlineProps {
    */
   blockAlign?: BlockAlign;
   /** The spacing between elements. Accepts a spacing token or an object of spacing tokens for different screen sizes.
-   * @default '4'
    * @example
    * gap='2'
    * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
@@ -43,7 +42,7 @@ export interface InlineProps {
 export const Inline = function Inline({
   align = 'start',
   blockAlign = 'center',
-  gap = '4',
+  gap,
   wrap = true,
   children,
 }: InlineProps) {

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

@@ -17,4 +17,49 @@ describe('<Inline />', () => {
 
     expect(stack).toContainReactText(childText);
   });
+
+  it('renders custom properties by default', () => {
+    const stack = mountWithApp(<Inline>{renderChildren()}</Inline>);
+
+    expect(stack).toContainReactComponent('div', {
+      style: expect.objectContaining({
+        '--pc-inline-align': 'start',
+        '--pc-inline-block-align': 'center',
+        '--pc-inline-wrap': 'wrap',
+      }) as React.CSSProperties,
+    });
+  });
+
+  it('overrides custom properties if they are passed in', () => {
+    const stack = mountWithApp(
+      <Inline align="center" blockAlign="start" gap="10">
+        {renderChildren()}
+      </Inline>,
+    );
+
+    expect(stack).toContainReactComponent('div', {
+      style: expect.objectContaining({
+        '--pc-inline-align': 'center',
+        '--pc-inline-block-align': 'start',
+        '--pc-inline-wrap': 'wrap',
+        '--pc-inline-gap-xs': 'var(--p-space-10)',
+      }) as React.CSSProperties,
+    });
+  });
+
+  it('accepts gap based on breakpoints', () => {
+    const stack = mountWithApp(
+      <Inline gap={{xs: '2', md: '8'}}>{renderChildren()}</Inline>,
+    );
+
+    expect(stack).toContainReactComponent('div', {
+      style: expect.objectContaining({
+        '--pc-inline-align': 'start',
+        '--pc-inline-block-align': 'center',
+        '--pc-inline-wrap': 'wrap',
+        '--pc-inline-gap-xs': 'var(--p-space-2)',
+        '--pc-inline-gap-md': 'var(--p-space-8)',
+      }) as React.CSSProperties,
+    });
+  });
 });

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

@@ -156,7 +156,7 @@ export const Modal: React.FunctionComponent<ModalProps> & {
 
     const body = loading ? (
       <Box padding="4">
-        <Inline align="center">
+        <Inline gap="4" align="center">
           <Spinner />
         </Inline>
       </Box>

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

@@ -32,14 +32,14 @@ export function Footer({
     ) : null;
 
   return (
-    <Inline blockAlign="center">
+    <Inline gap="4" blockAlign="center">
       <Box
         borderBlockStart="divider"
         minHeight="var(--p-space-16)"
         padding="4"
         width="100%"
       >
-        <Inline blockAlign="center" align="space-between">
+        <Inline gap="4" blockAlign="center" align="space-between">
           <Box>{children}</Box>
           {actions}
         </Inline>

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

@@ -23,7 +23,7 @@ export function Header({
 }: HeaderProps) {
   const titleHiddenMarkup = (
     <Box position="absolute" insetInlineEnd="0" zIndex="1">
-      <Inline align="end">
+      <Inline gap="4" align="end">
         <CloseButton titleHidden={titleHidden} onClick={onClose} />
       </Inline>
     </Box>
@@ -42,7 +42,7 @@ export function Header({
       borderBlockEnd="divider"
     >
       <Columns columns={{xs: '1fr auto'}}>
-        <Inline>
+        <Inline gap="4">
           <Text id={id} as="h2" variant="headingLg" breakWord>
             {children}
           </Text>