diff --git a/packages/eds-core-react/src/components/Button/Button.tsx b/packages/eds-core-react/src/components/Button/Button.tsx index 3bed76042f..8f1787796e 100644 --- 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 index 40af602bda..c1441627a3 100644 --- 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 index 8cd123e2cf..b84fa927fc 100644 --- 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 index 0741eee94e..e0b9337acd 100644 --- 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 index dc9012cc84..f76474c1a8 100644 --- 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 index 7996816138..ca1363f4fe 100644 --- 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 index cf1311327d..5974c4802a 100644 --- 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;