fix(components): allow themed Paragraph margins

system-ui · May 25, 2021 · ed79e13 · ed79e13
1 parent e85cbd0
commit ed79e13
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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', () => {