From 934d2b912af0b5be929dcd951307341ce2920bbf Mon Sep 17 00:00:00 2001
From: Luke Schoen <ltfschoen@users.noreply.github.com>
Date: Wed, 13 Jun 2018 09:08:13 +0200
Subject: [PATCH] feat: Fixes #75. Add edit icon from semantic-ui to account
 name input field (#83)

* feat: Fixes #75. Add edit icon from semantic-ui to account name input field

Adding an edit icon that is embedded in the account name input field makes it more obvious to the user that the input field isn't read-only, and that there is a way to "click before doing" (i.e. editing the input field that is identified as being editable before the ability to save changes is granted). Some users may click the edit icon itself thinking it toggles the ability to edit the input field, whilst others may just recognise that the edit icon means the input field is editable. In either case just having the edit icon should suffice as being the initial "call to action" for a user wishing to edit the input field, and since the Reset and Save buttons illuminate when the account name is modified, they'll recognise that a further step is required to save their changes.

* resolve introduced ESLint and Flow errors

* fix: Move attributes up so they are in alphabetical order

* fix: Remove unnecessary classenames. Edit icon stays within input field
---
 packages/app-accounts/src/Editor.js | 1 +
 packages/ui-app/src/Input.js        | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/app-accounts/src/Editor.js b/packages/app-accounts/src/Editor.js
index 6a5d8b9991..9cb9584cc3 100644
--- a/packages/app-accounts/src/Editor.js
+++ b/packages/app-accounts/src/Editor.js
@@ -130,6 +130,7 @@ class Editor extends React.PureComponent<Props, State> {
           <div className='ui--row'>
             <Input
               className='full'
+              isEditable
               label={t('editor.name', {
                 defaultValue: 'identified by the name'
               })}
diff --git a/packages/ui-app/src/Input.js b/packages/ui-app/src/Input.js
index a451f4d0b6..87aed92a6d 100644
--- a/packages/ui-app/src/Input.js
+++ b/packages/ui-app/src/Input.js
@@ -20,6 +20,7 @@ type Props = BareProps & {
   icon?: React$Node,
   isAction?: boolean,
   isDisabled?: boolean,
+  isEditable?: boolean,
   isError?: boolean,
   isHidden?: boolean,
   label?: React$Node,
@@ -49,7 +50,7 @@ export default class Input extends React.PureComponent<Props, State> {
   };
 
   render (): React$Node {
-    const { children, className, defaultValue, icon, isAction = false, isDisabled = false, isError = false, isHidden = false, label, max, min, placeholder, style, type = 'text', value, withLabel } = this.props;
+    const { children, className, defaultValue, icon, isEditable = false, isAction = false, isDisabled = false, isError = false, isHidden = false, label, max, min, placeholder, style, type = 'text', value, withLabel } = this.props;
     const { name } = this.state;
 
     return (
@@ -61,6 +62,7 @@ export default class Input extends React.PureComponent<Props, State> {
       >
         <SUIInput
           action={isAction}
+          className={isEditable ? 'edit icon' : ''}
           defaultValue={defaultValue}
           disabled={isDisabled}
           id={name}
@@ -86,6 +88,7 @@ export default class Input extends React.PureComponent<Props, State> {
                 : 'off'
             }
           />
+          {isEditable ? <i className='edit icon' /> : null}
           {icon}
           {children}
         </SUIInput>