[@mantine/prism] Fix unexpected code margin when used within `Typogra…

…phyStylesProvider` (#4452)
mantinedev · Jul 4, 2023 · 9cf1c51 · 9cf1c51
1 parent 3b389a0
commit 9cf1c51
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/mantine-prism/src/Prism/Prism.styles.ts b/src/mantine-prism/src/Prism/Prism.styles.ts
@@ -24,8 +24,11 @@ export default createStyles(
       overflowX: native ? 'auto' : undefined,
       borderRadius: theme.fn.radius(radius),
       padding: `${theme.spacing.sm} 0`,
-      marginTop: 0,
-      marginBottom: 0,
+
+      '&.mantine-Prism-code': {
+        marginTop: 0,
+        marginBottom: 0,
+      },
     },
 
     copy: {

diff --git a/src/mantine-prism/src/Prism/Prism.test.tsx b/src/mantine-prism/src/Prism/Prism.test.tsx
@@ -36,4 +36,12 @@ describe('@mantine/prism/Prism', () => {
     );
     expect(withoutLineNumbers.querySelectorAll('.mantine-Prism-lineNumber')).toHaveLength(0);
   });
+
+  it('renders pre element without top and bottom margin', () => {
+    const { container: prism } = render(<Prism {...defaultProps} />);
+    expect(prism.querySelector('.mantine-Prism-code')).toHaveStyle({
+      marginTop: 0,
+      marginBottom: 0,
+    });
+  });
 });