fix(Button): render disabled button as span

toptal · Sep 1, 2020 · 9d6f5ba · 9d6f5ba
1 parent 6dec64b
commit 9d6f5ba
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 14 deletions.
diff --git a/packages/picasso/src/Button/Button.tsx b/packages/picasso/src/Button/Button.tsx
@@ -177,7 +177,8 @@ export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
       {...rest}
       ref={ref}
       classes={{
-        root: rootClassName
+        root: rootClassName,
+        disabled: classes.disabled
       }}
       onClick={loading ? defaultOnClick : onClick}
       className={className}
@@ -186,7 +187,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
       title={title}
       value={value}
       type={type}
-      component={as!}
+      component={disabled && as === 'button' ? 'span' : as!}
     >
       <Container
         as='span'

diff --git a/...sso/src/Button/story/Disabled.example.jsx → ...sso/src/Button/story/Disabled.example.tsx b/...sso/src/Button/story/Disabled.example.jsx → ...sso/src/Button/story/Disabled.example.tsx
diff --git a/packages/picasso/src/Button/story/DisabledWithEvents.example.tsx b/packages/picasso/src/Button/story/DisabledWithEvents.example.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Button } from '@toptal/picasso'
+import { useNotifications } from '@toptal/picasso/utils'
+
+const Example = () => {
+  const { showSuccess } = useNotifications()
+
+  return (
+    <div>
+      <Button
+        disabled
+        onMouseEnter={() => showSuccess('Mouse entered')}
+        onMouseLeave={() => showSuccess('Mouse left')}
+      >
+        Disabled
+      </Button>
+    </div>
+  )
+}
+
+export default Example
diff --git a/packages/picasso/src/Button/story/index.jsx b/packages/picasso/src/Button/story/index.jsx
@@ -188,10 +188,14 @@ page
   .addExample('Button/story/Basic.example.jsx', 'Basic')
   .addExample('Button/story/Variants.example.jsx', 'Variants')
   .addExample('Button/story/States.example.jsx', 'States')
-  .addExample('Button/story/Disabled.example.jsx', {
+  .addExample('Button/story/Disabled.example.tsx', {
     title: 'Disabled',
     description: 'The button shows that currently unable to be interacted with'
   })
+  .addExample('Button/story/DisabledWithEvents.example.tsx', {
+    title: 'Disabled with mouse events',
+    description: 'The button is disabled, but event handlers can be added'
+  })
   .addExample('Button/story/Sizes.example.jsx', 'Sizes')
   .addExample('Button/story/FullWidth.example.jsx', 'Full width')
   .addExample('Button/story/IconButtons.example.jsx', 'Button with Icon')

diff --git a/packages/picasso/src/Button/styles.ts b/packages/picasso/src/Button/styles.ts
@@ -3,39 +3,47 @@ import { lighten, darken, alpha } from '@toptal/picasso-shared'
 
 const ICON_SPACING = '0.4em'
 
-const primary = (mainColor: string, secondaryColor: string) => ({
+const primary = (
+  mainColor: string,
+  secondaryColor: string,
+  disabled = false
+) => ({
   border: 'none',
   color: secondaryColor,
   backgroundColor: mainColor,
 
-  '&:focus, &focused': {
+  '&:focus, &focused': !disabled && {
     backgroundColor: darken(mainColor, 0.2)
   },
 
-  '&:hover, &$hovered': {
+  '&:hover, &$hovered': !disabled && {
     backgroundColor: darken(mainColor, 0.2)
   },
 
-  '&:active, &$active': {
+  '&:active, &$active': !disabled && {
     backgroundColor: darken(mainColor, 0.2)
   }
 })
 
-const secondary = (mainColor: string, secondaryColor: string) => ({
+const secondary = (
+  mainColor: string,
+  secondaryColor: string,
+  disabled = false
+) => ({
   color: mainColor,
   backgroundColor: secondaryColor,
 
-  '&:focus, &focused': {
+  '&:focus, &focused': !disabled && {
     backgroundColor: lighten(mainColor, 0.84),
     borderColor: mainColor
   },
 
-  '&:hover, &$hovered': {
+  '&:hover, &$hovered': !disabled && {
     backgroundColor: lighten(mainColor, 0.84),
     borderColor: mainColor
   },
 
-  '&:active, &$active': {
+  '&:active, &$active': !disabled && {
     backgroundColor: lighten(mainColor, 0.84),
     borderColor: mainColor
   }
@@ -69,6 +77,15 @@ export default ({ palette, sizes, transitions, typography }: Theme) =>
         marginLeft: '0.5em'
       }
     },
+    disabled: {
+      '&$disabled': {
+        pointerEvents: 'inherit',
+
+        '&:focus, &focused': {
+          textDecoration: 'none'
+        }
+      }
+    },
     content: {
       lineHeight: '1.5em',
       fontWeight: typography.fontWeights.semibold,
@@ -182,10 +199,14 @@ export default ({ palette, sizes, transitions, typography }: Theme) =>
     transparentGreen: {
       ...transparent(palette.green.main)
     },
-    primaryDisabled: primary(palette.grey.light!, palette.common.white),
-    secondaryDisabled: secondary(palette.grey.light!, palette.common.white),
+    primaryDisabled: primary(palette.grey.light!, palette.common.white, true),
+    secondaryDisabled: secondary(
+      palette.grey.light!,
+      palette.common.white,
+      true
+    ),
     flatDisabled: {
-      ...secondary(palette.grey.light!, palette.common.white),
+      ...secondary(palette.grey.light!, palette.common.white, true),
       border: 'none'
     },