fix: Make Columns component grow in a flex container (#514)

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+## v9.2.0-beta.10
+
+-   [Fix] `Columns` component will now stretch within a flex container
+
 ## v9.2.0-beta.9
 
 -   [Docs] Upgraded all beta storybook docs to work with Storybook 6

docs/iframe.html

@@ -245,4 +245,4 @@
 
 
 
-              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.39f9346e.iframe.bundle.js"></script><script src="vendors~main.cd2fad6b.iframe.bundle.js"></script><script src="main.98cec5e9.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.233fc521.iframe.bundle.js"></script><script src="vendors~main.7a1034ee.iframe.bundle.js"></script><script src="main.10470b2d.iframe.bundle.js"></script></body></html>

src/new-components/columns/columns.stories.tsx

@@ -11,6 +11,7 @@ import {
     disableResponsiveProps,
 } from '../storybook-helper'
 import { Stack } from '../stack'
+import { Box } from '../box'
 import { Columns, Column } from './columns'
 
 import type {
@@ -274,3 +275,29 @@ ResponsiveStory.argTypes = {
     alignY: { control: false },
     ...disableResponsiveProps,
 }
+
+export function FlexChildStory(args: PartialProps<typeof Columns>) {
+    return (
+        <Wrapper title="As a flex child">
+            <Box display="flex" alignItems="center">
+                <Box>
+                    <Placeholder label="Element outside of Columns" />
+                </Box>
+                <Columns {...args}>
+                    {times(5).map((i) => (
+                        <Column key={i}>
+                            <Placeholder label={i + 1} height={50} />
+                        </Column>
+                    ))}
+                </Columns>
+            </Box>
+        </Wrapper>
+    )
+}
+
+FlexChildStory.argTypes = {
+    space: selectSize('medium'),
+    align: { control: false },
+    alignY: { control: false },
+    ...disableResponsiveProps,
+}

src/new-components/columns/columns.tsx

@@ -82,6 +82,7 @@ const Columns = forwardRefWithAs<ColumnsProps>(function Columns(
             justifyContent={mapResponsiveProp(align, (align) =>
                 align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center',
             )}
+            flexGrow={1}
             ref={ref}
         >
             {children}