From f1c3d86a84d13377cabca1135bb7c2918c3f93fb Mon Sep 17 00:00:00 2001 From: Mark Yu Date: Fri, 1 Nov 2024 17:06:18 -0400 Subject: [PATCH 1/5] implement space-evenly --- examples/justifyContent/index.ts | 1 + examples/justifyContent/justifyContent.tsx | 59 ++++++++++++++++++++++ src/styles.ts | 5 ++ 3 files changed, 65 insertions(+) create mode 100644 examples/justifyContent/index.ts create mode 100644 examples/justifyContent/justifyContent.tsx diff --git a/examples/justifyContent/index.ts b/examples/justifyContent/index.ts new file mode 100644 index 00000000..908c2c3e --- /dev/null +++ b/examples/justifyContent/index.ts @@ -0,0 +1 @@ +import './justifyContent.js'; diff --git a/examples/justifyContent/justifyContent.tsx b/examples/justifyContent/justifyContent.tsx new file mode 100644 index 00000000..30010cda --- /dev/null +++ b/examples/justifyContent/justifyContent.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import {render, Box, Text} from '../../src/index.js'; + +function JustifyContent() { + return ( + + + [ + + X + Y + + ] + + + [ + + X + Y + + ] + + + [ + + X + Y + + ] + + + [ + + X + Y + + ] + + + [ + + X + Y + + ] + + + [ + + X + Y + + ] + + + ); +} + +render(); diff --git a/src/styles.ts b/src/styles.ts index f465299a..f10ed4c0 100644 --- 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); + } } }; From 2868601417ad2137b9a9fec1d23e54c46192593f Mon Sep 17 00:00:00 2001 From: Mark Yu Date: Fri, 1 Nov 2024 17:26:10 -0400 Subject: [PATCH 2/5] add text --- examples/justifyContent/justifyContent.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/justifyContent/justifyContent.tsx b/examples/justifyContent/justifyContent.tsx index 30010cda..a1b186ae 100644 --- a/examples/justifyContent/justifyContent.tsx +++ b/examples/justifyContent/justifyContent.tsx @@ -10,7 +10,7 @@ function JustifyContent() { X Y - ] + ] flex-start [ @@ -18,7 +18,7 @@ function JustifyContent() { X Y - ] + ] flex-end [ @@ -26,7 +26,7 @@ function JustifyContent() { X Y - ] + ] center [ @@ -34,7 +34,7 @@ function JustifyContent() { X Y - ] + ] space-around [ @@ -42,7 +42,7 @@ function JustifyContent() { X Y - ] + ] space-between [ @@ -50,7 +50,7 @@ function JustifyContent() { X Y - ] + ] space-evenly ); From 1831c09df385ffdda742d5ca56fc00bcdf199837 Mon Sep 17 00:00:00 2001 From: Mark Yu Date: Fri, 1 Nov 2024 17:30:39 -0400 Subject: [PATCH 3/5] update readme.md --- readme.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 4454f30d..4dd514d1 100644 --- 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 Y // [ X Y ] + + + X + Y + +// [ X Y ] ``` #### Visibility From 011d4ca42abfed3542f0916bae0fe1c0336a1d23 Mon Sep 17 00:00:00 2001 From: Mark Date: Sat, 2 Nov 2024 07:23:19 -0400 Subject: [PATCH 4/5] change to kebab case --- examples/justify-content/index.ts | 1 + .../justifyContent.tsx => justify-content/justify-content.tsx} | 0 examples/justifyContent/index.ts | 1 - 3 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 examples/justify-content/index.ts rename examples/{justifyContent/justifyContent.tsx => justify-content/justify-content.tsx} (100%) delete mode 100644 examples/justifyContent/index.ts diff --git a/examples/justify-content/index.ts b/examples/justify-content/index.ts new file mode 100644 index 00000000..5de35c38 --- /dev/null +++ b/examples/justify-content/index.ts @@ -0,0 +1 @@ +import './justify-content'; diff --git a/examples/justifyContent/justifyContent.tsx b/examples/justify-content/justify-content.tsx similarity index 100% rename from examples/justifyContent/justifyContent.tsx rename to examples/justify-content/justify-content.tsx diff --git a/examples/justifyContent/index.ts b/examples/justifyContent/index.ts deleted file mode 100644 index 908c2c3e..00000000 --- a/examples/justifyContent/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './justifyContent.js'; From c2d7404273c828a0463a6c1d5a0747f62a8c28fe Mon Sep 17 00:00:00 2001 From: Mark Yu Date: Wed, 6 Nov 2024 17:47:29 -0500 Subject: [PATCH 5/5] add unit test. fix CI --- examples/justify-content/index.ts | 2 +- test/flex-justify-content.tsx | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/examples/justify-content/index.ts b/examples/justify-content/index.ts index 5de35c38..ca4fce19 100644 --- a/examples/justify-content/index.ts +++ b/examples/justify-content/index.ts @@ -1 +1 @@ -import './justify-content'; +import './justify-content.js'; diff --git a/test/flex-justify-content.tsx b/test/flex-justify-content.tsx index bd0e5091..3227781c 100644 --- 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( + + A + B + , + ); + + 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 => {