[@mantine/core] Fix disabled styles for gradient variants of Button a…

…nd ActionIcon (#2277) * [@mantine/core]: Fix disabled gradient styles for Button and ActionIcon. * [@mantine/core] Button: Remove obsolete story code.
mantinedev · Aug 31, 2022 · 1e12753 · 1e12753
1 parent 6898af2
commit 1e12753
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 24 deletions.
diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx b/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx
@@ -16,15 +16,97 @@ export function AsLink() {
   );
 }
 
-export function Disabled() {
+export function States() {
+  const theme = useMantineTheme();
+
+  const sharedStyles: CSSProperties = {
+    padding: '10px 20px',
+    border: `1px solid ${
+      theme.colorScheme === 'light' ? theme.colors.gray[1] : theme.colors.dark[6]
+    }`,
+  };
+
+  const states = [
+    {
+      name: 'enabled',
+      props: undefined,
+    },
+    {
+      name: 'disabled',
+      props: {
+        disabled: true,
+      },
+    },
+    {
+      name: 'loading',
+      props: {
+        loading: true,
+      },
+    },
+  ];
+
   return (
-    <div style={{ padding: 40 }}>
-      <ActionIcon disabled variant="transparent">
-        $
-      </ActionIcon>
-      <ActionIcon loading color="blue">
-        $
-      </ActionIcon>
+    <div
+      style={{
+        padding: '40px',
+      }}
+    >
+      <table
+        style={{
+          borderCollapse: 'collapse',
+        }}
+      >
+        <thead>
+          <tr>
+            <th
+              style={{
+                ...sharedStyles,
+              }}
+            >
+              &nbsp;
+            </th>
+
+            {ACTION_ICON_VARIANTS.map((variant) => (
+              <th
+                key={variant}
+                style={{
+                  ...sharedStyles,
+                }}
+              >
+                {variant}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {states.map((state) => (
+            <tr key={state.name}>
+              <td
+                style={{
+                  ...sharedStyles,
+                }}
+              >
+                {state.name}
+              </td>
+
+              {ACTION_ICON_VARIANTS.map((variant) => (
+                <td
+                  key={variant}
+                  style={{
+                    ...sharedStyles,
+                  }}
+                >
+                  <Center>
+                    <ActionIcon variant={variant} color="blue" {...state.props}>
+                      #
+                    </ActionIcon>
+                  </Center>
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
 }
@@ -65,7 +147,7 @@ export function Colors() {
                 ...sharedStyles,
               }}
             >
-              color
+              &nbsp;
             </th>
 
             {ACTION_ICON_VARIANTS.map((variant) => (

diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts b/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts
@@ -103,6 +103,7 @@ export default createStyles(
           variant === 'transparent'
             ? undefined
             : theme.fn.themeColor('gray', theme.colorScheme === 'dark' ? 8 : 1),
+        backgroundImage: 'none',
 
         '&:active': {
           transform: 'none',

diff --git a/src/mantine-core/src/Button/Button.story.tsx b/src/mantine-core/src/Button/Button.story.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
-import { MANTINE_COLORS } from '@mantine/styles';
+import React, { CSSProperties } from 'react';
+import { MANTINE_COLORS, useMantineTheme } from '@mantine/styles';
 import { IconExternalLink } from '@tabler/icons';
 import { Button } from './Button';
 import { Group } from '../Group';
+import { Center } from '../Center';
+import { BUTTON_VARIANTS } from './Button.styles';
 
 export default { title: 'Button' };
 
@@ -31,12 +33,98 @@ export function Colors() {
   return <div style={{ padding: 40, backgroundColor: 'rgba(0,0,0,0.1)' }}>{items}</div>;
 }
 
-export function Disabled() {
+export function States() {
+  const theme = useMantineTheme();
+
+  const sharedStyles: CSSProperties = {
+    padding: '10px 20px',
+    border: `1px solid ${
+      theme.colorScheme === 'light' ? theme.colors.gray[1] : theme.colors.dark[6]
+    }`,
+  };
+
+  const states = [
+    {
+      name: 'enabled',
+      props: undefined,
+    },
+    {
+      name: 'disabled',
+      props: {
+        disabled: true,
+      },
+    },
+    {
+      name: 'loading',
+      props: {
+        loading: true,
+      },
+    },
+  ];
+
   return (
-    <Group p={40}>
-      <Button disabled>Disabled</Button>
-      <Button loading>Loading</Button>
-    </Group>
+    <div
+      style={{
+        padding: '40px',
+      }}
+    >
+      <table
+        style={{
+          borderCollapse: 'collapse',
+        }}
+      >
+        <thead>
+          <tr>
+            <th
+              style={{
+                ...sharedStyles,
+              }}
+            >
+              &nbsp;
+            </th>
+
+            {BUTTON_VARIANTS.map((variant) => (
+              <th
+                key={variant}
+                style={{
+                  ...sharedStyles,
+                }}
+              >
+                {variant}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {states.map((state) => (
+            <tr key={state.name}>
+              <td
+                style={{
+                  ...sharedStyles,
+                }}
+              >
+                {state.name}
+              </td>
+
+              {BUTTON_VARIANTS.map((variant) => (
+                <td
+                  key={variant}
+                  style={{
+                    ...sharedStyles,
+                  }}
+                >
+                  <Center>
+                    <Button variant={variant} {...state.props}>
+                      {state.name}
+                    </Button>
+                  </Center>
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }
 

diff --git a/src/mantine-core/src/Button/Button.styles.ts b/src/mantine-core/src/Button/Button.styles.ts
@@ -9,14 +9,17 @@ import {
 } from '@mantine/styles';
 import { INPUT_SIZES } from '../Input';
 
-export type ButtonVariant =
-  | 'filled'
-  | 'outline'
-  | 'light'
-  | 'gradient'
-  | 'white'
-  | 'default'
-  | 'subtle';
+export const BUTTON_VARIANTS = [
+  'filled',
+  'outline',
+  'light',
+  'white',
+  'default',
+  'subtle',
+  'gradient',
+] as const;
+
+export type ButtonVariant = typeof BUTTON_VARIANTS[number];
 
 export interface ButtonStylesParams {
   color: MantineColor;
@@ -137,6 +140,7 @@ export default createStyles(
         backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
         color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],
         cursor: 'not-allowed',
+        backgroundImage: 'none',
 
         '&:active': {
           transform: 'none',