Repository: uber-web/baseui
Pull request #240 (2018-09-13 18:44:52)

fix(input): move the cursor style out of :hover state


Patch:
diff --git a/src/input/styled-components.js b/src/input/styled-components.js
index 6037b6ccc..4b6f88992 100644
--- a/src/input/styled-components.js
+++ b/src/input/styled-components.js
@@ -146,12 +146,10 @@ export const getInputStyles = (props: SharedPropsT) => {
     ...getInputPadding($size, sizing),
     width: '100%',
     maxWidth: '100%',
+    cursor: $disabled ? 'not-allowed' : 'text',
     '::placeholder': {
       color: $disabled ? colors.mono600 : colors.mono700,
     },
-    ':hover': {
-      cursor: $disabled ? 'not-allowed' : 'text',
-    },
   };
 };
 


Test patch:
diff --git a/src/input/__tests__/__snapshots__/styled-components.test.js.snap b/src/input/__tests__/__snapshots__/styled-components.test.js.snap
index 7935e68f6..f0af571b6 100644
--- a/src/input/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/input/__tests__/__snapshots__/styled-components.test.js.snap
@@ -5,15 +5,13 @@ Object {
   "::placeholder": Object {
     "color": "$theme.colors.mono700",
   },
-  ":hover": Object {
-    "cursor": "text",
-  },
   "backgroundColor": "transparent",
   "borderStyle": "none",
   "borderWidth": "0",
   "boxSizing": "border-box",
   "caretColor": "$theme.colors.primary",
   "color": "$theme.colors.mono1000",
+  "cursor": "text",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -33,15 +31,13 @@ Object {
   "::placeholder": Object {
     "color": "$theme.colors.mono600",
   },
-  ":hover": Object {
-    "cursor": "not-allowed",
-  },
   "backgroundColor": "transparent",
   "borderStyle": "none",
   "borderWidth": "0",
   "boxSizing": "border-box",
   "caretColor": "$theme.colors.primary",
   "color": "$theme.colors.mono600",
+  "cursor": "not-allowed",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
diff --git a/src/select/__tests__/__snapshots__/styled-components.test.js.snap b/src/select/__tests__/__snapshots__/styled-components.test.js.snap
index f7b7200b3..2902b0336 100644
--- a/src/select/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/select/__tests__/__snapshots__/styled-components.test.js.snap
@@ -71,9 +71,6 @@ Object {
   "::placeholder": Object {
     "color": "$theme.colors.mono700",
   },
-  ":hover": Object {
-    "cursor": "text",
-  },
   "backgroundColor": "transparent",
   "borderStyle": "none",
   "borderWidth": "0",
diff --git a/src/textarea/__tests__/__snapshots__/styled-components.test.js.snap b/src/textarea/__tests__/__snapshots__/styled-components.test.js.snap
index 3d59f54f5..fe5d68ce6 100644
--- a/src/textarea/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/textarea/__tests__/__snapshots__/styled-components.test.js.snap
@@ -5,9 +5,6 @@ Object {
   "::placeholder": Object {
     "color": "$theme.colors.mono700",
   },
-  ":hover": Object {
-    "cursor": "text",
-  },
   "backgroundColor": "$theme.colors.mono200",
   "borderColor": "$theme.colors.mono200",
   "borderRadius": undefined,
@@ -17,6 +14,7 @@ Object {
   "boxSizing": "border-box",
   "caretColor": "$theme.colors.primary",
   "color": "$theme.colors.mono1000",
+  "cursor": "text",
   "display": "flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
@@ -40,9 +38,6 @@ Object {
   "::placeholder": Object {
     "color": "$theme.colors.mono600",
   },
-  ":hover": Object {
-    "cursor": "not-allowed",
-  },
   "backgroundColor": "$theme.colors.mono300",
   "borderColor": "$theme.colors.mono300",
   "borderRadius": undefined,
@@ -52,6 +47,7 @@ Object {
   "boxSizing": "border-box",
   "caretColor": "$theme.colors.primary",
   "color": "$theme.colors.mono600",
+  "cursor": "not-allowed",
   "display": "flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",