From ed79e1358174e5d1951ea36c4b35a0e465fbaa87 Mon Sep 17 00:00:00 2001
From: Bernhard Gschwantner <bernhard@unserwein.at>
Date: Tue, 25 May 2021 22:01:44 +0200
Subject: [PATCH] fix(components): allow themed Paragraph margins

---
 packages/components/src/Paragraph.js          |  7 +------
 .../test/__snapshots__/index.js.snap          |  1 -
 packages/components/test/index.js             | 20 +++++++++++++++++++
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/Paragraph.js b/packages/components/src/Paragraph.js
index 288dfd911..68f363aee 100644
--- a/packages/components/src/Paragraph.js
+++ b/packages/components/src/Paragraph.js
@@ -1,17 +1,12 @@
 import React from 'react'
 import Box from './Box'
 
-export const Paragraph = React.forwardRef(function Paragraph(
-  props,
-  ref
-) {
+export const Paragraph = React.forwardRef(function Paragraph(props, ref) {
   return (
     <Box
       ref={ref}
       as="p"
       variant="paragraph"
-      // reset margin by default: avoid relying on user-agent margins (not aware of theme-ui space scale)
-      m={0}
       __themeKey="text"
       __css={{
         fontFamily: 'body',
diff --git a/packages/components/test/__snapshots__/index.js.snap b/packages/components/test/__snapshots__/index.js.snap
index c89e3b536..085cdb65c 100644
--- a/packages/components/test/__snapshots__/index.js.snap
+++ b/packages/components/test/__snapshots__/index.js.snap
@@ -1097,7 +1097,6 @@ exports[`Paragraph renders 1`] = `
   font-family: body;
   font-weight: body;
   line-height: body;
-  margin: 0;
 }
 
 <p
diff --git a/packages/components/test/index.js b/packages/components/test/index.js
index a1ebc9949..65a211bde 100644
--- a/packages/components/test/index.js
+++ b/packages/components/test/index.js
@@ -341,6 +341,26 @@ describe('Paragraph', () => {
     const json = renderJSON(<Paragraph m={margin} />)
     expect(json).toHaveStyleRule('margin', margin)
   })
+
+  test('renders with theme override', () => {
+    const margin = '8px'
+    const json = renderJSON(
+      <ThemeProvider theme={{ text: { paragraph: { margin } } }}>
+        <Paragraph />
+      </ThemeProvider>
+    )
+    expect(json).toHaveStyleRule('margin', margin)
+  })
+
+  test('renders with theme variant', () => {
+    const margin = '8px'
+    const json = renderJSON(
+      <ThemeProvider theme={{ text: { override: { margin } } }}>
+        <Paragraph variant="override" />
+      </ThemeProvider>
+    )
+    expect(json).toHaveStyleRule('margin', margin)
+  })
 })
 
 describe('Text', () => {