🐛 Fixed icon button horizontal clickbound (#963)

* 🐛 Fixed icon button horizontal clickbound * ♻️ added buttonSize var for clarity
equinor · Dec 9, 2020 · 4682356 · 4682356
1 parent b9108bb
commit 4682356
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/libraries/core-react/src/components/Button/Button.tsx b/libraries/core-react/src/components/Button/Button.tsx
@@ -72,8 +72,8 @@ const Base = ({ token }: { token: ButtonToken }) => {
     &::after {
       position: absolute;
       top: -${clickbound?.offset?.top};
-      left: 0;
-      width: 100%;
+      left: -${clickbound?.offset?.left};
+      width: ${clickbound?.width};
       height: ${clickbound?.height};
       content: '';
     }

diff --git a/libraries/core-react/src/components/Button/tokens/icon.ts b/libraries/core-react/src/components/Button/tokens/icon.ts
@@ -16,16 +16,25 @@ const {
       danger__highlight: { rgba: dangerHoverAltColor },
     },
   },
+  clickbounds: { default__base: clicboundHeight },
 } = tokens
 
+const buttonSize = 40
+
 export const primary: ButtonToken = R.mergeDeepRight(button, {
-  height: '40px',
-  width: '40px',
+  height: `${buttonSize}px`,
+  width: `${buttonSize}px`,
   border: {
     radius: '50%',
   },
   background: 'transparent',
   spacings: { left: '0', right: '0' },
+  clickbound: {
+    width: clicboundHeight,
+    offset: {
+      left: `${(parseInt(clicboundHeight) - buttonSize) / 2}px`,
+    },
+  },
   states: {
     hover: {
       background: primaryHoverAltColor,