Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • D design
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 21
    • Issues 21
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 16
    • Merge requests 16
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Primer
  • design
  • Merge requests
  • !209

[WIP] Document guidelines for saving or submitting data

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Mike Perrotti requested to merge mp/save-patterns into main Jan 24, 2022
  • Overview 74
  • Commits 17
  • Pipelines 0
  • Changes 2

TODO

  • Replace current screenshot examples with mocks that are more "zoomed in" and specific to what is being demonstrated
  • Try to simplify the button placement guidelines
  • Page formatting/layout
  • Try a version that doesn't mention controls that don't exist yet (segmented control, toggle switch)
  • Confirm that all the questions under the "Questions these docs aim to answer" heading are answered
  • Proofread

Use cases I looked at when developing these guidelines

  • Settings forms (repo, user)
  • Editing an issue from the Memex table
  • Creating a PR review
  • Changing assignees/labels/milestones/etc on an issue
  • Creating a repo
  • Creating a gist
  • Configuring a GitHub Action

Questions these docs aim to answer

  • When is it ok to save a change without explicitly clicking a CTA? When is that ok and when isn't it ok?
  • What do I do with a save CTA button when no data has been changed?
  • How do I keep the user informed that the form submission is still in progress?
  • How do I prevent changes or multiple submissions while an entry is bing submitted?
  • Can I save a form in segments? When is it ok or not ok to do?
  • How do I decide what happens after I've saved?
  • When do we need to give feedback that something has been saved successfully or that there was an error saving?
    • How should we show that feedback?
    • How does the way we show that feedback change depending on whether there is a page refresh required? For example: We can't show something fleeting (like a toast) if the page requires a refresh to save
  • Where do "Save" buttons get placed?
    • When it's saving an inline edit?
    • When it's for a small form within a dialog?
    • When it's for a full-page form?
  • How do we make sure people don't accidentally lose data?
  • What considerations do we make for keyboard-only users?
    • Should all forms be submit-able using the "enter" key?
    • Should a multiselect dropdown's values be canceled if I hit the "Esc" key?
  • Where should focus go after I save/submit?
    • Keep it on the button unless:
      • The button is no longer there (e.g.: 1. leaving a comment and the form disappears, 2. after submission I get navigated to a new page)
      • The button becomes disabled
      • There is an important message (like an error message) that the user needs to see. Then, focus the message
  • How do I handle saving a form inside of a dropdown?
    • A11y team is recommending we don't automatically save/submit forms in a dropdown - the user must explicitly submit the form with a button
    • What are the cases where we don't require the user to explicitly submit the form with a button?

What is out-of-scope for now

  • Autosaving documents
  • Previewing the effects of the changes
  • Saved drafts

Related

  • https://github.com/github/accessibility/issues/415
  • Google Doc with content revisions
  • https://github.com/github/design-systems/pull/309 includes examples (new link to the .md with user stories)
  • 🔍 Figma audit file
Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: mp/save-patterns