fix(input-field): adjust focus props and label story (#447)

* fix(input-field): use `focus` for state and `initialFocus` for props * docs(input-field): adjust stories to updated design system
dhis2 · Sep 23, 2019 · 353aa6e · 353aa6e
1 parent ec3efe4
commit 353aa6e
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/Input.js b/src/Input.js
@@ -102,7 +102,7 @@ export class Input extends Component {
     }
 
     componentDidMount() {
-        if (this.props.focus) {
+        if (this.props.initialFocus) {
             this.inputRef.current.focus()
         }
     }

diff --git a/src/InputField.js b/src/InputField.js
@@ -25,6 +25,7 @@ class InputField extends React.Component {
             onChange,
             onFocus,
             onBlur,
+            initialFocus,
             type,
             dense,
             required,
@@ -55,7 +56,6 @@ class InputField extends React.Component {
                 ) : null}
 
                 <Input
-                    focus={focus}
                     onFocus={onFocus}
                     onBlur={onBlur}
                     onChange={onChange}
@@ -70,6 +70,7 @@ class InputField extends React.Component {
                     loading={loading}
                     dense={dense}
                     tabIndex={tabIndex}
+                    initialFocus={initialFocus}
                 />
 
                 {helpText ? <Help>{helpText}</Help> : null}

diff --git a/stories/InputField.stories.js b/stories/InputField.stories.js
@@ -74,19 +74,19 @@ function createStory(name, props) {
             <InputField {...props} value="This field is dense" dense />
         ))
 
-        .add('Label too long', () => (
+        .add('Label text overflow', () => (
             <InputField
                 {...props}
-                label="This label is too long in order to show on a single line of the input field. It should be cropped, not in an extra line. It should always be shorter than this!"
+                label="This label is too long to show on a single line of the input field's label. We just let it flow to the next line so the user can still read it. However, we should always aim to keep it shorter than this!"
                 dense
                 warning
             />
         ))
 
-        .add('Value too long', () => (
+        .add('Value text overflow', () => (
             <InputField
                 {...props}
-                value="This value is too long in order to show on a single line of the input field. It should stay on one line, not in an extra line and which wouldn't look like a std input"
+                value="This value is too long in order to show on a single line of the input field. It should stay on one line, not in an extra line and which wouldn't look like a standard input"
                 dense
                 warning
             />