Prevent squashing of text nodes if flexDirection="column" is set on container

Author: Vadim Demedes

src/render-node-to-output.js

@@ -32,11 +32,12 @@ const renderNodeToOutput = (node, output, {offsetX = 0, offsetY = 0, transformer
 		//
 		// Also, this is necessary for libraries like ink-link (https://github.com/sindresorhus/ink-link),
 		// which need to wrap all children at once, instead of wrapping 3 text nodes separately.
+		const isFlexDirectionColumn = node.style.flexDirection === 'column';
 		const isAllTextNodes = node.childNodes.every(childNode => {
 			return Boolean(childNode.nodeValue) || (childNode.nodeName === 'SPAN' && Boolean(childNode.textContent));
 		});
 
-		if (isAllTextNodes) {
+		if (!isFlexDirectionColumn && isAllTextNodes) {
 			let text = '';
 
 			for (const childNode of node.childNodes) {

test/flex-direction.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import test from 'ava';
-import {Box} from '..';
+import {Box, Text} from '..';
 import renderToString from './helpers/render-to-string';
 
 test('direction row', t => {
@@ -46,3 +46,14 @@ test('direction column reverse', t => {
 
 	t.is(output, '\n\nB\nA');
 });
+
+test('don\'t squash text nodes when column direction is applied', t => {
+	const output = renderToString(
+		<Box flexDirection="column">
+			<Text>A</Text>
+			<Text>B</Text>
+		</Box>
+	);
+
+	t.is(output, 'A\nB');
+});