From 9dc5714bec55bdfa0bd73bbcbb604ebd86b7e1e1 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 3 Nov 2022 08:55:01 -0400
Subject: [PATCH 1/7] [Inline] Remove wrap children in div

---
 .changeset/quick-spies-grin.md                 | 5 +++++
 polaris-react/src/components/Inline/Inline.tsx | 8 +-------
 2 files changed, 6 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/quick-spies-grin.md

diff --git a/.changeset/quick-spies-grin.md b/.changeset/quick-spies-grin.md
new file mode 100644
index 00000000000..719ae630fee
--- /dev/null
+++ b/.changeset/quick-spies-grin.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Removed wrap children with div from Inline component
diff --git a/polaris-react/src/components/Inline/Inline.tsx b/polaris-react/src/components/Inline/Inline.tsx
index f2212666783..106568dd74b 100644
--- a/polaris-react/src/components/Inline/Inline.tsx
+++ b/polaris-react/src/components/Inline/Inline.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
 
-import {elementChildren} from '../../utilities/components';
-
 import styles from './Inline.scss';
 
 const AlignY = {
@@ -43,13 +41,9 @@ export const Inline = function Inline({
     '--pc-inline-spacing': `var(--p-space-${spacing})`,
   } as React.CSSProperties;
 
-  const itemMarkup = elementChildren(children).map((child, index) => {
-    return <div key={index}>{child}</div>;
-  });
-
   return (
     <div className={styles.Inline} style={style}>
-      {itemMarkup}
+      {children}
     </div>
   );
 };

From 36178ca2f0b892510e463b111b0c39afc44446f6 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 3 Nov 2022 09:06:35 -0400
Subject: [PATCH 2/7] Adjust stories

---
 .../src/components/Inline/Inline.stories.tsx  | 42 +++++++------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/polaris-react/src/components/Inline/Inline.stories.tsx b/polaris-react/src/components/Inline/Inline.stories.tsx
index 1dc438533a2..b2074700654 100644
--- a/polaris-react/src/components/Inline/Inline.stories.tsx
+++ b/polaris-react/src/components/Inline/Inline.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Badge, Heading, Icon, Inline} from '@shopify/polaris';
-import {CapitalMajor} from '@shopify/polaris-icons';
+import {Box, Badge, Heading, Icon, Inline, Thumbnail} from '@shopify/polaris';
+import {CapitalMajor, ImageMajor} from '@shopify/polaris-icons';
 
 export default {
   component: Inline,
@@ -13,7 +13,9 @@ export function Default() {
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
+      <Box>
+        <Icon source={CapitalMajor} color="primary" />
+      </Box>
     </Inline>
   );
 }
@@ -21,10 +23,10 @@ export function Default() {
 export function AlignYCenter() {
   return (
     <Inline alignY="center" spacing="1">
+      <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
@@ -32,10 +34,10 @@ export function AlignYCenter() {
 export function AlignYTop() {
   return (
     <Inline alignY="top">
+      <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
@@ -43,10 +45,10 @@ export function AlignYTop() {
 export function AlignYBottom() {
   return (
     <Inline alignY="bottom">
+      <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
@@ -54,21 +56,21 @@ export function AlignYBottom() {
 export function AlignYBaseline() {
   return (
     <Inline alignY="baseline">
+      <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
 
 export function AlignStart() {
   return (
-    <Inline align="start">
+    <Inline align="start" alignY="center">
+      <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
@@ -76,10 +78,10 @@ export function AlignStart() {
 export function AlignCenter() {
   return (
     <Inline align="center">
+      <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
@@ -87,10 +89,10 @@ export function AlignCenter() {
 export function AlignEnd() {
   return (
     <Inline align="end">
+      <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
@@ -98,10 +100,10 @@ export function AlignEnd() {
 export function AlignCenterAlignYCenter() {
   return (
     <Inline align="center" alignY="center">
+      <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
@@ -125,19 +127,3 @@ export function Spacing() {
     </Inline>
   );
 }
-
-export function VerticalCentering() {
-  return (
-    <Inline alignY="center">
-      <Heading>
-        Order
-        <br />
-        #1136
-        <br />
-        was paid
-      </Heading>
-      <Badge>Paid</Badge>
-      <Badge>Fulfilled</Badge>
-    </Inline>
-  );
-}

From 14229884ec4fb5a20441fefbeadcffd16bda05d5 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 3 Nov 2022 11:30:19 -0400
Subject: [PATCH 3/7] Update
 polaris-react/src/components/Inline/Inline.stories.tsx

Co-authored-by: Lo Kim <lo.kim@shopify.com>
---
 polaris-react/src/components/Inline/Inline.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-react/src/components/Inline/Inline.stories.tsx b/polaris-react/src/components/Inline/Inline.stories.tsx
index b2074700654..975f7e0ae73 100644
--- a/polaris-react/src/components/Inline/Inline.stories.tsx
+++ b/polaris-react/src/components/Inline/Inline.stories.tsx
@@ -33,7 +33,7 @@ export function AlignYCenter() {
 
 export function AlignYTop() {
   return (
-    <Inline alignY="top">
+    <Inline alignY="top" spacing="1'>
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>

From 364bc8f0b2031eff0968c4a8ccc6edd80c71fae8 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 3 Nov 2022 11:30:24 -0400
Subject: [PATCH 4/7] Update
 polaris-react/src/components/Inline/Inline.stories.tsx

Co-authored-by: Lo Kim <lo.kim@shopify.com>
---
 polaris-react/src/components/Inline/Inline.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-react/src/components/Inline/Inline.stories.tsx b/polaris-react/src/components/Inline/Inline.stories.tsx
index 975f7e0ae73..d186bef40b7 100644
--- a/polaris-react/src/components/Inline/Inline.stories.tsx
+++ b/polaris-react/src/components/Inline/Inline.stories.tsx
@@ -44,7 +44,7 @@ export function AlignYTop() {
 
 export function AlignYBottom() {
   return (
-    <Inline alignY="bottom">
+    <Inline alignY="bottom" spacing="1'>
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>

From 4e5944946ba060439599d1e055862b9cc16364fa Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 3 Nov 2022 11:30:31 -0400
Subject: [PATCH 5/7] Update
 polaris-react/src/components/Inline/Inline.stories.tsx

Co-authored-by: Lo Kim <lo.kim@shopify.com>
---
 polaris-react/src/components/Inline/Inline.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-react/src/components/Inline/Inline.stories.tsx b/polaris-react/src/components/Inline/Inline.stories.tsx
index d186bef40b7..4b776a55e27 100644
--- a/polaris-react/src/components/Inline/Inline.stories.tsx
+++ b/polaris-react/src/components/Inline/Inline.stories.tsx
@@ -55,7 +55,7 @@ export function AlignYBottom() {
 
 export function AlignYBaseline() {
   return (
-    <Inline alignY="baseline">
+    <Inline alignY="baseline" spacing="1'>
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>

From 2d354f06df28eb8680b4b4e143d8ddb994eb5ce3 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 3 Nov 2022 11:38:45 -0400
Subject: [PATCH 6/7] Fix stories

---
 polaris-react/src/components/Inline/Inline.stories.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/polaris-react/src/components/Inline/Inline.stories.tsx b/polaris-react/src/components/Inline/Inline.stories.tsx
index 4b776a55e27..1893ab591e7 100644
--- a/polaris-react/src/components/Inline/Inline.stories.tsx
+++ b/polaris-react/src/components/Inline/Inline.stories.tsx
@@ -33,7 +33,7 @@ export function AlignYCenter() {
 
 export function AlignYTop() {
   return (
-    <Inline alignY="top" spacing="1'>
+    <Inline alignY="top">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -44,7 +44,7 @@ export function AlignYTop() {
 
 export function AlignYBottom() {
   return (
-    <Inline alignY="bottom" spacing="1'>
+    <Inline alignY="bottom" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -55,7 +55,7 @@ export function AlignYBottom() {
 
 export function AlignYBaseline() {
   return (
-    <Inline alignY="baseline" spacing="1'>
+    <Inline alignY="baseline" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -77,7 +77,7 @@ export function AlignStart() {
 
 export function AlignCenter() {
   return (
-    <Inline align="center">
+    <Inline align="center" alignY="center">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -88,7 +88,7 @@ export function AlignCenter() {
 
 export function AlignEnd() {
   return (
-    <Inline align="end">
+    <Inline align="end" alignY="center">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>

From 4a413947f0c5b457fd5dbc4a79efb3f8346e7943 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 3 Nov 2022 11:44:04 -0400
Subject: [PATCH 7/7] Consistent spacing on examples

---
 .../src/components/Inline/Inline.stories.tsx       | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/polaris-react/src/components/Inline/Inline.stories.tsx b/polaris-react/src/components/Inline/Inline.stories.tsx
index 1893ab591e7..fd56382c62e 100644
--- a/polaris-react/src/components/Inline/Inline.stories.tsx
+++ b/polaris-react/src/components/Inline/Inline.stories.tsx
@@ -33,7 +33,7 @@ export function AlignYCenter() {
 
 export function AlignYTop() {
   return (
-    <Inline alignY="top">
+    <Inline alignY="top" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -66,7 +66,7 @@ export function AlignYBaseline() {
 
 export function AlignStart() {
   return (
-    <Inline align="start" alignY="center">
+    <Inline align="start" alignY="center" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -77,7 +77,7 @@ export function AlignStart() {
 
 export function AlignCenter() {
   return (
-    <Inline align="center" alignY="center">
+    <Inline align="center" alignY="center" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -88,7 +88,7 @@ export function AlignCenter() {
 
 export function AlignEnd() {
   return (
-    <Inline align="end" alignY="center">
+    <Inline align="end" alignY="center" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -99,7 +99,7 @@ export function AlignEnd() {
 
 export function AlignCenterAlignYCenter() {
   return (
-    <Inline align="center" alignY="center">
+    <Inline align="center" alignY="center" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -110,7 +110,7 @@ export function AlignCenterAlignYCenter() {
 
 export function NonWrapping() {
   return (
-    <Inline wrap={false}>
+    <Inline wrap={false} spacing="1">
       <Badge>Paid</Badge>
       <Badge>Processing</Badge>
       <Badge>Fulfilled</Badge>
@@ -123,7 +123,9 @@ export function Spacing() {
   return (
     <Inline spacing="8">
       <Badge>Paid</Badge>
+      <Badge>Processing</Badge>
       <Badge>Fulfilled</Badge>
+      <Badge>Completed</Badge>
     </Inline>
   );
 }