Button: fix misaligned clickbounds (equinor#3397)

* 🐛 Button (round): fix misaligned clickbound * 🔥 Button: remove pointless ::before element * 📸 Update snapshots
mhwaage · Jun 11, 2024 · 8c670aa · 8c670aa
1 parent ed880e0
commit 8c670aa
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 60 deletions.
diff --git a/packages/eds-core-react/src/components/Button/Button.tsx b/packages/eds-core-react/src/components/Button/Button.tsx
@@ -90,15 +90,6 @@ const ButtonBase = styled.button(({ theme }: { theme: ButtonToken }) => {
     ${bordersTemplate(theme.border)}
     ${typographyTemplate(theme.typography)}
 
-    &::before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: auto;
-      min-height: auto;
-      content: '';
-    }
-
     &::after {
       position: absolute;
       top: -${clickbound?.offset?.top};

diff --git a/packages/eds-core-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/eds-core-react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -45,15 +45,6 @@ exports[`Button Matches snapshot 1`] = `
   justify-self: center;
 }
 
-.c0::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: auto;
-  min-height: auto;
-  content: '';
-}
-
 .c0::after {
   position: absolute;
   top: -7px;

diff --git a/packages/eds-core-react/src/components/Button/tokens/contained_icon.ts b/packages/eds-core-react/src/components/Button/tokens/contained_icon.ts
@@ -27,8 +27,12 @@ const contained_icon = {
   clickbound: {
     width: clicboundHeight,
     offset: {
-      top: '0',
-      left: `${(parseInt(clicboundHeight) - parseInt('40px')) / 2}px`,
+      top: `${
+        (parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2
+      }px`,
+      left: `${
+        (parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2
+      }px`,
     },
   },
   states: {

diff --git a/packages/eds-core-react/src/components/Button/tokens/icon.ts b/packages/eds-core-react/src/components/Button/tokens/icon.ts
@@ -42,7 +42,9 @@ export const primary = mergeDeepRight(button, {
   clickbound: {
     width: clicboundHeight,
     offset: {
-      top: '0',
+      top: `${
+        (parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2
+      }px`,
       left: `${
         (parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2
       }px`,

diff --git a/packages/eds-core-react/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/eds-core-react/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -46,18 +46,9 @@ exports[`Pagination Matches snapshot 1`] = `
   justify-self: center;
 }
 
-.c3::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: auto;
-  min-height: auto;
-  content: '';
-}
-
 .c3::after {
   position: absolute;
-  top: -0;
+  top: -4px;
   left: -4px;
   width: 48px;
   height: 48px;

diff --git a/packages/eds-core-react/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap b/packages/eds-core-react/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap
@@ -123,18 +123,9 @@ exports[`Sidebar Matches snapshot 1`] = `
   justify-self: center;
 }
 
-.c3::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: auto;
-  min-height: auto;
-  content: '';
-}
-
 .c3::after {
   position: absolute;
-  top: -0;
+  top: -4px;
   left: -4px;
   width: 48px;
   height: 48px;
@@ -202,15 +193,6 @@ exports[`Sidebar Matches snapshot 1`] = `
   justify-self: center;
 }
 
-.c7::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: auto;
-  min-height: auto;
-  content: '';
-}
-
 .c7::after {
   position: absolute;
   top: -7px;

diff --git a/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap b/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap
@@ -56,18 +56,9 @@ exports[`SideSheet Matches snapshot 1`] = `
   justify-self: center;
 }
 
-.c3::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: auto;
-  min-height: auto;
-  content: '';
-}
-
 .c3::after {
   position: absolute;
-  top: -0;
+  top: -4px;
   left: -4px;
   width: 48px;
   height: 48px;