Merge pull request #142 from PayGreen/pgf-732-fix-buttons-disabled-style

PGF-732: disabled Button and DaButton without hover style (fix)
PayGreen · May 31, 2021 · bd9ce81 · bd9ce81
2 parents 7905e6a + 3fb323a
commit bd9ce81
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 86 deletions.
diff --git a/src/lib/Button/__snapshots__/Button.test.js.snap b/src/lib/Button/__snapshots__/Button.test.js.snap
@@ -5,7 +5,7 @@ exports[`renders without crashing 1`] = `
   type="button"
 >
   <span
-    className="style__ButtonBase-pnyves-0 cuIwsX"
+    className="style__ButtonBase-pnyves-0 Plmbf"
   >
     CTA button
   </span>

diff --git a/src/lib/Button/style/base.js b/src/lib/Button/style/base.js
@@ -1,58 +1,50 @@
 import { css } from 'styled-components';
-import {
-    buttonColors,
-    enableType
-} from './constants';
-
-const enabled = css`
-    button:hover &,
-    button:active &,
-    button:focus &,
-    a:hover &,
-    a:active &,
-    a:focus & {
-        &::before,
-        &::after {
-            opacity: 1;
-        }
+import { buttonColors, enableType, opacity } from './constants';
 
-        &::before {
-            top: 0;
-            left: 0;
-        }
+const disabledStyle = css`
+    cursor: not-allowed;
 
-        &::after {
-            bottom: 0;
-            right: 0;
-        }
+    /* !important needed to override hover style */
+
+    &::before,
+    &::after {
+        opacity: ${props => opacity[props.colorType]} !important;
     }
-`;
 
-const disabled = css`
-    cursor: not-allowed;
+    &::before {
+        top: -${props => props.theme.button.shift} !important;
+        left: -${props => props.theme.button.shift} !important;
+    }
+
+    &::after {
+        bottom: -${props => props.theme.button.shift} !important;
+        right: -${props => props.theme.button.shift} !important;
+    }
 `;
 
 const templateStyle = {
     fill: css`
-        color: ${props => buttonColors.text.fill[props.colorType][enableType(props)]};
+        color: ${props =>
+            buttonColors.text.fill[props.colorType][enableType(props)]};
 
         &::before,
         &::after {
-            background-color: ${props => buttonColors.bg.fill[props.colorType][enableType(props)]};
+            background-color: ${props =>
+                buttonColors.bg.fill[props.colorType][enableType(props)]};
         }
     `,
     line: css`
-        color: ${props => buttonColors.text.line[props.colorType][enableType(props)]};
+        color: ${props =>
+            buttonColors.text.line[props.colorType][enableType(props)]};
 
         &::before,
         &::after {
-            border: solid ${props => props.theme.line} ${props => buttonColors.bg.line[props.colorType][enableType(props)]};
+            border-style: solid;
+            border-width: ${props => props.theme.line};
+            border-color: ${props =>
+                buttonColors.bg.line[props.colorType][enableType(props)]};
         }
     `,
 };
 
-export {
-    enabled,
-    disabled,
-    templateStyle
-};
+export { disabledStyle, templateStyle };
diff --git a/src/lib/Button/style/constants.js b/src/lib/Button/style/constants.js
@@ -10,51 +10,53 @@ const buttonColors = {
         fill: {
             original: {
                 enabled: colorCollection.white,
-                disabled: colorCollection.lightGrey
+                disabled: colorCollection.lightGrey,
             },
             reverse: {
                 enabled: colorCollection.main,
-                disabled: colorCollection.grey
+                disabled: colorCollection.grey,
             },
         },
         line: {
             original: {
                 enabled: colorCollection.main,
-                disabled: colorCollection.grey
+                disabled: colorCollection.grey,
             },
             reverse: {
                 enabled: colorCollection.white,
-                disabled: colorCollection.grey
+                disabled: colorCollection.grey,
             },
-        }
+        },
     },
     bg: {
         fill: {
             original: {
                 enabled: colorCollection.main,
-                disabled: colorCollection.grey
+                disabled: colorCollection.grey,
             },
             reverse: {
                 enabled: colorCollection.white,
-                disabled: colorCollection.grey
+                disabled: colorCollection.grey,
             },
         },
         line: {
             original: {
                 enabled: colorCollection.main,
-                disabled: colorCollection.grey
+                disabled: colorCollection.grey,
             },
             reverse: {
                 enabled: colorCollection.white,
-                disabled: colorCollection.grey
+                disabled: colorCollection.grey,
             },
-        }
-    }
-}
+        },
+    },
+};
+
+const enableType = props => (props.isDisabled ? 'disabled' : 'enabled');
 
-const enableType = props => props.isDisabled ? 'disabled' : 'enabled';
+const opacity = {
+    original: 0.5,
+    reverse: 0.6,
+};
 
-export {
-    buttonColors,
-    enableType
-};
+export { buttonColors, enableType, opacity };
diff --git a/src/lib/Button/style/index.js b/src/lib/Button/style/index.js
@@ -1,12 +1,9 @@
 import styled from 'styled-components';
 import { math } from 'polished';
-import { colorTypeOptions } from '../../../shared/constants';
-import { enabled, disabled, templateStyle } from './base';
+import { opacity } from './constants';
+import { disabledStyle, templateStyle } from './base';
 
 const ButtonBase = styled.span`
-    ${props => (props.isDisabled ? disabled : enabled)};
-    ${props => templateStyle[props.buttonStyle]};
-
     display: inline-block;
     position: relative;
     z-index: ${props => props.theme.zindex.base};
@@ -37,8 +34,7 @@ const ButtonBase = styled.span`
         height: 100%;
         width: 100%;
         border-radius: ${props => props.theme.radius.sm};
-        opacity: ${props =>
-            props.colorType === colorTypeOptions.reverse ? 0.6 : 0.5};
+        opacity: ${props => opacity[props.colorType]};
         transition: all ${props => props.theme.transition.xs},
             opacity ${props => props.theme.transition.sm} linear
                 ${props => props.theme.transition.xs};
@@ -53,6 +49,31 @@ const ButtonBase = styled.span`
         bottom: -${props => props.theme.button.shift};
         right: -${props => props.theme.button.shift};
     }
+
+    button:hover &,
+    button:active &,
+    button:focus &,
+    a:hover &,
+    a:active &,
+    a:focus & {
+        &::before,
+        &::after {
+            opacity: 1;
+        }
+
+        &::before {
+            top: 0;
+            left: 0;
+        }
+
+        &::after {
+            bottom: 0;
+            right: 0;
+        }
+    }
+
+    ${props => (props.isDisabled ? disabledStyle : null)};
+    ${props => templateStyle[props.buttonStyle]};
 `;
 
 export { ButtonBase };
diff --git a/src/lib/ButtonGroup/__snapshots__/ButtonGroup.test.js.snap b/src/lib/ButtonGroup/__snapshots__/ButtonGroup.test.js.snap
@@ -8,7 +8,7 @@ exports[`renders without crashing 1`] = `
     type="button"
   >
     <span
-      className="style__ButtonBase-pnyves-0 godPhX"
+      className="style__ButtonBase-pnyves-0 fwiYPy"
     >
       First button
     </span>
@@ -17,7 +17,7 @@ exports[`renders without crashing 1`] = `
     type="button"
   >
     <span
-      className="style__ButtonBase-pnyves-0 cuIwsX"
+      className="style__ButtonBase-pnyves-0 Plmbf"
     >
       Second button
     </span>

diff --git a/src/lib/Card/__snapshots__/Card.test.js.snap b/src/lib/Card/__snapshots__/Card.test.js.snap
@@ -29,7 +29,7 @@ exports[`renders without crashing 1`] = `
       type="button"
     >
       <span
-        className="style__ButtonBase-pnyves-0 cuIwsX"
+        className="style__ButtonBase-pnyves-0 Plmbf"
       >
         Your button
       </span>

diff --git a/src/lib/DaButton/__snapshots__/DaButton.test.js.snap b/src/lib/DaButton/__snapshots__/DaButton.test.js.snap
@@ -5,7 +5,7 @@ exports[`renders without crashing 1`] = `
   type="button"
 >
   <span
-    className="style__DaButtonBase-v4y7q-0 bUAqGv"
+    className="style__DaButtonBase-v4y7q-0 fTjmLr"
   >
      
     CTA button

diff --git a/src/lib/DaButton/style/base.js b/src/lib/DaButton/style/base.js
@@ -1,27 +1,18 @@
 import { css } from 'styled-components';
 import { mainColor } from './constants';
 
-const enabled = css`
-    button:hover &,
-    button:active &,
-    button:focus &,
-    a:hover &,
-    a:active &,
-    a:focus & {
-        &::before {
-            transform: scale(1);
-        }
-    }
-`;
-
-const disabled = css`
+const disabledStyle = css`
     cursor: not-allowed;
     filter: grayscale(1);
+
+    &::before {
+        display: none;
+    }
 `;
 
 const whiteBase = css`
     color: ${mainColor.white};
-    
+
     .icon svg {
         fill: ${mainColor.white};
     }
@@ -149,4 +140,4 @@ const iconStyleBase = css`
     }
 `;
 
-export { enabled, disabled, originalStyle, reverseStyle, iconStyleBase };
+export { disabledStyle, originalStyle, reverseStyle, iconStyleBase };
diff --git a/src/lib/DaButton/style/constants.js b/src/lib/DaButton/style/constants.js
@@ -1,5 +1,5 @@
-import { buttonStyleOptions } from '../../../shared/constants';
 import { math } from 'polished';
+import { buttonStyleOptions } from '../../../shared/constants';
 
 const mainColor = {
     theme: props => props.theme.color[props.colorTheme].main,

diff --git a/src/lib/DaButton/style/index.js b/src/lib/DaButton/style/index.js
@@ -4,14 +4,13 @@ import {
     buttonStyleOptions,
     colorTypeOptions,
 } from '../../../shared/constants';
+import { backgroundCalc } from './constants';
 import {
-    enabled,
-    disabled,
+    disabledStyle,
     originalStyle,
     reverseStyle,
     iconStyleBase,
 } from './base';
-import { backgroundCalc } from './constants';
 
 const DaButtonBase = styled.span`
     box-sizing: border-box;
@@ -53,11 +52,22 @@ const DaButtonBase = styled.span`
         transition: all ${props => props.theme.transition.sm};
     }
 
+    button:hover &,
+    button:active &,
+    button:focus &,
+    a:hover &,
+    a:active &,
+    a:focus & {
+        &::before {
+            transform: scale(1);
+        }
+    }
+
+    ${props => (props.isDisabled ? disabledStyle : null)};
     ${props =>
         props.colorType === colorTypeOptions.reverse
             ? reverseStyle[props.buttonStyle]
             : originalStyle[props.buttonStyle][props.gradient]};
-    ${props => (props.isDisabled ? disabled : enabled)};
     ${iconStyleBase};
 `;