Repository: uber-web/baseui
Pull request #711 (2019-01-04 19:17:17)

fix(input): fix enhancers bg color
Before:
<img width="501" alt="screen shot 2019-01-04 at 11 16 37 am" src="https://user-images.githubusercontent.com/1920399/50706302-44b9e500-1012-11e9-848b-d9faa35c25f9.png">

After:
<img width="573" alt="screen shot 2019-01-04 at 11 14 59 am" src="https://user-images.githubusercontent.com/1920399/50706237-15a37380-1012-11e9-96e3-14059a0174a4.png">



Patch:
diff --git a/screener.config.js b/screener.config.js
index 1076e9ca0..624272913 100644
--- a/screener.config.js
+++ b/screener.config.js
@@ -46,8 +46,10 @@ module.exports = {
     /Checkbox as toggle example/,
     /Icons in Button/,
     new RegExp(`${FileUploader.FILE_UPLOADER_EXAMPLE}$`),
-    new RegExp(Input.SIMPLE_EXAMPLE),
-    new RegExp(Input.VALUE_EXAMPLE),
+    new RegExp(Input.SIZE_EXAMPLE),
+    new RegExp(Input.STATE_EXAMPLE),
+    new RegExp(Input.ENHANCERS_EXAMPLE),
+    new RegExp(Input.BEFORE_AFTER_EXAMPLE),
     /Stateless Menu/,
     new RegExp(`${Modal.SIMPLE_EXAMPLE}$`),
     new RegExp(Notification.NOTIFICATION_EXAMPLE),
diff --git a/src/input/examples.js b/src/input/examples.js
index 88d09e646..12cf1033a 100644
--- a/src/input/examples.js
+++ b/src/input/examples.js
@@ -131,6 +131,8 @@ export default {
         <Input size={SIZE.compact} placeholder="Default input" />
         <br />
         <Input
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus={true}
           initialState={{value: 'uber'}}
           startEnhancer="@"
           endEnhancer=".com"
diff --git a/src/input/styled-components.js b/src/input/styled-components.js
index 8390d65ec..3c1bfbb19 100644
--- a/src/input/styled-components.js
+++ b/src/input/styled-components.js
@@ -74,7 +74,7 @@ export const InputEnhancer = styled('div', props => {
     color: colors.foreground,
     display: 'flex',
     ...getInputPadding($size, sizing),
-    backgroundColor: colors.inputFill,
+    backgroundColor: colors.inputFillEnhancer,
     borderRadius: getDecoratorBorderRadius($position, sizing.scale100),
   };
 });
diff --git a/src/progress-steps/examples.js b/src/progress-steps/examples.js
index df8cf2818..3d0d36c31 100644
--- a/src/progress-steps/examples.js
+++ b/src/progress-steps/examples.js
@@ -8,6 +8,8 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import React from 'react';
+import Screener, {Steps} from 'screener-storybook/src/screener.js';
+
 import {ProgressSteps, Step, NumberedStep} from './index.js';
 import examples from './examples-list.js';
 import {Button} from '../button/index.js';
@@ -121,7 +123,19 @@ class DefaultExampleComponent extends React.Component<
 
 export default {
   [examples.DEFAULT]: function Story1() {
-    return <DefaultExampleComponent />;
+    const selector = 'button:enabled';
+
+    return (
+      <Screener
+        steps={new Steps()
+          .wait(selector)
+          .click(selector)
+          .snapshot('progress step next step triggered')
+          .end()}
+      >
+        <DefaultExampleComponent />
+      </Screener>
+    );
   },
   [examples.NUMBERED]: function Story2() {
     return <DefaultExampleComponent isNumber />;
diff --git a/src/themes/creator.js b/src/themes/creator.js
index 421e80112..65ee3f9f3 100644
--- a/src/themes/creator.js
+++ b/src/themes/creator.js
@@ -175,6 +175,7 @@ export default function createTheme(
 
       // Inputs
       inputFill: primitives.mono200,
+      inputFillEnhancer: primitives.mono400,
       inputFillError: primitives.negative50,
       inputFillDisabled: primitives.mono300,
       inputTextDisabled: primitives.mono600,
diff --git a/src/themes/dark-theme.js b/src/themes/dark-theme.js
index cc3026c4d..cc228dd56 100644
--- a/src/themes/dark-theme.js
+++ b/src/themes/dark-theme.js
@@ -107,6 +107,7 @@ export const DarkTheme = createTheme(
 
       // Input
       inputFill: primitives.mono600,
+      inputFillEnhancer: primitives.mono500,
       inputFillError: primitives.mono600,
       inputFillDisabled: primitives.mono700,
       inputTextDisabled: primitives.mono500,


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 4740a4ee1..918d20f89 100644
--- a/src/input/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/input/__tests__/__snapshots__/styled-components.test.js.snap
@@ -252,7 +252,7 @@ Object {
 
 exports[`Input - StyledInputEnhancer - basic render: StyledInputEnhancer has correct styles when compact and end position 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.inputFill",
+  "backgroundColor": "$theme.colors.inputFillEnhancer",
   "borderRadius": "0 $theme.sizing.scale100 $theme.sizing.scale100 0",
   "color": "$theme.colors.foreground",
   "display": "flex",
@@ -269,7 +269,7 @@ Object {
 
 exports[`Input - StyledInputEnhancer - basic render: StyledInputEnhancer has correct styles when default size and start position 1`] = `
 Object {
-  "backgroundColor": "$theme.colors.inputFill",
+  "backgroundColor": "$theme.colors.inputFillEnhancer",
   "borderRadius": "$theme.sizing.scale100 0 0 $theme.sizing.scale100",
   "color": "$theme.colors.foreground",
   "display": "flex",