[@mantine/core] Fix incorrect focus ring styles in Button.Group and A…

…ctionIcon.Group components (#5736)
mantinedev · Feb 27, 2024 · 57031df · 57031df
1 parent 9ae35d7
commit 57031df
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/@mantine/core/src/components/ActionIcon/ActionIcon.module.css b/packages/@mantine/core/src/components/ActionIcon/ActionIcon.module.css
@@ -89,6 +89,13 @@
   --ai-border-width: rem(1px);
   display: flex;
 
+  & :where(*) {
+    &:focus {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
   &[data-orientation='horizontal'] {
     flex-direction: row;
 

diff --git a/packages/@mantine/core/src/components/Button/Button.module.css b/packages/@mantine/core/src/components/Button/Button.module.css
@@ -161,14 +161,19 @@
   position: absolute;
   left: 50%;
   top: 50%;
-  /* opacity: 1 !important; */
-  /* transform: translate(-50%, -200%); */
 }
 
 .group {
   --button-border-width: rem(1px);
   display: flex;
 
+  & :where(*) {
+    &:focus {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
   &[data-orientation='horizontal'] {
     flex-direction: row;