Support flexWrap in Box (#479)

readme.md

@@ -682,6 +682,32 @@ See [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/
 // X
 ```
 
+##### flexWrap
+
+Type: `string`\
+Allowed values: `nowrap` `wrap` `wrap-reverse`
+
+See [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/).
+
+```jsx
+<Box width={2} flexWrap="wrap">
+	<Text>A</Text>
+	<Text>BC</Text>
+</Box>
+// A
+// B C
+```
+
+```jsx
+<Box flexDirection="column" height={2} flexWrap="wrap">
+	<Text>A</Text>
+	<Text>B</Text>
+	<Text>C</Text>
+</Box>
+// A C
+// B
+```
+
 ##### alignItems
 
 Type: `string`\

src/components/Box.tsx

@@ -100,6 +100,7 @@ const Box = forwardRef<DOMElement, PropsWithChildren<Props>>(
 Box.displayName = 'Box';
 
 Box.defaultProps = {
+	flexWrap: 'nowrap',
 	flexDirection: 'row',
 	flexGrow: 0,
 	flexShrink: 1

src/styles.ts

@@ -81,6 +81,12 @@ export type Styles = {
 	 */
 	readonly flexBasis?: number | string;
 
+	/**
+	 * It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in.
+	 * See [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/).
+	 */
+	readonly flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+
 	/**
 	 * The align-items property defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis).
 	 * See [align-items](https://css-tricks.com/almanac/properties/a/align-items/).
@@ -211,6 +217,20 @@ const applyFlexStyles = (node: YogaNode, style: Styles): void => {
 		);
 	}
 
+	if ('flexWrap' in style) {
+		if (style.flexWrap === 'nowrap') {
+			node.setFlexWrap(Yoga.WRAP_NO_WRAP);
+		}
+
+		if (style.flexWrap === 'wrap') {
+			node.setFlexWrap(Yoga.WRAP_WRAP);
+		}
+
+		if (style.flexWrap === 'wrap-reverse') {
+			node.setFlexWrap(Yoga.WRAP_WRAP_REVERSE);
+		}
+	}
+
 	if ('flexDirection' in style) {
 		if (style.flexDirection === 'row') {
 			node.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);

test/flex-wrap.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import test from 'ava';
+import {Box, Text} from '../src/index.js';
+import {renderToString} from './helpers/render-to-string.js';
+
+test('row - no wrap', t => {
+	const output = renderToString(
+		<Box width={2}>
+			<Text>A</Text>
+			<Text>BC</Text>
+		</Box>
+	);
+
+	t.is(output, 'BC\n');
+});
+
+test('column - no wrap', t => {
+	const output = renderToString(
+		<Box flexDirection="column" height={2}>
+			<Text>A</Text>
+			<Text>B</Text>
+			<Text>C</Text>
+		</Box>
+	);
+
+	t.is(output, 'B\nC');
+});
+
+test('row - wrap content', t => {
+	const output = renderToString(
+		<Box width={2} flexWrap="wrap">
+			<Text>A</Text>
+			<Text>BC</Text>
+		</Box>
+	);
+
+	t.is(output, 'A\nBC');
+});
+
+test('column - wrap content', t => {
+	const output = renderToString(
+		<Box flexDirection="column" height={2} flexWrap="wrap">
+			<Text>A</Text>
+			<Text>B</Text>
+			<Text>C</Text>
+		</Box>
+	);
+
+	t.is(output, 'AC\nB');
+});
+
+test('column - wrap content reverse', t => {
+	const output = renderToString(
+		<Box flexDirection="column" height={2} width={3} flexWrap="wrap-reverse">
+			<Text>A</Text>
+			<Text>B</Text>
+			<Text>C</Text>
+		</Box>
+	);
+
+	t.is(output, ' CA\n  B');
+});
+
+test('row - wrap content reverse', t => {
+	const output = renderToString(
+		<Box height={3} width={2} flexWrap="wrap-reverse">
+			<Text>A</Text>
+			<Text>B</Text>
+			<Text>C</Text>
+		</Box>
+	);
+
+	t.is(output, '\nC\nAB');
+});