Inline remove wrap children in div (#7625)

Part of #7592

Reasons why we don't want to wrap children in div
- Unexpected layouts. Passing in an inline element gets renders in a
block
- Performance. Looping over ever child element to wrap in an extra div
can add up. This is also less performant on the client as it adds to the
DOM
- Argo and other consumers have to do funky things to match this
functionality cc @olavoasantos

Expected vs unexpected layout:

![image](https://user-images.githubusercontent.com/6844391/199729692-098b5bc0-7617-4561-95e5-556a711883a8.png)

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

Author: kyledurand

.changeset/quick-spies-grin.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Removed wrap children with div from Inline component

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,102 +13,104 @@ 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>
   );
 }
 
 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>
   );
 }
 
 export function AlignYTop() {
   return (
-    <Inline alignY="top">
+    <Inline alignY="top" spacing="1">
+      <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
 
 export function AlignYBottom() {
   return (
-    <Inline alignY="bottom">
+    <Inline alignY="bottom" spacing="1">
+      <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
 
 export function AlignYBaseline() {
   return (
-    <Inline alignY="baseline">
+    <Inline alignY="baseline" spacing="1">
+      <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" spacing="1">
+      <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
 
 export function AlignCenter() {
   return (
-    <Inline align="center">
+    <Inline align="center" alignY="center" spacing="1">
+      <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
 
 export function AlignEnd() {
   return (
-    <Inline align="end">
+    <Inline align="end" alignY="center" spacing="1">
+      <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
 
 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>
       <Badge>Three</Badge>
-      <Icon source={CapitalMajor} color="primary" />
     </Inline>
   );
 }
 
 export function NonWrapping() {
   return (
-    <Inline wrap={false}>
+    <Inline wrap={false} spacing="1">
       <Badge>Paid</Badge>
       <Badge>Processing</Badge>
       <Badge>Fulfilled</Badge>
@@ -121,23 +123,9 @@ export function Spacing() {
   return (
     <Inline spacing="8">
       <Badge>Paid</Badge>
+      <Badge>Processing</Badge>
       <Badge>Fulfilled</Badge>
-    </Inline>
-  );
-}
-
-export function VerticalCentering() {
-  return (
-    <Inline alignY="center">
-      <Heading>
-        Order
-        <br />
-        #1136
-        <br />
-        was paid
-      </Heading>
-      <Badge>Paid</Badge>
-      <Badge>Fulfilled</Badge>
+      <Badge>Completed</Badge>
     </Inline>
   );
 }

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>
   );
 };