fix: Button icon hover delay (#1135)

bylapidist · Jun 26, 2022 · 8355057 · 8355057
1 parent 7ca3556
commit 8355057
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 30 deletions.
diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { faCircleCheck } from '@fortawesome/free-solid-svg-icons';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { ThemeProvider } from '../theme-provider';
 import { Button } from './index';
 
@@ -46,6 +46,6 @@ Grey.args = {
 export const WithIcon = DefaultTemplate.bind({});
 WithIcon.args = {
     kind: 'primary',
-    icon: faCircleCheck,
+    icon: faXmark,
     styles: templateStyles
 };
diff --git a/src/components/button/__snapshots__/Button.spec.tsx.snap b/src/components/button/__snapshots__/Button.spec.tsx.snap
@@ -174,36 +174,29 @@ exports[`it works with icon 1`] = `
   align-items: center;
 }
 
-.c2 {
-  margin-right: 0.5rem;
-}
-
 <button
   class="c0"
   type="button"
 >
   <div
     class="c1"
   >
-    <div
-      class="c2"
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-circle "
+      data-icon="circle"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style="margin-right: 0.5rem;"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        aria-hidden="true"
-        class="svg-inline--fa fa-circle "
-        data-icon="circle"
-        data-prefix="fas"
-        focusable="false"
-        role="img"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z"
-          fill="currentColor"
-        />
-      </svg>
-    </div>
+      <path
+        d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z"
+        fill="currentColor"
+      />
+    </svg>
     Hello world
   </div>
 </button>

diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -54,9 +54,10 @@ const BaseButton: React.FC<ButtonPropType & ButtonProps> = ({
                 }}
             >
                 {icon && (
-                    <Box styles={{ marginRight: '2' }}>
-                        <FontAwesomeIcon icon={icon} />
-                    </Box>
+                    <FontAwesomeIcon
+                        style={{ marginRight: '0.5rem' }}
+                        icon={icon}
+                    />
                 )}
                 {children}
             </Box>

diff --git a/src/components/theme-provider/index.tsx b/src/components/theme-provider/index.tsx
@@ -26,9 +26,9 @@ const GlobalStyle = createGlobalStyle`
         font-size: 100%;
         font: inherit;
         vertical-align: baseline;
-        transition: color 0.12s cubic-bezier(0.6, 0.04, 0.98, 0.7) 0s,
-            border 0.12s cubic-bezier(0.6, 0.04, 0.98, 0.7) 0s,
-            background-color 0.12s cubic-bezier(0.6, 0.04, 0.98, 0.7) 0s;
+        transition: color 0.08s cubic-bezier(0.6, 0.04, 0.98, 0.7) 0s,
+            border 0.08s cubic-bezier(0.6, 0.04, 0.98, 0.7) 0s,
+            background-color 0.08s cubic-bezier(0.6, 0.04, 0.98, 0.7) 0s;
     }
     html { box-sizing: border-box; }
     *, *:before, *:after { box-sizing: inherit; }