Skip to content

Commit dff5b8c

Browse files
gabrielmferngabrielmfern
committed
fix(text): Priority of margin properties given by style not kept (#2104)
1 parent 17cad5d commit dff5b8c

File tree

8 files changed

+162
-84
lines changed

8 files changed

+162
-84
lines changed

‎.changeset/plenty-camels-switch.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@react-email/text": patch
3+
---
4+
5+
Fix priority of margin styles not being kept

‎packages/react-email/src/cli/commands/testing/__snapshots__/export.spec.ts.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,12 @@ exports[`email export 1`] = `
5656
Join <strong></strong> on <strong>Vercel</strong>
5757
</h1>
5858
<p
59-
style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-bottom:16px;margin-top:16px">
59+
style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
6060
Hello
6161
<!-- -->,
6262
</p>
6363
<p
64-
style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-bottom:16px;margin-top:16px">
64+
style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
6565
<strong></strong> (<a
6666
href="mailto:undefined"
6767
style="color:rgb(37,99,235);text-decoration-line:none"
@@ -145,7 +145,7 @@ exports[`email export 1`] = `
145145
</tbody>
146146
</table>
147147
<p
148-
style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-bottom:16px;margin-top:16px">
148+
style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
149149
or copy and paste this URL into your browser:<!-- -->
150150
<a
151151
style="color:rgb(37,99,235);text-decoration-line:none"
@@ -154,7 +154,7 @@ exports[`email export 1`] = `
154154
<hr
155155
style="margin-left:0px;margin-right:0px;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea" />
156156
<p
157-
style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-bottom:16px;margin-top:16px">
157+
style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom:16px">
158158
This invitation was intended for<!-- -->
159159
<span style="color:rgb(0,0,0)"></span>. This invite was sent from
160160
<span style="color:rgb(0,0,0)"></span>

‎packages/react-email/src/utils/__snapshots__/get-email-component.spec.ts.snap

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/text/src/__snapshots__/text.spec.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
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-bottom:16px;margin-top:16px">Lorem ipsum</p><!--/$-->"`;
3+
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><!--/$-->"`;

‎packages/text/src/text.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import * as React from 'react';
2-
import { parseMargin } from './utils/parse-margins';
2+
import { computeMargins } from './utils/compute-margins';
33

44
export type TextProps = Readonly<React.ComponentPropsWithoutRef<'p'>>;
55

66
export const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
77
({ style, ...props }, ref) => {
8-
const margins = parseMargin({
9-
margin: style?.margin,
10-
marginBottom: style?.marginBottom ?? '16px',
11-
marginTop: style?.marginTop ?? '16px',
12-
marginLeft: style?.marginLeft,
13-
marginRight: style?.marginRight,
14-
});
8+
const modifiedStyle = { ...style };
9+
if (modifiedStyle.marginBottom === undefined) {
10+
modifiedStyle.marginBottom = '16px';
11+
}
12+
if (modifiedStyle.marginTop === undefined) {
13+
modifiedStyle.marginTop = '16px';
14+
}
15+
const margins = computeMargins(modifiedStyle);
1516

1617
return (
1718
<p
@@ -21,10 +22,7 @@ export const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
2122
fontSize: '14px',
2223
lineHeight: '24px',
2324
...style,
24-
marginBottom: margins.mb,
25-
marginTop: margins.mt,
26-
marginLeft: margins.ml,
27-
marginRight: margins.mr,
25+
...margins,
2826
}}
2927
/>
3028
);

‎packages/text/src/utils/compute-margins.spec.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { computeMargins } from './compute-margins';
2+
3+
describe('parseMargins()', () => {
4+
it('should compute the margins according to the order of styles', () => {
5+
expect(
6+
computeMargins({
7+
margin: 0,
8+
marginBottom: '1rem',
9+
}),
10+
).toEqual({
11+
marginTop: 0,
12+
marginRight: 0,
13+
marginLeft: 0,
14+
marginBottom: '1rem',
15+
});
16+
17+
expect(
18+
computeMargins({
19+
marginBottom: '1rem',
20+
margin: 0,
21+
}),
22+
).toEqual({
23+
marginTop: 0,
24+
marginRight: 0,
25+
marginLeft: 0,
26+
marginBottom: 0,
27+
});
28+
29+
expect(
30+
computeMargins({
31+
marginTop: '2rem',
32+
marginLeft: '10px',
33+
margin: '3em',
34+
marginRight: '9px',
35+
marginBottom: '1px',
36+
}),
37+
).toEqual({
38+
marginTop: '3em',
39+
marginLeft: '3em',
40+
marginRight: '9px',
41+
marginBottom: '1px',
42+
});
43+
});
44+
});

‎packages/text/src/utils/compute-margins.ts

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
type MarginType = string | number | undefined;
2+
3+
interface MarginProperties {
4+
margin?: MarginType;
5+
marginTop?: MarginType;
6+
marginRight?: MarginType;
7+
marginBottom?: MarginType;
8+
marginLeft?: MarginType;
9+
}
10+
11+
interface MarginResult {
12+
marginTop: MarginType;
13+
marginRight: MarginType;
14+
marginBottom: MarginType;
15+
marginLeft: MarginType;
16+
}
17+
18+
function parseMarginValue(value: MarginType): MarginResult {
19+
if (typeof value === 'number')
20+
return { marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0 };
21+
22+
if (typeof value === 'string') {
23+
const values = value.toString().trim().split(/\s+/);
24+
25+
if (values.length === 1) {
26+
return {
27+
marginTop: values[0],
28+
marginBottom: values[0],
29+
marginLeft: values[0],
30+
marginRight: values[0],
31+
};
32+
}
33+
34+
if (values.length === 2) {
35+
return {
36+
marginTop: values[0],
37+
marginRight: values[1],
38+
marginBottom: values[0],
39+
marginLeft: values[1],
40+
};
41+
}
42+
43+
if (values.length === 3) {
44+
return {
45+
marginTop: values[0],
46+
marginRight: values[1],
47+
marginBottom: values[2],
48+
marginLeft: values[1],
49+
};
50+
}
51+
52+
if (values.length === 4) {
53+
return {
54+
marginTop: values[0],
55+
marginRight: values[1],
56+
marginBottom: values[2],
57+
marginLeft: values[3],
58+
};
59+
}
60+
}
61+
62+
return {
63+
marginTop: undefined,
64+
marginBottom: undefined,
65+
marginLeft: undefined,
66+
marginRight: undefined,
67+
};
68+
}
69+
70+
/**
71+
* Parses all the values out of a margin string to get the value for all margin props in the four margin properties
72+
* @example e.g. "10px" =\> mt: "10px", mr: "10px", mb: "10px", ml: "10px"
73+
*/
74+
export function computeMargins(properties: MarginProperties): MarginResult {
75+
let result: MarginResult = {
76+
marginTop: undefined,
77+
marginRight: undefined,
78+
marginBottom: undefined,
79+
marginLeft: undefined,
80+
};
81+
82+
for (const [key, value] of Object.entries(properties)) {
83+
if (key === 'margin') {
84+
result = parseMarginValue(value);
85+
} else if (key === 'marginTop') {
86+
result.marginTop = value;
87+
} else if (key === 'marginRight') {
88+
result.marginRight = value;
89+
} else if (key === 'marginBottom') {
90+
result.marginBottom = value;
91+
} else if (key === 'marginLeft') {
92+
result.marginLeft = value;
93+
}
94+
}
95+
96+
return result;
97+
}

‎packages/text/src/utils/parse-margins.ts

Lines changed: 0 additions & 66 deletions
This file was deleted.

0 commit comments

Comments
 (0)