neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Luke Schoen 2018-06-13 09:08:13 +02:00 committed by Jaco Greeff
parent 6312cf4270
commit 934d2b912a
2 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/app-accounts/src/Editor.js
View File

@ -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'
})}

5
packages/ui-app/src/Input.js
View File

@ -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>