[@mantine/core] Fix incorrect focus ring styles in Chip, SegmentedCon…

…trol and ColorPicker components (box-shadow was replaced with outline)
mantinedev · Oct 27, 2022 · a78f4bc · a78f4bc
1 parent 4773e67
commit a78f4bc
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 28 deletions.
diff --git a/src/mantine-core/src/Chip/Chip.styles.ts b/src/mantine-core/src/Chip/Chip.styles.ts
@@ -145,20 +145,16 @@ export default createStyles((theme, { radius, size, color }: ChipStylesParams, g
       outline: 'none',
 
       [`& + .${getRef('label')}`]: {
-        outline: 'none',
-        boxShadow:
+        outlineOffset: 2,
+        outline:
           theme.focusRing === 'always' || theme.focusRing === 'auto'
-            ? `0 0 0 2px ${
-                theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white
-              }, 0 0 0 4px ${
-                theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 7 : 5]
-              }`
-            : undefined,
+            ? `2px solid ${theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 7 : 5]}`
+            : 'none',
       },
 
       '&:focus:not(:focus-visible)': {
         [`& + .${getRef('label')}`]: {
-          boxShadow: theme.focusRing === 'auto' || theme.focusRing === 'never' ? 'none' : undefined,
+          outline: theme.focusRing === 'auto' || theme.focusRing === 'never' ? 'none' : undefined,
         },
       },
     },

diff --git a/src/mantine-core/src/ColorPicker/ColorSlider/ColorSlider.styles.ts b/src/mantine-core/src/ColorPicker/ColorSlider/ColorSlider.styles.ts
@@ -20,17 +20,15 @@ export default createStyles((theme, { size }: ColorSliderStyles, getRef) => ({
     outline: 0,
 
     [`&:focus .${getRef('sliderThumb')}`]: {
-      outline: 'none',
-      boxShadow:
+      outlineOffset: 2,
+      outline:
         theme.focusRing === 'always' || theme.focusRing === 'auto'
-          ? `0 0 0 2px ${
-              theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white
-            }, 0 0 0 4px ${theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 7 : 5]}`
-          : undefined,
+          ? `2px solid ${theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 7 : 5]}`
+          : 'none',
     },
 
     [`&:focus:not(:focus-visible) .${getRef('sliderThumb')}`]: {
-      boxShadow: theme.focusRing === 'auto' || theme.focusRing === 'never' ? 'none' : undefined,
+      outline: theme.focusRing === 'auto' || theme.focusRing === 'never' ? 'none' : undefined,
     },
   },
 

diff --git a/src/mantine-core/src/ColorPicker/Saturation/Saturation.styles.ts b/src/mantine-core/src/ColorPicker/Saturation/Saturation.styles.ts
@@ -27,14 +27,15 @@ export default createStyles((theme, { size }: SaturationStyles, getRef) => ({
     WebkitTapHighlightColor: 'transparent',
 
     [`&:focus .${getRef('saturationThumb')}`]: {
-      outline: 'none',
-      boxShadow: `0 0 0 1px ${
-        theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white
-      }, 0 0 0 3px ${theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 7 : 5]}`,
+      outlineOffset: 2,
+      outline:
+        theme.focusRing === 'always' || theme.focusRing === 'auto'
+          ? `2px solid ${theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 7 : 5]}`
+          : 'none',
     },
 
     [`&:focus:not(:focus-visible) .${getRef('saturationThumb')}`]: {
-      boxShadow: theme.focusRing === 'auto' || theme.focusRing === 'never' ? 'none' : undefined,
+      outline: theme.focusRing === 'auto' || theme.focusRing === 'never' ? 'none' : undefined,
     },
   },
 

diff --git a/src/mantine-core/src/SegmentedControl/SegmentedControl.styles.ts b/src/mantine-core/src/SegmentedControl/SegmentedControl.styles.ts
@@ -96,20 +96,18 @@ export default createStyles(
           outline: 'none',
 
           [`& + .${getRef('label')}`]: {
-            outline: 'none',
-            boxShadow:
+            outlineOffset: 2,
+            outline:
               theme.focusRing === 'always' || theme.focusRing === 'auto'
-                ? `0 0 0 2px ${
-                    theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white
-                  }, 0 0 0 4px ${
+                ? `2px solid ${
                     theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 7 : 5]
                   }`
-                : undefined,
+                : 'none',
           },
 
           '&:focus:not(:focus-visible)': {
             [`& + .${getRef('label')}`]: {
-              boxShadow:
+              outline:
                 theme.focusRing === 'auto' || theme.focusRing === 'never' ? 'none' : undefined,
             },
           },