[@mantine/rte] Fix theme.defaultRadius not being respected by some …

…controls (#2781) * [@mantine/rte]: Respect defaultRadius from MantineThemeProvider. * [@mantine/rte]: Add defaultRadius support for Toolbar actions.
mantinedev · Oct 24, 2022 · 762ba7e · 762ba7e
1 parent 965fb64
commit 762ba7e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/src/mantine-rte/src/components/RichTextEditor/RichTextEditor.story.tsx b/src/mantine-rte/src/components/RichTextEditor/RichTextEditor.story.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Accordion } from '@mantine/core';
+import { Accordion, MantineProvider } from '@mantine/core';
 import { RichTextEditor } from './RichTextEditor';
 
 export default { title: 'RichTextEditor' };
@@ -50,6 +50,27 @@ export function Usage() {
   );
 }
 
+export function WithThemeProvider() {
+  const [value, onChange] = useState(html);
+  return (
+    <div style={{ padding: 40, maxWidth: 800, margin: 'auto' }}>
+      <MantineProvider
+        theme={{
+          defaultRadius: 'lg',
+          primaryColor: 'indigo',
+        }}
+      >
+        <RichTextEditor
+          value={value}
+          onChange={onChange}
+          onImageUpload={handleImageUpload}
+          stickyOffset={0}
+        />
+      </MantineProvider>
+    </div>
+  );
+}
+
 export function Placeholder() {
   const [value, onChange] = useState('');
   return (

diff --git a/src/mantine-rte/src/components/RichTextEditor/RichTextEditor.styles.ts b/src/mantine-rte/src/components/RichTextEditor/RichTextEditor.styles.ts
@@ -71,7 +71,7 @@ export default createStyles(
         lineHeight: '32px',
         backgroundColor: theme.fn.variant({ variant: 'filled' }).background,
         color: theme.white,
-        borderRadius: theme.radius.sm,
+        borderRadius: theme.fn.radius(theme.defaultRadius),
         fontWeight: 500,
         padding: `0 ${theme.spacing.md}px`,
         marginRight: theme.spacing.sm,
@@ -131,7 +131,7 @@ export default createStyles(
         textAlign: 'left',
         paddingLeft: theme.spacing.sm,
         paddingRight: theme.spacing.sm,
-        borderRadius: theme.radius.sm,
+        borderRadius: theme.fn.radius(theme.defaultRadius),
         marginRight: theme.spacing.md,
         border: `1px solid ${
           theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]
@@ -203,7 +203,7 @@ export default createStyles(
           theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors[theme.primaryColor][0],
         padding: '3px 5px',
         marginRight: 2,
-        borderRadius: theme.radius.sm,
+        borderRadius: theme.fn.radius(theme.defaultRadius),
         userSelect: 'all',
         pointerEvents: 'none',
       },

diff --git a/src/mantine-rte/src/components/Toolbar/Toolbar.styles.ts b/src/mantine-rte/src/components/Toolbar/Toolbar.styles.ts
@@ -38,13 +38,13 @@ export default createStyles((theme, { sticky, stickyOffset }: ToolbarStyles) =>
     },
 
     '&:first-of-type': {
-      borderTopLeftRadius: theme.radius.sm,
-      borderBottomLeftRadius: theme.radius.sm,
+      borderTopLeftRadius: theme.fn.radius(theme.defaultRadius),
+      borderBottomLeftRadius: theme.fn.radius(theme.defaultRadius),
     },
 
     '&:last-of-type': {
-      borderTopRightRadius: theme.radius.sm,
-      borderBottomRightRadius: theme.radius.sm,
+      borderTopRightRadius: theme.fn.radius(theme.defaultRadius),
+      borderBottomRightRadius: theme.fn.radius(theme.defaultRadius),
     },
   },
 }));