fix: hover styles on secondary button inside a button group

sumup-oss · Feb 6, 2023 · 6b601c2 · 6b601c2
1 parent 4dbe0ac
commit 6b601c2
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 0 deletions.
diff --git a/.changeset/shiny-otters-smash.md b/.changeset/shiny-otters-smash.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+fix hover styles on secondary button inside a button group
diff --git a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx
@@ -77,6 +77,10 @@ const secondaryButtonStyles = ({
   ${theme.mq.untilKilo} {
     margin-right: 0;
     margin-top: ${theme.spacings.mega};
+    &:hover {
+      background-color: transparent;
+      border-color: transparent;
+    }
     ${tertiaryStyles({ theme, variant: 'tertiary', destructive })}
   }
 `;

diff --git a/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap b/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap
@@ -261,6 +261,11 @@ exports[`ButtonGroup should render aligned to the center 1`] = `
   .circuit-5[aria-pressed='true'] {
     color: #1A368E;
   }
+
+  .circuit-5:hover {
+    background-color: transparent;
+    border-color: transparent;
+  }
 }
 
 <div
@@ -562,6 +567,11 @@ exports[`ButtonGroup should render aligned to the left 1`] = `
   .circuit-5[aria-pressed='true'] {
     color: #1A368E;
   }
+
+  .circuit-5:hover {
+    background-color: transparent;
+    border-color: transparent;
+  }
 }
 
 <div
@@ -863,6 +873,11 @@ exports[`ButtonGroup should render aligned to the right 1`] = `
   .circuit-5[aria-pressed='true'] {
     color: #1A368E;
   }
+
+  .circuit-5:hover {
+    background-color: transparent;
+    border-color: transparent;
+  }
 }
 
 <div
@@ -1164,6 +1179,11 @@ exports[`ButtonGroup should render with default styles 1`] = `
   .circuit-5[aria-pressed='true'] {
     color: #1A368E;
   }
+
+  .circuit-5:hover {
+    background-color: transparent;
+    border-color: transparent;
+  }
 }
 
 <div

diff --git a/...ges/circuit-ui/components/NotificationModal/__snapshots__/NotificationModal.spec.tsx.snap b/...ges/circuit-ui/components/NotificationModal/__snapshots__/NotificationModal.spec.tsx.snap
@@ -413,6 +413,11 @@ exports[`NotificationModal styles should render with an SVG 1`] = `
   .circuit-16[aria-pressed='true'] {
     color: #1A368E;
   }
+
+  .circuit-16:hover {
+    background-color: transparent;
+    border-color: transparent;
+  }
 }
 
 <body
@@ -963,6 +968,11 @@ exports[`NotificationModal styles should render with default styles 1`] = `
   .circuit-15[aria-pressed='true'] {
     color: #1A368E;
   }
+
+  .circuit-15:hover {
+    background-color: transparent;
+    border-color: transparent;
+  }
 }
 
 <body
@@ -1489,6 +1499,11 @@ exports[`NotificationModal styles should render without an image 1`] = `
   .circuit-14[aria-pressed='true'] {
     color: #1A368E;
   }
+
+  .circuit-14:hover {
+    background-color: transparent;
+    border-color: transparent;
+  }
 }
 
 <body