Support space-evenly value for justifyContent attribute (#678)

vadimdemedes · Nov 15, 2024 · 1588397 · 1588397
1 parent 2090ad9
commit 1588397
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 1 deletion.
diff --git a/examples/justify-content/index.ts b/examples/justify-content/index.ts
@@ -0,0 +1 @@
+import './justify-content.js';
diff --git a/examples/justify-content/justify-content.tsx b/examples/justify-content/justify-content.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import {render, Box, Text} from '../../src/index.js';
+
+function JustifyContent() {
+	return (
+		<Box flexDirection="column">
+			<Box>
+				<Text>[</Text>
+				<Box justifyContent="flex-start" width={20} height={1}>
+					<Text>X</Text>
+					<Text>Y</Text>
+				</Box>
+				<Text>] flex-start</Text>
+			</Box>
+			<Box>
+				<Text>[</Text>
+				<Box justifyContent="flex-end" width={20} height={1}>
+					<Text>X</Text>
+					<Text>Y</Text>
+				</Box>
+				<Text>] flex-end</Text>
+			</Box>
+			<Box>
+				<Text>[</Text>
+				<Box justifyContent="center" width={20} height={1}>
+					<Text>X</Text>
+					<Text>Y</Text>
+				</Box>
+				<Text>] center</Text>
+			</Box>
+			<Box>
+				<Text>[</Text>
+				<Box justifyContent="space-around" width={20} height={1}>
+					<Text>X</Text>
+					<Text>Y</Text>
+				</Box>
+				<Text>] space-around</Text>
+			</Box>
+			<Box>
+				<Text>[</Text>
+				<Box justifyContent="space-between" width={20} height={1}>
+					<Text>X</Text>
+					<Text>Y</Text>
+				</Box>
+				<Text>] space-between</Text>
+			</Box>
+			<Box>
+				<Text>[</Text>
+				<Box justifyContent="space-evenly" width={20} height={1}>
+					<Text>X</Text>
+					<Text>Y</Text>
+				</Box>
+				<Text>] space-evenly</Text>
+			</Box>
+		</Box>
+	);
+}
+
+render(<JustifyContent />);
diff --git a/readme.md b/readme.md
@@ -837,7 +837,7 @@ See [align-self](https://css-tricks.com/almanac/properties/a/align-self/).
 ##### justifyContent
 
 Type: `string`\
-Allowed values: `flex-start` `center` `flex-end` `space-between` `space-around`
+Allowed values: `flex-start` `center` `flex-end` `space-between` `space-around` `space-evenly`
 
 See [justify-content](https://css-tricks.com/almanac/properties/j/justify-content/).
 
@@ -868,6 +868,12 @@ See [justify-content](https://css-tricks.com/almanac/properties/j/justify-conten
 	<Text>Y</Text>
 </Box>
 // [  X   Y  ]
+
+<Box justifyContent="space-evenly">
+	<Text>X</Text>
+	<Text>Y</Text>
+</Box>
+// [   X   Y   ]
 ```
 
 #### Visibility

diff --git a/src/styles.ts b/src/styles.ts
@@ -152,6 +152,7 @@ export type Styles = {
 		| 'flex-end'
 		| 'space-between'
 		| 'space-around'
+		| 'space-evenly'
 		| 'center';
 
 	/**
@@ -483,6 +484,10 @@ const applyFlexStyles = (node: YogaNode, style: Styles): void => {
 		if (style.justifyContent === 'space-around') {
 			node.setJustifyContent(Yoga.JUSTIFY_SPACE_AROUND);
 		}
+
+		if (style.justifyContent === 'space-evenly') {
+			node.setJustifyContent(Yoga.JUSTIFY_SPACE_EVENLY);
+		}
 	}
 };
 

diff --git a/test/flex-justify-content.tsx b/test/flex-justify-content.tsx
@@ -57,6 +57,17 @@ test('row - align two text nodes on the edges', t => {
 	t.is(output, 'A  B');
 });
 
+test('row - space evenly two text nodes', t => {
+	const output = renderToString(
+		<Box justifyContent="space-evenly" width={10}>
+			<Text>A</Text>
+			<Text>B</Text>
+		</Box>,
+	);
+
+	t.is(output, '  A   B');
+});
+
 // Yoga has a bug, where first child in a container with space-around doesn't have
 // the correct X coordinate and measure function is used on that child node
 test.failing('row - align two text nodes with equal space around them', t => {