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() {
);
}
+
+export function Gradient() {
+ return (
+
+
+
+ MantineProvider
+
+
+
+ ZH
+
+
+
+
+
+
+ Default
+
+
+ ZH
+
+
+
+
+
+ Specific
+
+
+ ZH
+
+
+
+
+
+ );
+}
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 = {
size: 'md',
color: 'gray',
variant: 'light',
- gradient: { from: 'blue', to: 'cyan', deg: 45 },
};
export const _Avatar = forwardRef((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 $;
}
+
+export function Gradient() {
+ return (
+
+
+
+ MantineProvider
+
+
+
+ $
+
+
+
+
+
+
+ Default
+
+
+ $
+
+
+
+
+
+ Specific
+
+
+ $
+
+
+
+
+
+ );
+}
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 = {
size: 'md',
variant: 'filled',
- gradient: { from: 'blue', to: 'cyan', deg: 45 },
};
export const ThemeIcon = forwardRef((props, ref) => {