feat: add gap percentage support

.changeset/gentle-news-invite.md

@@ -0,0 +1,6 @@
+---
+"@react-pdf/renderer": minor
+"@react-pdf/layout": minor
+---
+
+feat: add gap percentage support

packages/layout/package.json

@@ -29,7 +29,7 @@
     "cross-fetch": "^3.1.5",
     "emoji-regex": "^10.3.0",
     "queue": "^6.0.1",
-    "yoga-layout": "^3.0.0"
+    "yoga-layout": "^3.1.0"
   },
   "files": [
     "lib"

packages/layout/src/node/setGap.js

@@ -1,27 +1,12 @@
 import * as Yoga from 'yoga-layout/load';
-import { isNil, matchPercent } from '@react-pdf/fns';
+import { isNil } from '@react-pdf/fns';
 
 /**
  * @typedef {Function} NodeInstanceWrapper
  * @param {Object} node node instance
  * @returns {Object} node instance
  */
 
-/**
- * Check if value is a percentage and throw error if so
- *
- * @param {string} attr property
- * @param {unknown} value
- * @returns {void}
- */
-const checkPercents = (attr, value) => {
-  const percent = matchPercent(value);
-
-  if (percent) {
-    throw new Error(`You can't pass percentage values to ${attr} property`);
-  }
-};
-
 /**
  * Set rowGap value to node's Yoga instance
  *
@@ -32,7 +17,6 @@ export const setRowGap = (value) => (node) => {
   const { yogaNode } = node;
 
   if (!isNil(value) && yogaNode) {
-    checkPercents('rowGap', value);
     yogaNode.setGap(Yoga.Gutter.Row, value);
   }
 
@@ -49,7 +33,6 @@ export const setColumnGap = (value) => (node) => {
   const { yogaNode } = node;
 
   if (!isNil(value) && yogaNode) {
-    checkPercents('columnGap', value);
     yogaNode.setGap(Yoga.Gutter.Column, value);
   }
 

packages/renderer/tests/gap.test.jsx

@@ -55,6 +55,34 @@ describe('flex', () => {
     expect(image).toMatchImageSnapshot();
   });
 
+  test('should support percentage gap', async () => {
+    const image = await mount(
+      <View
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexWrap: 'wrap',
+          backgroundColor: '#e2e2e2',
+          gap: '15%',
+        }}
+      >
+        {items.map((color, index) => (
+          <View
+            key={index}
+            style={{
+              width: 10,
+              height: 10,
+              backgroundColor: color,
+            }}
+          />
+        ))}
+      </View>,
+    );
+
+    expect(image).toMatchImageSnapshot();
+  });
+
   test('should support rowGap and columnGap', async () => {
     const image = await mount(
       <View
@@ -84,9 +112,32 @@ describe('flex', () => {
     expect(image).toMatchImageSnapshot();
   });
 
-  test('should throw when value is percent', async () => {
-    expect(mount(<View style={{ gap: '10%' }} />)).rejects.toThrow(
-      "You can't pass percentage values to columnGap property",
+  test('should support percentage rowGap and columnGap', async () => {
+    const image = await mount(
+      <View
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexWrap: 'wrap',
+          backgroundColor: '#e2e2e2',
+          rowGap: '10%',
+          columnGap: '20%',
+        }}
+      >
+        {items.map((color, index) => (
+          <View
+            key={index}
+            style={{
+              width: 10,
+              height: 10,
+              backgroundColor: color,
+            }}
+          />
+        ))}
+      </View>,
     );
+
+    expect(image).toMatchImageSnapshot();
   });
 });

yarn.lock

@@ -10222,7 +10222,7 @@ yocto-queue@^1.0.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
-yoga-layout@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/yoga-layout/-/yoga-layout-3.0.3.tgz#0231bfbffe0b3aeb09fed53e02599d5c954d1946"
-  integrity sha512-7Y9/DP9BaEDKwrL2+rQPq5HFYSOdwED0hPceuXd1NIdnxQf6hnrYGMZBnUqG1CLXXL6njh/dEjsli574OmAcVw==
+yoga-layout@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/yoga-layout/-/yoga-layout-3.1.0.tgz#04d00d7c2160635640dc79b48e7e4fc6a2fba2b2"
+  integrity sha512-auzJ8lEovThZIpR8wLGWNo/JEj4VTO79q9/gOJ0dWb3shAYPFdX3t9VN0fC0v+jeQF77STUdCzebLwRMqzn5gQ==