Storycards
All the Inline Edit Storycards are available on the Inline Edit Storycards page.
The current storycards are:
- IE Story 1 (FLUID-775): Allow user to edit a simple, single piece of text without leaving their context.
- IE Story 2 (FLUID-780): Provide user with undo capabilities
- IE Story 3: Provide user with "redo edit" capabilities
- IE Story 4: Provide date picker if editible information is a date
- IE Story 5: Allow editible field to be a dropdown, radio button or checkbox
- IE Story 6: Allow "document-style" editing
- IE Story 7: Placeholder for error handling (i.e. name exists)
- IE Story 8: Allow a large amount of text editing "document-style"
Wireframes & Final Storyboards
'Simple Text Inline Edit' Component
Simple Text Inline Edit Storyboard
'Edit Mode Inline Edit' Component
Hidden Content Inline Edit Storyboard
'Dropdown Inline Edit' Component (constrained choices)
Dropdown Inline Edit Storyboard
Date Inline Edit
Visual Representation of Interesting Moments
Interesting Moments |
Simple Text |
Dropdown |
Radio Buttons |
Date |
Link |
---|---|---|---|---|---|
Mouseover (Discoverability) |
Entire field is highlighted |
Entire field is highlighted |
|
Entire Field is highlighted |
Editable object = None |
Hover >2 seconds (Clarity) |
Entire field is highlighted |
Entire field is highlighted |
|
Entire field is highlighted |
Editable object = None (controlled by integrating app since link takes some action) |
Edit Initiated |
Cursor displays at end of text |
No cursor display |
|
Cursor displays at end of text |
Cursor displays at end of text |
NOTE: Red text indicates this state should be configurable by integrator
Configurable Behaviors / Settings
- Field size
- Hover text
- Cursor location in editable field on initiation (ex. default is at end of text, some may want the existing to text to be selected)
- Whether or not there is a yellow highlight of field on mouseover
- Whether or not "Click to edit" is displayed in empty field
- Allowing single or multiple line input
- If single line input only allowed: upon paste of text with carriage returns, whether a) carriage returns are changed into spaces or b) all the text after the first carriage return is removed (cut)