fix: disabled button styles, closes #4840

leather-io · Jan 31, 2024 · 666fa37 · 666fa37
1 parent b21decb
commit 666fa37
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 25 deletions.
diff --git a/src/app/ui/components/button/button.stories.tsx b/src/app/ui/components/button/button.stories.tsx
@@ -26,6 +26,18 @@ export const Button: Story = {
   },
 };
 
+export const Disabled: Story = {
+  parameters: {
+    controls: { include: ['size', 'variant'] },
+  },
+  args: {
+    disabled: true,
+    children: 'Button',
+    size: 'md',
+    variant: 'solid',
+  },
+};
+
 // TODO: Remove invert code
 export const InvertSolid: Story = {
   parameters: {

diff --git a/src/app/ui/components/link/link.stories.tsx b/src/app/ui/components/link/link.stories.tsx
@@ -22,6 +22,18 @@ export const Link: Story = {
   },
 };
 
+export const Disabled: Story = {
+  parameters: {
+    controls: { include: ['size', 'variant'] },
+  },
+  args: {
+    children: 'Link',
+    disabled: true,
+    size: 'md',
+    variant: 'underlined',
+  },
+};
+
 // TODO: Remove invert code
 export const InvertLink: Story = {
   parameters: {

diff --git a/src/app/ui/components/link/link.tsx b/src/app/ui/components/link/link.tsx
@@ -9,12 +9,12 @@ type LinkProps = Omit<React.ComponentProps<typeof StyledLink>, keyof LinkVariant
   LinkVariantProps;
 
 export const Link = forwardRef((props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) => {
-  const { children, fullWidth, invert, size, variant, ...rest } = props;
+  const { children, disabled, fullWidth, invert, size, variant, ...rest } = props;
 
   return (
     <StyledLink
       ref={ref}
-      className={linkRecipe({ fullWidth, invert, size, variant })}
+      className={linkRecipe({ disabled, fullWidth, invert, size, variant })}
       cursor="pointer"
       {...rest}
     >

diff --git a/theme/recipes/button-recipe.ts b/theme/recipes/button-recipe.ts
@@ -30,9 +30,6 @@ export const buttonRecipe = defineRecipe({
   className: 'button',
   jsx: ['Button'],
   base: {
-    _disabled: {
-      cursor: 'not-allowed',
-    },
     position: 'relative',
     rounded: 'xs',
     textStyle: 'label.02',
@@ -54,8 +51,10 @@ export const buttonRecipe = defineRecipe({
           bg: 'accent.action-primary-default',
         },
         _disabled: {
+          _hover: { bg: 'accent.background-secondary' },
           bg: 'accent.background-secondary',
           color: 'accent.non-interactive',
+          cursor: 'not-allowed',
         },
         _focus: {
           _before: {
@@ -74,6 +73,12 @@ export const buttonRecipe = defineRecipe({
         _active: {
           bg: 'accent.component-background-pressed',
         },
+        _disabled: {
+          _hover: { bg: 'unset' },
+          border: '1px solid {colors.accent.non-interactive}',
+          color: 'accent.non-interactive',
+          cursor: 'not-allowed',
+        },
         _focus: {
           _before: {
             border: '3px solid {colors.focus}',
@@ -90,6 +95,11 @@ export const buttonRecipe = defineRecipe({
         _active: {
           bg: 'accent.component-background-pressed',
         },
+        _disabled: {
+          _hover: { bg: 'unset' },
+          color: 'accent.non-interactive',
+          cursor: 'not-allowed',
+        },
         _focus: {
           _before: {
             border: '3px solid {focus}',

diff --git a/theme/recipes/link-recipe.ts b/theme/recipes/link-recipe.ts
@@ -6,11 +6,7 @@ export const linkRecipe = defineRecipe({
   className: 'link',
   jsx: ['Link'],
   base: {
-    _disabled: {
-      cursor: 'not-allowed',
-    },
     appearance: 'none',
-    color: 'accent.text-primary',
     display: 'inline',
     mb: 'space.01',
     p: 'unset',
@@ -48,12 +44,6 @@ export const linkRecipe = defineRecipe({
           },
           color: 'accent.text-primary',
         },
-        _disabled: {
-          _before: {
-            background: 'accent.non-interactive',
-          },
-          color: 'accent.non-interactive',
-        },
         _focus: {
           _before: { background: 'focus' },
           color: 'accent.text-primary',
@@ -64,6 +54,7 @@ export const linkRecipe = defineRecipe({
             background: 'accent.action-primary-hover',
           },
         },
+        color: 'accent.text-primary',
       },
 
       text: {
@@ -84,13 +75,6 @@ export const linkRecipe = defineRecipe({
           color: 'accent.text-primary',
           visibility: 'visible',
         },
-        _disabled: {
-          _before: {
-            background: 'accent.non-interactive',
-            visibility: 'visible',
-          },
-          color: 'accent.non-interactive',
-        },
         _focus: {
           _before: {
             background: 'focus',
@@ -105,12 +89,13 @@ export const linkRecipe = defineRecipe({
             visibility: 'visible',
           },
         },
+        color: 'accent.text-primary',
       },
     },
 
     // TODO: Remove invert code
     invert: { true: {} },
-
+    disabled: { true: {} },
     fullWidth: { true: { width: '100%' } },
   },
 
@@ -122,8 +107,6 @@ export const linkRecipe = defineRecipe({
   // TODO: Remove invert code
   compoundVariants: [
     {
-      variant: 'underlined',
-      invert: true,
       css: {
         _focus: {
           _before: {
@@ -140,6 +123,43 @@ export const linkRecipe = defineRecipe({
         },
         color: 'accent.background-secondary',
       },
+      invert: true,
+      variant: 'underlined',
+    },
+    {
+      css: {
+        _before: {
+          content: '""',
+          background: 'accent.non-interactive',
+          bottom: '-2px',
+          height: '2px',
+          left: 0,
+          position: 'absolute',
+          right: 0,
+        },
+        color: 'accent.non-interactive',
+        cursor: 'not-allowed',
+      },
+      disabled: true,
+      variant: 'underlined',
+    },
+    {
+      css: {
+        _before: {
+          content: '""',
+          background: 'accent.non-interactive',
+          bottom: '-2px',
+          height: '2px',
+          left: 0,
+          position: 'absolute',
+          right: 0,
+          visibility: 'visible',
+        },
+        color: 'accent.non-interactive',
+        cursor: 'not-allowed',
+      },
+      disabled: true,
+      variant: 'text',
     },
   ],
 });