fix(button): focus respects rounded corners (#3726)

uber · Sep 10, 2020 · c4f1d58 · c4f1d58 · vercel · Sep 10, 2020
1 parent eede9e8
commit c4f1d58
Showing 1 changed file with 4 additions and 15 deletions.
diff --git a/src/button/styled-components.js b/src/button/styled-components.js
@@ -34,21 +34,10 @@ export const BaseButton = styled<SharedStylePropsT>(
     borderTopStyle: 'none',
     borderRightStyle: 'none',
     borderBottomStyle: 'none',
-    outline:
-      $isFocusVisible &&
-      $shape !== SHAPE.circle &&
-      $shape !== SHAPE.round &&
-      $shape !== SHAPE.pill
-        ? `3px solid ${$theme.colors.accent}`
-        : 'none',
-    outlineOffset: '-3px',
-    boxShadow:
-      $isFocusVisible &&
-      ($shape === SHAPE.circle ||
-        $shape === SHAPE.round ||
-        $shape === SHAPE.pill)
-        ? `0 0 0 3px ${$theme.colors.accent}`
-        : 'none',
+    outline: 'none',
+    boxShadow: $isFocusVisible
+      ? `inset 0 0 0 3px ${$theme.colors.accent}`
+      : 'none',
     textDecoration: 'none',
     WebkitAppearance: 'none',
     transitionProperty: 'background',