[Layout foundations] Update Inline component docs and guidance

.changeset/tender-rockets-wonder.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Updated `Inline` component docs and default prop values

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

@@ -29,10 +29,10 @@ export interface InlineProps {
 
 export const Inline = function Inline({
   children,
-  spacing = '1',
+  spacing = '4',
   align,
   alignY,
-  wrap,
+  wrap = true,
 }: InlineProps) {
   const style = {
     '--pc-inline-align': align,

polaris.shopify.com/content/components/inline.md

@@ -1,6 +1,6 @@
 ---
 title: Inline
-description: Use to lay out a horizontal row of components with equal spacing between and wrapping onto multiple lines. Options provide control of the wrapping, spacing, and relative size of the items in the inline.
+description: Use to arrange items in a horizontal row with equal spacing around them. Items wrap onto multiple lines when needed.
 category: Structure
 keywords:
   - layout
@@ -10,12 +10,27 @@ status:
 examples:
   - fileName: inline-default.tsx
     title: Default
-  - fileName: inline-with-align.tsx
-    title: Horizontal alignment
     description: >-
-      Horizontal alignment for children can be set with the align property.
-  - fileName: inline-with-align-y.tsx
+     Items are vertically centered with 16px of space around them. They’ll wrap onto multiple lines when needed.
+  - fileName: inline-with-non-wrapping.tsx
+    title: Non-wrapping
+    description: >-
+      Use to create Inline where the children will not wrap to new rows on small screens.
+  - fileName: inline-with-spacing.tsx
+    title: Spacing
+    description: >-
+      Use to control spacing of items in inline in standard increments.
+  - fileName: inline-with-vertical-alignment.tsx
     title: Vertical alignment
     description: >-
-      Vertical alignment for children can be set with the alignY property.
+      Use to vertically align Inline.
+  - fileName: inline-with-horizontal-alignment.tsx
+    title: Horizontal alignment
+    description: >-
+      Use to horizontally align Inline.
 ---
+
+## Related components
+
+- To create the large-scale structure of pages, [use the Columns](https://polaris.shopify.com/components/columns) and [Tile component](https://polaris.shopify.com/components/tile)
+- To display elements vertically, [use AlphaStack](https://polaris.shopify.com/components/alphastack)

polaris.shopify.com/pages/examples/inline-default.tsx

@@ -1,21 +1,31 @@
 import React from 'react';
-import {Badge, Inline, Text} from '@shopify/polaris';
+import {Inline} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineExample() {
   return (
-    <div style={{width: '100%'}}>
-      <Inline>
-        <Text variant="heading4xl" as="h2">
-          Inline
-        </Text>
-        <Badge>One</Badge>
-        <Badge>Two</Badge>
-        <Badge>Three</Badge>
-      </Inline>
-    </div>
+    <Inline>
+      <Placeholder width="106px" height="36px" />
+      <Placeholder width="106px" height="20px" />
+      <Placeholder width="106px" height="20px" />
+      <Placeholder width="106px" height="20px" />
+      <Placeholder width="106px" height="20px" />
+      <Placeholder width="106px" height="20px" />
+    </Inline>
   );
 }
 
+const Placeholder = ({height = 'auto', width = 'auto'}) => {
+  return (
+    <div
+      style={{
+        background: '#7B47F1',
+        height: height,
+        width: width,
+      }}
+    />
+  );
+};
+
 export default withPolarisExample(InlineExample);

polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {AlphaStack, Inline, Text, Page} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function InlineWithHorizontalAlignmentExample() {
+  return (
+    <Page narrowWidth>
+      <AlphaStack spacing="16">
+        <Inline align="start">
+          <Placeholder width="106px" label="Start" />
+          <Placeholder width="106px" height="20px" />
+          <Placeholder width="106px" height="20px" />
+          <Placeholder width="106px" height="20px" />
+          <Placeholder width="106px" height="20px" />
+          <Placeholder width="106px" height="20px" />
+        </Inline>
+        <Inline align="center">
+          <Placeholder width="106px" label="Center" />
+          <Placeholder width="106px" height="20px" />
+          <Placeholder width="106px" height="20px" />
+          <Placeholder width="106px" height="20px" />
+          <Placeholder width="106px" height="20px" />
+          <Placeholder width="106px" height="20px" />
+        </Inline>
+        <Inline align="end">
+          <Placeholder width="106px" label="End" />
+          <Placeholder width="106px" height="20px" />
+          <Placeholder width="106px" height="20px" />
+          <Placeholder width="106px" height="20px" />
+          <Placeholder width="106px" height="20px" />
+          <Placeholder width="106px" height="20px" />
+        </Inline>
+      </AlphaStack>
+    </Page>
+  );
+}
+
+const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
+  return (
+    <div
+      style={{
+        padding: '6px 0',
+        background: '#7B47F1',
+        height: height,
+        width: width,
+      }}
+    >
+      <Inline align="center" alignY="center">
+        <div
+          style={{
+            color: '#FFFFFF',
+          }}
+        >
+          <Text as="h2" variant="bodyMd" fontWeight="medium">
+            {label}
+          </Text>
+        </div>
+      </Inline>
+    </div>
+  );
+};
+
+export default withPolarisExample(InlineWithHorizontalAlignmentExample);

polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Inline} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function InlineWithNonWrappingExample() {
+  return (
+    <Inline wrap={false}>
+      <Placeholder width="106px" height="36px" />
+      <Placeholder width="106px" height="20px" />
+      <Placeholder width="106px" height="20px" />
+      <Placeholder width="106px" height="20px" />
+      <Placeholder width="106px" height="20px" />
+      <Placeholder width="106px" height="20px" />
+    </Inline>
+  );
+}
+
+const Placeholder = ({height = 'auto', width = 'auto'}) => {
+  return (
+    <div
+      style={{
+        background: '#7B47F1',
+        height: height,
+        width: width,
+      }}
+    />
+  );
+};
+
+export default withPolarisExample(InlineWithNonWrappingExample);

polaris.shopify.com/pages/examples/inline-with-spacing.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {Inline, AlphaStack} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function InlineWithSpacingExample() {
+  return (
+    <AlphaStack spacing="8">
+      <Inline alignY="center">
+        <SpacingBackground width="436px">
+          <Inline wrap={false}>
+            <Placeholder width="106px" height="36px" />
+            <Placeholder width="106px" height="20px" />
+            <Placeholder width="106px" height="20px" />
+            <Placeholder width="106px" height="20px" />
+          </Inline>
+        </SpacingBackground>
+      </Inline>
+      <SpacingBackground width="212px">
+        <Inline wrap={false}>
+          <Placeholder width="106px" height="20px" />
+          <Placeholder width="106px" height="20px" />
+        </Inline>
+      </SpacingBackground>
+    </AlphaStack>
+  );
+}
+
+const SpacingBackground = ({children, width}) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        background:
+          'repeating-linear-gradient(-45deg, #7B47F1, #7B47F1 1px, #E8D1FA 1px, #E8D1FA 7px)',
+        width: width ?? '100%',
+        height: '20px',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const Placeholder = ({height = 'auto', width = 'auto'}) => {
+  return (
+    <div
+      style={{
+        background: '#7B47F1',
+        height: height,
+        width: width,
+      }}
+    />
+  );
+};
+
+export default withPolarisExample(InlineWithSpacingExample);