Lead: Liav Nadler Status colour Yellow title ongoing
Related Pages: Data Tables
| Table of Contents |
|---|
Description
An editable table is a /wiki/spaces/UX/pages/283051242 in which the user can edit data inside a row, without the need to navigate to a separate page, a panel or a popup
Basic Flow
- An editable table is similar to a basic table, with the exceptions described below:
- Clicking the edit icon in any row:
- Selects that row (if not already selected)
- Changes all relevant cells of that row to input fields (this may include text fields, dropdown menus, spinners, date pickers etc.)
- Replaces all action icons with two icons: confirm (V) and cancel (X)
- The user can enter or update any input field, in any order
- When done the user can click on one of the two icons:
- Clicking the confirm icon changes all input fields back to text, with the updated values
- Clicking the cancel icon changes all input fields back to text, with the previous values
Edge Cases
- On edit mode, if the user clicked on any other element on the page after changing any field, a popup window will appear, warning about the potential data loss. In this case:
- If the user chooses to continue editing the popup will close
- If the user chooses to close and discard changes, the row will switch back to normal mode, with the previous set of values
...
- In case the text is longer than the text field
Accessibility compliance
Focus management
On edit mode:
- By default, the first input field will be in focus
- The user can move the focus to the next or previous field using Tab / Shift+Tab
- Clicking Enter when the focus is on a text field will change all input fields back to text, with the updated value
<<We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
Contrast & size compliance
<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>
Design
| Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
Code
<<a box containing the code - discuss with Femi>>