From 65df7beed23593aafb44eb14e688e19efa8e404c Mon Sep 17 00:00:00 2001
From: Zhulien Ivanov <zhulienivanov@yahoo.com>
Date: Thu, 6 Oct 2022 16:26:08 +0300
Subject: [PATCH] [@mantine/core] Fix Avatar and ThemeIcon components not
 respecting `theme.defaultGradient` (#2649)

---
 src/mantine-core/src/Avatar/Avatar.story.tsx  | 49 ++++++++++++++++++
 src/mantine-core/src/Avatar/Avatar.tsx        |  1 -
 .../src/ThemeIcon/ThemeIcon.story.tsx         | 50 +++++++++++++++++++
 src/mantine-core/src/ThemeIcon/ThemeIcon.tsx  |  1 -
 4 files changed, 99 insertions(+), 2 deletions(-)

diff --git a/src/mantine-core/src/Avatar/Avatar.story.tsx b/src/mantine-core/src/Avatar/Avatar.story.tsx
index af2538885fd..067e6e27b3a 100644
--- 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
index b9e51405375..8fb5d5c6d10 100644
--- 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
index 497401aa6bd..247966704ce 100644
--- 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
index beee88ee4ad..1e06987382f 100644
--- 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) => {