[Layout] Add responsive gap support to Inline

.changeset/ten-peaches-exist.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Added support for responsive `gap` on `Inline`

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

@@ -1,6 +1,8 @@
+@import '../../styles/common';
+
 .Inline {
+  @include responsive-props('inline', 'gap', 'gap');
   display: flex;
-  gap: var(--pc-inline-gap);
   flex-wrap: var(--pc-inline-wrap);
   align-items: var(--pc-inline-block-align);
   justify-content: var(--pc-inline-align);

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

@@ -1,6 +1,13 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Box, Badge, Icon, Inline, Thumbnail} from '@shopify/polaris';
+import {
+  Box,
+  Badge,
+  Icon,
+  Inline,
+  Thumbnail,
+  AlphaStack,
+} from '@shopify/polaris';
 import {CapitalMajor, ImageMajor} from '@shopify/polaris-icons';
 
 export default {
@@ -162,11 +169,33 @@ export function NonWrapping() {
 
 export function Gap() {
   return (
-    <Inline gap="8">
-      <Badge>Paid</Badge>
-      <Badge>Processing</Badge>
-      <Badge>Fulfilled</Badge>
-      <Badge>Completed</Badge>
-    </Inline>
+    <AlphaStack>
+      <Inline gap="8">
+        <Badge>Paid</Badge>
+        <Badge>Processing</Badge>
+        <Badge>Fulfilled</Badge>
+        <Badge>Completed</Badge>
+      </Inline>
+
+      <Inline gap={{xs: '2', md: '4'}}>
+        <Badge>Paid</Badge>
+        <Badge>Processing</Badge>
+        <Badge>Fulfilled</Badge>
+        <Badge>Completed</Badge>
+      </Inline>
+    </AlphaStack>
+  );
+}
+
+export function GapResponsive() {
+  return (
+    <AlphaStack>
+      <Inline gap={{xs: '2', md: '4'}}>
+        <Badge>Paid</Badge>
+        <Badge>Processing</Badge>
+        <Badge>Fulfilled</Badge>
+        <Badge>Completed</Badge>
+      </Inline>
+    </AlphaStack>
   );
 }

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
 
+import {getResponsiveProps} from '../../utilities/css';
+import type {ResponsiveProp} from '../../utilities/css';
+
 import styles from './Inline.scss';
 
 type Align =
@@ -12,6 +15,8 @@ type Align =
   | 'space-evenly';
 type BlockAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 
+type Gap = ResponsiveProp<SpacingSpaceScale>;
+
 export interface InlineProps {
   /** Adjust horizontal alignment of elements
    * @default 'start'
@@ -21,10 +26,13 @@ export interface InlineProps {
    * @default 'center'
    */
   blockAlign?: BlockAlign;
-  /** The spacing between elements
+  /** 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'}}
    */
-  gap?: SpacingSpaceScale;
+  gap?: Gap;
   /** Wrap stack elements to additional rows as needed on small screens
    * @default true
    */
@@ -44,7 +52,7 @@ export const Inline = function Inline({
     '--pc-inline-align': align,
     '--pc-inline-block-align': blockAlign,
     '--pc-inline-wrap': wrap ? 'wrap' : 'nowrap',
-    '--pc-inline-gap': `var(--p-space-${gap})`,
+    ...getResponsiveProps('inline', 'gap', 'space', gap),
   } as React.CSSProperties;
 
   return (