Repository: uber-web/baseui
Pull request #216 (2018-09-10 22:33:37)

fix(button): add focus style in-lieu of outline
### Button Component

Adding `:focus:enabled` styling so that keyboard users will know which button is focused when tabbing through.

Seems to be in line with what antd and material-ui are doing. I'm using our `hover` style here because we don't have a separate styling for `focus`. @nguyensomniac can you take a look?

#### Preview

[Live Preview](https://deploy-preview-216--baseui.netlify.com/)


Patch:
diff --git a/src/button/styled-components.js b/src/button/styled-components.js
index 66b2ee0ce..c3e7145fe 100644
--- a/src/button/styled-components.js
+++ b/src/button/styled-components.js
@@ -73,6 +73,9 @@ function getStyleForKind({$theme, $kind}) {
         ':hover:enabled': {
           backgroundColor: $theme.colors.primary500,
         },
+        ':focus:enabled': {
+          backgroundColor: $theme.colors.primary500,
+        },
         ':active:enabled': {
           backgroundColor: $theme.colors.primary600,
         },
@@ -84,6 +87,9 @@ function getStyleForKind({$theme, $kind}) {
         ':hover:enabled': {
           backgroundColor: $theme.colors.primary100,
         },
+        ':focus:enabled': {
+          backgroundColor: $theme.colors.primary100,
+        },
         ':active:enabled': {
           backgroundColor: $theme.colors.primary200,
         },
@@ -95,6 +101,9 @@ function getStyleForKind({$theme, $kind}) {
         ':hover:enabled': {
           backgroundColor: $theme.colors.mono400,
         },
+        ':focus:enabled': {
+          backgroundColor: $theme.colors.mono400,
+        },
         ':active:enabled': {
           backgroundColor: $theme.colors.mono500,
         },
@@ -106,6 +115,9 @@ function getStyleForKind({$theme, $kind}) {
         ':hover:enabled': {
           backgroundColor: $theme.colors.mono200,
         },
+        ':focus:enabled': {
+          backgroundColor: $theme.colors.mono200,
+        },
         ':active:enabled': {
           backgroundColor: $theme.colors.mono400,
         },


Test patch:
diff --git a/src/button/__tests__/__snapshots__/styled-components.test.js.snap b/src/button/__tests__/__snapshots__/styled-components.test.js.snap
index 7a347e8c6..5327f053e 100644
--- a/src/button/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/button/__tests__/__snapshots__/styled-components.test.js.snap
@@ -10,6 +10,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.mono200",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.mono200",
   },
@@ -48,6 +51,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.mono200",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.mono200",
   },
@@ -86,6 +92,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.mono200",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.mono200",
   },
@@ -124,6 +133,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.mono200",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.mono200",
   },
@@ -162,6 +174,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.mono200",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.mono200",
   },
@@ -200,6 +215,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.mono200",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.mono200",
   },
@@ -238,6 +256,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.primary500",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.primary500",
   },
@@ -276,6 +297,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.primary500",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.primary500",
   },
@@ -314,6 +338,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.primary500",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.primary500",
   },
@@ -352,6 +379,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.primary500",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.primary500",
   },
@@ -390,6 +420,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.primary500",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.primary500",
   },
@@ -428,6 +461,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.primary500",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.primary500",
   },
@@ -466,6 +502,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.primary100",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.primary100",
   },
@@ -504,6 +543,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.primary100",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.primary100",
   },
@@ -542,6 +584,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.primary100",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.primary100",
   },
@@ -580,6 +625,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.primary100",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.primary100",
   },
@@ -618,6 +666,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.primary100",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.primary100",
   },
@@ -656,6 +707,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.primary100",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.primary100",
   },
@@ -694,6 +748,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.mono400",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.mono400",
   },
@@ -732,6 +789,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.mono400",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.mono400",
   },
@@ -770,6 +830,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.mono400",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.mono400",
   },
@@ -808,6 +871,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.mono400",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.mono400",
   },
@@ -846,6 +912,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.mono400",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.mono400",
   },
@@ -884,6 +953,9 @@ Object {
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
+  ":focus:enabled": Object {
+    "backgroundColor": "$theme.colors.mono400",
+  },
   ":hover:enabled": Object {
     "backgroundColor": "$theme.colors.mono400",
   },