[Stack] Fix valid children not getting wrapped in Item

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

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%;

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

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;