fix(text): Numerical margin values being overwritten with 0 (#2220)

gabrielmfern · web-flow · commit 0a7b555bd5ee · 2025-05-06T11:23:34.000-03:00
diff --git a/.changeset/open-pears-sink.md b/.changeset/open-pears-sink.md
@@ -0,0 +1,5 @@
+---
+"@react-email/text": patch
+---
+
+fix numerical margin values being overwritten by 0
diff --git a/packages/text/src/__snapshots__/text.spec.tsx.snap b/packages/text/src/__snapshots__/text.spec.tsx.snap
@@ -1,3 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`<Text> component > gives priority to the user's style 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><p style="font-size:14px;line-height:24px;margin-top:0px;margin-bottom:16px"></p><!--/$-->"`;
+
+exports[`<Text> component > passes style and other props correctly 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><p style="font-size:16px;line-height:24px;margin-top:16px;margin-bottom:16px">Test</p><!--/$-->"`;
+
+exports[`<Text> component > renders children correctly 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><p style="font-size:14px;line-height:24px;margin-top:16px;margin-bottom:16px">Test message</p><!--/$-->"`;
+
 exports[`<Text> component > renders correctly 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><p style="font-size:14px;line-height:24px;margin-top:16px;margin-bottom:16px">Lorem ipsum</p><!--/$-->"`;
diff --git a/packages/text/src/text.spec.tsx b/packages/text/src/text.spec.tsx
@@ -5,24 +5,19 @@ describe('<Text> component', () => {
   it('renders children correctly', async () => {
     const testMessage = 'Test message';
     const html = await render(<Text>{testMessage}</Text>);
-    expect(html).toContain(testMessage);
+    expect(html).toMatchSnapshot();
   });
 
   it("gives priority to the user's style", async () => {
     const style = { marginTop: '0px' };
     const html = await render(<Text style={style} />);
-    expect(html).toContain('margin-top:0px');
+    expect(html).toMatchSnapshot();
   });
 
   it('passes style and other props correctly', async () => {
     const style = { fontSize: '16px' };
-    const html = await render(
-      <Text data-testid="text-test" style={style}>
-        Test
-      </Text>,
-    );
-    expect(html).toContain('font-size:16px');
-    expect(html).toContain('data-testid="text-test"');
+    const html = await render(<Text style={style}>Test</Text>);
+    expect(html).toMatchSnapshot();
   });
 
   it('renders correctly', async () => {
diff --git a/packages/text/src/utils/compute-margins.spec.ts b/packages/text/src/utils/compute-margins.spec.ts
@@ -1,6 +1,29 @@
 import { computeMargins } from './compute-margins';
 
 describe('parseMargins()', () => {
+  it('should work with numeric and text margins', () => {
+    expect(computeMargins({ margin: 24 })).toEqual({
+      marginTop: 24,
+      marginRight: 24,
+      marginBottom: 24,
+      marginLeft: 24,
+    });
+
+    expect(computeMargins({ margin: '24px' })).toEqual({
+      marginTop: '24px',
+      marginRight: '24px',
+      marginBottom: '24px',
+      marginLeft: '24px',
+    });
+
+    expect(computeMargins({ margin: '24px', marginTop: 10 })).toEqual({
+      marginTop: 10,
+      marginRight: '24px',
+      marginBottom: '24px',
+      marginLeft: '24px',
+    });
+  });
+
   it('should compute the margins according to the order of styles', () => {
     expect(
       computeMargins({
diff --git a/packages/text/src/utils/compute-margins.ts b/packages/text/src/utils/compute-margins.ts
@@ -17,7 +17,12 @@ interface MarginResult {
 
 function parseMarginValue(value: MarginType): MarginResult {
   if (typeof value === 'number')
-    return { marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0 };
+    return {
+      marginTop: value,
+      marginBottom: value,
+      marginLeft: value,
+      marginRight: value,
+    };
 
   if (typeof value === 'string') {
     const values = value.toString().trim().split(/\s+/);

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@react-email/text": patch
 +---
++
 +fix numerical margin values being overwritten by 0