Merge pull request #111 from strapi/develop

3.0.3

Author: soupette

docs/stories/components/Button.stories.js

@@ -113,6 +113,16 @@ function Example() {
               Text
             </Button>
           </div>
+          <div className="btn-wrapper">
+            <Button
+              type="submit"
+              color="delete"
+              icon={<FontAwesomeIcon icon={faBaseballBall} />}
+              disabled
+            >
+              Disabled
+            </Button>
+          </div>
         </section>
       </>
     </Presentation>

packages/buffetjs-hooks/src/useIsMounted/index.js

@@ -3,7 +3,7 @@ import { useRef, useEffect } from 'react';
 // Hook taken from https://github.com/hupe1980/react-is-mounted-hook
 
 function useIsMounted() {
-  const ref = useRef(false);
+  const ref = useRef(true);
 
   useEffect(() => {
     ref.current = true;

packages/buffetjs-styles/src/assets/styles/colors.js

@@ -68,7 +68,7 @@ const colors = {
       backgroundColor: '#6DBB1A',
     },
     disabled: {
-      borderColor: '#B4B6BA',
+      borderColor: '#E9EAEB',
       color: '#B4B6BA',
       backgroundColor: '#E9EAEB',
     },

packages/buffetjs-styles/src/components/Button/index.js

@@ -41,16 +41,6 @@ const Button = styled.button`
     vertical-align: initial;
   }
 
-  ${({ disabled }) =>
-    disabled &&
-    `
-    &:hover {
-      box-shadow: none;
-      cursor: initial;
-    }
-    `}
-
-
   // Specific style
   ${({ color }) =>
     color !== 'none' &&
@@ -60,15 +50,15 @@ const Button = styled.button`
       color: ${colors.button[color].color};
     `}
 
-  ${({ color, disabled }) =>
-    color !== 'cancel' &&
-    color !== 'none' &&
+  ${({ disabled }) =>
     disabled &&
     `
-      &:disabled {
-        background-color: ${colors.button.disabled.backgroundColor};
-        border: 1px solid ${colors.button.disabled.borderColor};
-        color: ${colors.button.disabled.color};
+      background-color: ${colors.button.disabled.backgroundColor};
+      border: 1px solid ${colors.button.disabled.borderColor};
+      color: ${colors.button.disabled.color};
+      &:hover {
+        box-shadow: none;
+        cursor: initial;
       }
     `}
 
@@ -84,7 +74,6 @@ const Button = styled.button`
     `
       min-width: ${sizes.button.minWidth.small};
     `}
-
 `;
 
 Button.defaultProps = {