Skip to content

Commit 72138ae

Browse files
authored
fix(text): marginTop, marginBottom losing their priority defined by order in styles (#2287)
1 parent d907b1b commit 72138ae

File tree

4 files changed

+29
-9
lines changed

4 files changed

+29
-9
lines changed

.changeset/lovely-hotels-walk.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 marginTop, marginBottom losing their priority defined by order in styles

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

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

3-
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><!--/$-->"`;
3+
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:12px;margin-top:0px;margin-bottom:12px;margin-left:12px;margin-right:12px"></p><!--/$-->"`;
44
55
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><!--/$-->"`;
66

packages/text/src/text.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ describe('<Text> component', () => {
99
});
1010

1111
it("gives priority to the user's style", async () => {
12-
const style = { marginTop: '0px' };
12+
const style = { margin: '12px', marginTop: '0px' };
1313
const html = await render(<Text style={style} />);
1414
expect(html).toMatchSnapshot();
1515
});

packages/text/src/text.tsx

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,30 @@ export type TextProps = Readonly<React.ComponentPropsWithoutRef<'p'>>;
55

66
export const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
77
({ style, ...props }, ref) => {
8-
let modifiedStyle: React.CSSProperties = {};
9-
if (modifiedStyle.marginBottom === undefined) {
10-
modifiedStyle.marginBottom = '16px';
8+
/**
9+
* we do this clunky way of spreading these default margins because
10+
* if we were to simply spread, the ordering of the margins would be lost
11+
*
12+
* ex:
13+
* ```js
14+
* { ...{ marginTop: '16px', marginBottom: '16px' }, ...{ marginTop: '24px' } }
15+
* // would result in
16+
* { marginTop: '24px', marginBottom: '16px' }
17+
* // not the expected
18+
* { marginBottom: '16px', marginTop: '24px' }
19+
* ```
20+
*/
21+
const defaultMargins: React.CSSProperties = {};
22+
if (style?.marginTop === undefined) {
23+
defaultMargins.marginTop = '16px';
1124
}
12-
if (modifiedStyle.marginTop === undefined) {
13-
modifiedStyle.marginTop = '16px';
25+
if (style?.marginBottom === undefined) {
26+
defaultMargins.marginBottom = '16px';
1427
}
15-
modifiedStyle = { ...modifiedStyle, ...style };
16-
const margins = computeMargins(modifiedStyle);
28+
const margins = computeMargins({
29+
...defaultMargins,
30+
...style,
31+
});
1732

1833
return (
1934
<p

0 commit comments

Comments
 (0)