[@mantine/core] Fix Avatar and ThemeIcon components not respecting `t…

…heme.defaultGradient` (#2649)
mantinedev · Oct 6, 2022 · 65df7be · 65df7be
1 parent 410fdaf
commit 65df7be
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 2 deletions.
diff --git a/src/mantine-core/src/Avatar/Avatar.story.tsx b/src/mantine-core/src/Avatar/Avatar.story.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
+import { MantineProvider } from '@mantine/styles';
 import { Tooltip } from '../Tooltip';
+import { Center } from '../Center';
 import { Group } from '../Group';
 import { Stack } from '../Stack';
+import { Box } from '../Box';
+import { Text } from '../Text';
 import { Avatar } from './Avatar';
 import { AVATAR_VARIANTS } from './Avatar.styles';
 
@@ -73,3 +77,48 @@ export function Variants() {
     </div>
   );
 }
+
+export function Gradient() {
+  return (
+    <div style={{ padding: '40px' }}>
+      <Group>
+        <Box>
+          <Text>MantineProvider</Text>
+          <MantineProvider
+            theme={{
+              defaultGradient: {
+                from: 'red.2',
+                to: 'orange.8',
+                deg: 45,
+              },
+            }}
+          >
+            <Center>
+              <Avatar variant="gradient" radius="md">
+                ZH
+              </Avatar>
+            </Center>
+          </MantineProvider>
+        </Box>
+
+        <Box>
+          <Text>Default</Text>
+          <Center>
+            <Avatar variant="gradient" radius="md">
+              ZH
+            </Avatar>
+          </Center>
+        </Box>
+
+        <Box>
+          <Text>Specific</Text>
+          <Center>
+            <Avatar variant="gradient" gradient={{ from: 'orange', to: 'red' }} radius="md">
+              ZH
+            </Avatar>
+          </Center>
+        </Box>
+      </Group>
+    </div>
+  );
+}
diff --git a/src/mantine-core/src/Avatar/Avatar.tsx b/src/mantine-core/src/Avatar/Avatar.tsx
@@ -49,7 +49,6 @@ const defaultProps: Partial<AvatarProps> = {
   size: 'md',
   color: 'gray',
   variant: 'light',
-  gradient: { from: 'blue', to: 'cyan', deg: 45 },
 };
 
 export const _Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {

diff --git a/src/mantine-core/src/ThemeIcon/ThemeIcon.story.tsx b/src/mantine-core/src/ThemeIcon/ThemeIcon.story.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
+import { MantineProvider } from '@mantine/styles';
 import { ThemeIcon } from './ThemeIcon';
+import { Group } from '../Group';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { Center } from '../Center';
 
 export default { title: 'ThemeIcon' };
 
@@ -10,3 +15,48 @@ export function WithHexColor() {
 export function WithoutColor() {
   return <ThemeIcon>$</ThemeIcon>;
 }
+
+export function Gradient() {
+  return (
+    <div style={{ padding: '40px' }}>
+      <Group>
+        <Box>
+          <Text>MantineProvider</Text>
+          <MantineProvider
+            theme={{
+              defaultGradient: {
+                from: 'red.2',
+                to: 'orange.8',
+                deg: 45,
+              },
+            }}
+          >
+            <Center>
+              <ThemeIcon variant="gradient" radius="md">
+                $
+              </ThemeIcon>
+            </Center>
+          </MantineProvider>
+        </Box>
+
+        <Box>
+          <Text>Default</Text>
+          <Center>
+            <ThemeIcon variant="gradient" radius="md">
+              $
+            </ThemeIcon>
+          </Center>
+        </Box>
+
+        <Box>
+          <Text>Specific</Text>
+          <Center>
+            <ThemeIcon variant="gradient" gradient={{ from: 'orange', to: 'red' }} radius="md">
+              $
+            </ThemeIcon>
+          </Center>
+        </Box>
+      </Group>
+    </div>
+  );
+}
diff --git a/src/mantine-core/src/ThemeIcon/ThemeIcon.tsx b/src/mantine-core/src/ThemeIcon/ThemeIcon.tsx
@@ -34,7 +34,6 @@ export interface ThemeIconProps
 const defaultProps: Partial<ThemeIconProps> = {
   size: 'md',
   variant: 'filled',
-  gradient: { from: 'blue', to: 'cyan', deg: 45 },
 };
 
 export const ThemeIcon = forwardRef<HTMLDivElement, ThemeIconProps>((props, ref) => {