From 0dd04395de124671e5e0641246a4a34445b9d6e3 Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloe.rice@shopify.com>
Date: Wed, 27 Oct 2021 16:01:43 -0400
Subject: [PATCH] [Stack] Fix valid children not getting wrapped in Item

---
 UNRELEASED.md                             |  6 +++++-
 src/components/Stack/Stack.scss           |  2 +-
 src/components/Stack/Stack.tsx            | 19 ++-----------------
 src/components/Stack/tests/Stack.test.tsx | 13 -------------
 4 files changed, 8 insertions(+), 32 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 644c5159f58..0d8689cefd9 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -6,10 +6,14 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
-- Updated the MediaCard's primary and secondary action type to accept ComplexAction ([#4546](https://github.com/shopify/polaris-react/pull/4546))
+- Updated the primary and secondary action type on `MediaCard` to `ComplexAction` ([#4546](https://github.com/shopify/polaris-react/pull/4546))
 
 ### Bug fixes
 
+- Fixed `Stack.Item` having margin when empty ([#4556](https://github.com/Shopify/polaris-react/pull/4556))
+
+- Fixed `Stack` not wrapping valid children in `Stack.Item` ([#4556](https://github.com/Shopify/polaris-react/pull/4556)) (thanks [@benjamindoe](https://github.com/benjamindoe) for the [original issue](https://github.com/Shopify/polaris-react/issues/4555))
+
 ### Documentation
 
 ### Development workflow
diff --git a/src/components/Stack/Stack.scss b/src/components/Stack/Stack.scss
index 1254df60020..0d63f68ed81 100644
--- a/src/components/Stack/Stack.scss
+++ b/src/components/Stack/Stack.scss
@@ -7,7 +7,7 @@
   margin-top: -1 * spacing($spacing);
   margin-left: -1 * spacing($spacing);
 
-  > .Item {
+  > .Item:not(:empty) {
     margin-top: spacing($spacing);
     margin-left: spacing($spacing);
     max-width: 100%;
diff --git a/src/components/Stack/Stack.tsx b/src/components/Stack/Stack.tsx
index 0bb95a8db50..c353143c52b 100644
--- a/src/components/Stack/Stack.tsx
+++ b/src/components/Stack/Stack.tsx
@@ -39,10 +39,6 @@ export interface StackProps {
   distribution?: Distribution;
 }
 
-interface ChildProps {
-  readonly key: number;
-}
-
 export const Stack = memo(function Stack({
   children,
   vertical,
@@ -60,20 +56,9 @@ export const Stack = memo(function Stack({
     wrap === false && styles.noWrap,
   );
 
-  const unwrappedComponent = (child: JSX.Element, props: ChildProps) => ({
-    ...child,
-    props: {
-      ...child.props,
-      ...props,
-    },
-  });
-
   const itemMarkup = elementChildren(children).map((child, index) => {
-    const props: ChildProps = {key: index};
-    const isValidChildren = child.props.children;
-    return isValidChildren
-      ? wrapWithComponent(child, Item, props)
-      : unwrappedComponent(child, props);
+    const props = {key: index};
+    return wrapWithComponent(child, Item, props);
   });
 
   return <div className={className}>{itemMarkup}</div>;
diff --git a/src/components/Stack/tests/Stack.test.tsx b/src/components/Stack/tests/Stack.test.tsx
index 85f17d20aa5..7e6a2dc1971 100644
--- a/src/components/Stack/tests/Stack.test.tsx
+++ b/src/components/Stack/tests/Stack.test.tsx
@@ -11,17 +11,4 @@ describe('<Stack />', () => {
 
     expect(stack).toContainReactComponentTimes(Stack.Item, 2);
   });
-
-  it('does not render a Stack.Item to falsy children', () => {
-    const stack = mountWithApp(
-      <Stack>
-        {renderChildren()}
-        <FalsyComponent />
-      </Stack>,
-    );
-
-    expect(stack).toContainReactComponentTimes(Stack.Item, 2);
-  });
 });
-
-const FalsyComponent = () => null;