Shopify · chazdean · Feb 23, 2023 · Feb 22, 2023 · Feb 22, 2023 · Feb 23, 2023
diff --git a/.changeset/eight-spies-complain.md b/.changeset/eight-spies-complain.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Removed default spacing from `Inline`
diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/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}

diff --git a/polaris-react/src/components/Banner/Banner.stories.tsx b/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>

diff --git a/polaris-react/src/components/DropZone/DropZone.stories.tsx b/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}

diff --git a/polaris-react/src/components/Frame/components/Toast/Toast.tsx b/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>

diff --git a/polaris-react/src/components/Inline/Inline.tsx b/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) {

diff --git a/polaris-react/src/components/Inline/tests/Inline.test.tsx b/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,
+    });
+  });
 });
diff --git a/polaris-react/src/components/Modal/Modal.tsx b/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>

diff --git a/polaris-react/src/components/Modal/components/Footer/Footer.tsx b/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>

diff --git a/polaris-react/src/components/Modal/components/Header/Header.tsx b/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>

diff --git a/polaris-react/src/components/Page/components/Header/Header.tsx b/polaris-react/src/components/Page/components/Header/Header.tsx
@@ -140,7 +140,7 @@ export function Header({
     ) : null;
 
   const additionalNavigationMarkup = additionalNavigation ? (
-    <Inline align="end">
+    <Inline gap="4" align="end">
       <Box printHidden>{additionalNavigation}</Box>
     </Inline>
   ) : null;
@@ -191,7 +191,7 @@ export function Header({
           actionMenuMarkup && isNavigationCollapsed ? '10' : undefined
         }
       >
-        <Inline align="space-between" blockAlign="center">
+        <Inline gap="4" align="space-between" blockAlign="center">
           {breadcrumbMarkup}
           {additionalNavigationMarkup}
           {paginationMarkup}
@@ -262,7 +262,7 @@ export function Header({
         </ConditionalRender>
         <ConditionalRender condition={[slot5, slot6].some(notNull)}>
           <div className={styles.Row}>
-            <Inline>{slot5}</Inline>
+            <Inline gap="4">{slot5}</Inline>
             <ConditionalRender condition={slot6 != null}>
               <div className={styles.RightAlign}>{slot6}</div>
             </ConditionalRender>

diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
@@ -204,6 +204,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
     if (media || selectable) {
       ownedMarkup = (
         <Inline
+          gap="4"
           blockAlign={
             media && selectable ? 'center' : getAlignment(verticalAlignment)
           }
@@ -295,7 +296,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
             gap="5"
           >
             {ownedMarkup}
-            <Inline blockAlign={getAlignment(verticalAlignment)}>
+            <Inline gap="4" blockAlign={getAlignment(verticalAlignment)}>
               <Box
                 width="100%"
                 padding="0"

diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -86,7 +86,7 @@ export function SkeletonPage({
             paddingInlineEnd={{xs: '4', sm: '0'}}
           >
             {breadcrumbMarkup}
-            <Inline align="space-between" blockAlign="center">
+            <Inline gap="4" align="space-between" blockAlign="center">
               <Box paddingBlockStart="1" paddingBlockEnd="1">
                 {titleContent}
               </Box>

diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx b/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx
@@ -42,7 +42,7 @@ const Placeholder = ({
         width: width ?? undefined,
       }}
     >
-      <Inline align={childAlign}>
+      <Inline gap="4" align={childAlign}>
         <div
           style={{
             display: 'inline-block',

diff --git a/polaris.shopify.com/pages/examples/bleed-all-directions.tsx b/polaris.shopify.com/pages/examples/bleed-all-directions.tsx
@@ -23,7 +23,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width,
       }}
     >
-      <Inline align="center">
+      <Inline gap="4" align="center">
         <div
           style={{
             color: '#FFFFFF',

diff --git a/polaris.shopify.com/pages/examples/bleed-horizontal.tsx b/polaris.shopify.com/pages/examples/bleed-horizontal.tsx
@@ -23,7 +23,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width,
       }}
     >
-      <Inline align="center">
+      <Inline gap="4" align="center">
         <div
           style={{
             color: '#FFFFFF',

diff --git a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
@@ -40,7 +40,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width,
       }}
     >
-      <Inline align="center">
+      <Inline gap="4" align="center">
         <div
           style={{
             color: '#FFFFFF',

diff --git a/polaris.shopify.com/pages/examples/bleed-vertical.tsx b/polaris.shopify.com/pages/examples/bleed-vertical.tsx
@@ -23,7 +23,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width,
       }}
     >
-      <Inline align="center">
+      <Inline gap="4" align="center">
         <div
           style={{
             color: '#FFFFFF',

diff --git a/polaris.shopify.com/pages/examples/box-with-padding.tsx b/polaris.shopify.com/pages/examples/box-with-padding.tsx
@@ -53,7 +53,7 @@ const Placeholder = ({
         width: width,
       }}
     >
-      <Inline align={childAlign}>
+      <Inline gap="4" align={childAlign}>
         <div
           style={{
             color: '#FFFFFF',

diff --git a/polaris.shopify.com/pages/examples/columns-default.tsx b/polaris.shopify.com/pages/examples/columns-default.tsx
@@ -26,7 +26,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width ?? undefined,
       }}
     >
-      <Inline align="center" blockAlign="center">
+      <Inline gap="4" align="center" blockAlign="center">
         <div
           style={{
             color: '#FFFFFF',

diff --git a/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx b/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx
@@ -26,7 +26,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width ?? undefined,
       }}
     >
-      <Inline align="center" blockAlign="center">
+      <Inline gap="4" align="center" blockAlign="center">
         <div
           style={{
             color: '#FFFFFF',

diff --git a/polaris.shopify.com/pages/examples/columns-with-set-number.tsx b/polaris.shopify.com/pages/examples/columns-with-set-number.tsx
@@ -48,7 +48,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width ?? undefined,
       }}
     >
-      <Inline align="center" blockAlign="center">
+      <Inline gap="4" align="center" blockAlign="center">
         <div
           style={{
             color: '#FFFFFF',

diff --git a/polaris.shopify.com/pages/examples/columns-with-varying-gap.tsx b/polaris.shopify.com/pages/examples/columns-with-varying-gap.tsx
@@ -43,7 +43,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width ?? undefined,
       }}
     >
-      <Inline align="center" blockAlign="center">
+      <Inline gap="4" align="center" blockAlign="center">
         <div
           style={{
             color: '#FFFFFF',

diff --git a/polaris.shopify.com/pages/examples/inline-with-gap.tsx b/polaris.shopify.com/pages/examples/inline-with-gap.tsx
@@ -6,9 +6,9 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function InlineWithGapExample() {
   return (
     <AlphaStack gap="8">
-      <Inline blockAlign="center">
+      <Inline gap="4" blockAlign="center">
         <SpacingBackground width="436px">
-          <Inline wrap={false}>
+          <Inline gap="4" wrap={false}>
             <Placeholder width="106px" height="36px" />
             <Placeholder width="106px" height="20px" />
             <Placeholder width="106px" height="20px" />
@@ -17,7 +17,7 @@ function InlineWithGapExample() {
         </SpacingBackground>
       </Inline>
       <SpacingBackground width="212px">
-        <Inline wrap={false}>
+        <Inline gap="4" wrap={false}>
           <Placeholder width="106px" height="20px" />
           <Placeholder width="106px" height="20px" />
         </Inline>