[@mantine/core] ActionIcon: Fix broken styles for loading state (#2281)

mantinedev · Sep 3, 2022 · 0c255b5 · 0c255b5
1 parent d04cb00
commit 0c255b5
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 99 deletions.
diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts b/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts
@@ -42,14 +42,6 @@ interface GetVariantStyles {
 }
 
 function getVariantStyles({ variant, theme, color, gradient }: GetVariantStyles) {
-  if (variant === 'transparent') {
-    return {
-      border: '1px solid transparent',
-      color: theme.fn.variant({ variant: 'subtle', color }).color,
-      backgroundColor: 'transparent',
-    };
-  }
-
   const colors = theme.fn.variant({ color, variant, gradient });
 
   if (variant === 'gradient') {

diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.tsx b/src/mantine-core/src/ActionIcon/ActionIcon.tsx
@@ -71,7 +71,8 @@ export const _ActionIcon = forwardRef<HTMLButtonElement, ActionIconProps>((props
     { size, radius, color, variant, gradient },
     { name: 'ActionIcon', unstyled }
   );
-  const colors = theme.fn.variant({ color, variant: 'light' });
+
+  const colors = theme.fn.variant({ color, variant });
 
   const loader = (
     <Loader color={colors.color} size={theme.fn.size({ size, sizes }) - 12} {...loaderProps} />

diff --git a/src/mantine-styles/src/theme/functions/fns/variant/variant.ts b/src/mantine-styles/src/theme/functions/fns/variant/variant.ts
@@ -1,21 +1,30 @@
+import { CSSProperties } from 'react';
 import type { MantineColor, MantineGradient, MantineThemeBase } from '../../../types';
 import { rgba } from '../rgba/rgba';
 import { themeColor } from '../theme-color/theme-color';
 import { primaryShade } from '../primary-shade/primary-shade';
 import { gradient } from '../gradient/gradient';
 
 export interface VariantInput {
-  variant: 'filled' | 'light' | 'outline' | 'default' | 'gradient' | 'white' | 'subtle';
+  variant:
+    | 'filled'
+    | 'light'
+    | 'outline'
+    | 'default'
+    | 'gradient'
+    | 'white'
+    | 'subtle'
+    | 'transparent';
   color?: MantineColor;
   gradient?: MantineGradient;
   primaryFallback?: boolean;
 }
 
 export interface VariantOutput {
-  border: string;
-  background: string;
-  color: string;
-  hover: string;
+  border: CSSProperties['borderColor'];
+  background: CSSProperties['backgroundColor'];
+  color: CSSProperties['color'];
+  hover: CSSProperties['backgroundColor'];
 }
 
 interface ColorInfo {
@@ -46,91 +55,109 @@ export function variant(theme: MantineThemeBase) {
   return ({ variant, color, gradient, primaryFallback }: VariantInput): VariantOutput => {
     const colorInfo = getColorIndexInfo(color, theme);
 
-    if (variant === 'light') {
-      return {
-        border: 'transparent',
-        background: rgba(
-          getThemeColor(color, theme.colorScheme === 'dark' ? 8 : 0, primaryFallback, false),
-          theme.colorScheme === 'dark' ? 0.2 : 1
-        ),
-        color:
-          color === 'dark'
-            ? theme.colorScheme === 'dark'
-              ? theme.colors.dark[0]
-              : theme.colors.dark[9]
-            : getThemeColor(color, theme.colorScheme === 'dark' ? 2 : getPrimaryShade('light')),
-        hover: rgba(
-          getThemeColor(color, theme.colorScheme === 'dark' ? 7 : 1, primaryFallback, false),
-          theme.colorScheme === 'dark' ? 0.25 : 0.65
-        ),
-      };
+    switch (variant) {
+      case 'light': {
+        return {
+          border: 'transparent',
+          background: rgba(
+            getThemeColor(color, theme.colorScheme === 'dark' ? 8 : 0, primaryFallback, false),
+            theme.colorScheme === 'dark' ? 0.2 : 1
+          ),
+          color:
+            color === 'dark'
+              ? theme.colorScheme === 'dark'
+                ? theme.colors.dark[0]
+                : theme.colors.dark[9]
+              : getThemeColor(color, theme.colorScheme === 'dark' ? 2 : getPrimaryShade('light')),
+          hover: rgba(
+            getThemeColor(color, theme.colorScheme === 'dark' ? 7 : 1, primaryFallback, false),
+            theme.colorScheme === 'dark' ? 0.25 : 0.65
+          ),
+        };
+      }
+
+      case 'subtle': {
+        return {
+          border: 'transparent',
+          background: 'transparent',
+          color:
+            color === 'dark'
+              ? theme.colorScheme === 'dark'
+                ? theme.colors.dark[0]
+                : theme.colors.dark[9]
+              : getThemeColor(color, theme.colorScheme === 'dark' ? 2 : getPrimaryShade('light')),
+          hover: rgba(
+            getThemeColor(color, theme.colorScheme === 'dark' ? 8 : 0, primaryFallback, false),
+            theme.colorScheme === 'dark' ? 0.2 : 1
+          ),
+        };
+      }
+
+      case 'outline': {
+        return {
+          border: getThemeColor(color, theme.colorScheme === 'dark' ? 5 : getPrimaryShade('light')),
+          background: 'transparent',
+          color: getThemeColor(color, theme.colorScheme === 'dark' ? 5 : getPrimaryShade('light')),
+          hover:
+            theme.colorScheme === 'dark'
+              ? rgba(getThemeColor(color, 5, primaryFallback, false), 0.05)
+              : rgba(getThemeColor(color, 0, primaryFallback, false), 0.35),
+        };
+      }
+
+      case 'default': {
+        return {
+          border: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4],
+          background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
+          color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+          hover: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0],
+        };
+      }
+
+      case 'white': {
+        return {
+          border: 'transparent',
+          background: theme.white,
+          color: getThemeColor(color, getPrimaryShade()),
+          hover: null,
+        };
+      }
+
+      case 'transparent': {
+        return {
+          border: 'transparent',
+          color:
+            color === 'dark'
+              ? theme.colorScheme === 'dark'
+                ? theme.colors.dark[0]
+                : theme.colors.dark[9]
+              : getThemeColor(color, theme.colorScheme === 'dark' ? 2 : getPrimaryShade('light')),
+          background: 'transparent',
+          hover: null,
+        };
+      }
+
+      case 'gradient': {
+        return {
+          background: getGradient(gradient),
+          color: theme.white,
+          border: 'transparent',
+          hover: null,
+        };
+      }
+
+      default: {
+        const _primaryShade = getPrimaryShade();
+        const _shade = colorInfo.isSplittedColor ? colorInfo.shade : _primaryShade;
+        const _color = colorInfo.isSplittedColor ? colorInfo.key : color;
+
+        return {
+          border: 'transparent',
+          background: getThemeColor(_color, _shade, primaryFallback),
+          color: theme.white,
+          hover: getThemeColor(_color, _shade === 9 ? 8 : _shade + 1),
+        };
+      }
     }
-
-    if (variant === 'default') {
-      return {
-        border: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4],
-        background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
-        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
-        hover: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0],
-      };
-    }
-
-    if (variant === 'white') {
-      return {
-        border: 'transparent',
-        background: theme.white,
-        color: getThemeColor(color, getPrimaryShade()),
-        hover: null,
-      };
-    }
-
-    if (variant === 'outline') {
-      return {
-        border: getThemeColor(color, theme.colorScheme === 'dark' ? 5 : getPrimaryShade('light')),
-        background: 'transparent',
-        color: getThemeColor(color, theme.colorScheme === 'dark' ? 5 : getPrimaryShade('light')),
-        hover:
-          theme.colorScheme === 'dark'
-            ? rgba(getThemeColor(color, 5, primaryFallback, false), 0.05)
-            : rgba(getThemeColor(color, 0, primaryFallback, false), 0.35),
-      };
-    }
-
-    if (variant === 'gradient') {
-      return {
-        background: getGradient(gradient),
-        color: theme.white,
-        border: 'transparent',
-        hover: null,
-      };
-    }
-
-    if (variant === 'subtle') {
-      return {
-        border: 'transparent',
-        background: 'transparent',
-        color:
-          color === 'dark'
-            ? theme.colorScheme === 'dark'
-              ? theme.colors.dark[0]
-              : theme.colors.dark[9]
-            : getThemeColor(color, theme.colorScheme === 'dark' ? 2 : getPrimaryShade('light')),
-        hover: rgba(
-          getThemeColor(color, theme.colorScheme === 'dark' ? 8 : 0, primaryFallback, false),
-          theme.colorScheme === 'dark' ? 0.2 : 1
-        ),
-      };
-    }
-
-    const _primaryShade = getPrimaryShade();
-    const _shade = colorInfo.isSplittedColor ? colorInfo.shade : _primaryShade;
-    const _color = colorInfo.isSplittedColor ? colorInfo.key : color;
-
-    return {
-      border: 'transparent',
-      background: getThemeColor(_color, _shade, primaryFallback),
-      color: theme.white,
-      hover: getThemeColor(_color, _shade === 9 ? 8 : _shade + 1),
-    };
   };
 }