From b373a375e42a6803f1a9592fd62ce0addda1cdd7 Mon Sep 17 00:00:00 2001
From: Sergey <sergey@toptal.com>
Date: Tue, 1 Sep 2020 23:13:18 +0300
Subject: [PATCH] fix(Button): render disabled button as span

---
 packages/picasso/src/Button/Button.tsx        |  5 ++-
 ...abled.example.jsx => Disabled.example.tsx} |  0
 .../story/DisabledWithEvents.example.tsx      | 21 +++++++++
 packages/picasso/src/Button/story/index.jsx   |  6 ++-
 packages/picasso/src/Button/styles.ts         | 43 ++++++++++++++-----
 5 files changed, 61 insertions(+), 14 deletions(-)
 rename packages/picasso/src/Button/story/{Disabled.example.jsx => Disabled.example.tsx} (100%)
 create mode 100644 packages/picasso/src/Button/story/DisabledWithEvents.example.tsx

diff --git a/packages/picasso/src/Button/Button.tsx b/packages/picasso/src/Button/Button.tsx
index c7c0de9ff85..58644df32dd 100644
--- 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/packages/picasso/src/Button/story/Disabled.example.jsx b/packages/picasso/src/Button/story/Disabled.example.tsx
similarity index 100%
rename from packages/picasso/src/Button/story/Disabled.example.jsx
rename to packages/picasso/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
new file mode 100644
index 00000000000..5f22031a765
--- /dev/null
+++ 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
index 699e3bb6c7e..3138e8a0fae 100644
--- 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
index 61ac7b937b3..260da7181a3 100644
--- 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'
     },