From d994cad4225141e22337f46ea02e75fbf8cb79a6 Mon Sep 17 00:00:00 2001
From: thesisb <shadiisber@gmail.com>
Date: Thu, 6 Aug 2020 13:52:27 -0500
Subject: [PATCH] fix(stack): now works with text strings as children

- Minor perf improvement in most cases too
---
 .../paste-core/layout/stack/src/index.tsx     | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/paste-core/layout/stack/src/index.tsx b/packages/paste-core/layout/stack/src/index.tsx
index 7ccb89e4ec..4f2e91c336 100644
--- a/packages/paste-core/layout/stack/src/index.tsx
+++ b/packages/paste-core/layout/stack/src/index.tsx
@@ -10,7 +10,7 @@ import {
   MarginProps,
   SpaceOptions,
 } from '@twilio-paste/style-props';
-import {Box, BoxProps, safelySpreadBoxProps} from '@twilio-paste/box';
+import {Box, BoxElementProps, safelySpreadBoxProps} from '@twilio-paste/box';
 
 type StackChildMargins = Pick<MarginProps, 'marginRight' | 'marginBottom'>;
 type DisplayOptions = 'block' | 'flex';
@@ -19,7 +19,7 @@ type StackOrientationOptions = 'horizontal' | 'vertical';
 export type StackOrientation = ResponsiveValue<StackOrientationOptions>;
 
 interface StackStyleProps extends Pick<LayoutProps, 'display'>, Pick<FlexboxProps, 'alignItems' | 'flexWrap'> {}
-export interface StackProps extends Pick<BoxProps, 'as'>, React.HTMLAttributes<any> {
+export interface StackProps extends BoxElementProps {
   orientation: StackOrientation;
   spacing: SpaceOptions;
 }
@@ -82,15 +82,21 @@ export const getStackChildMargins = (orientation: StackOrientation, spacing: Spa
 };
 
 const Stack: React.FC<StackProps> = ({children, orientation, spacing, ...props}) => {
-  const count = React.useMemo(() => React.Children.count(children), [children]);
-  const StackStyles = React.useMemo(() => getStackStyles(orientation), [orientation]);
-  const validChildren = React.Children.toArray(children).filter(React.isValidElement);
+  const [childrenCount, validChildren] = React.useMemo(
+    () => [
+      React.Children.count(children),
+      React.Children.toArray(children).filter(child => React.isValidElement(child) || typeof child === 'string'),
+    ],
+    [children]
+  );
+  const stackStyles = React.useMemo(() => getStackStyles(orientation), [orientation]);
+  const childMargins = React.useMemo(() => getStackChildMargins(orientation, spacing), [orientation, spacing]);
 
   return (
-    <Box {...safelySpreadBoxProps(props)} {...StackStyles}>
+    <Box {...safelySpreadBoxProps(props)} {...stackStyles}>
       {validChildren.map((child, index) => {
         return (
-          <Box {...(count !== index + 1 ? {...getStackChildMargins(orientation, spacing)} : null)} key={useUID()}>
+          <Box {...(childrenCount !== index + 1 ? childMargins : null)} key={useUID()}>
             {child}
           </Box>
         );