Skip to content

Update Multi-select dropdown (CheckMark dropdown) and single-select dropdown (CheckMark dropdown) component

Problem

In the previous issue gitlab-org/gitlab-services/design.gitlab.com#443 (closed), we have discussed the affordance of our Multi-select dropdown (CheckMark dropdown) and single-select dropdown (CheckMark dropdown) component.

Current solution is not clear for the user to understand what is single-selection and what is multi-selection without interacting with it.

Proposal

Based on the research result: https://app.usabilityhub.com/sets/bbe837

single_selection

multi-selection

The winner is the system default icons. To make sure the visual is consistent no matter which system, which browser user is using. We will use Bootstrap’s custom form elementsfor checkmarks and radio button

Example(s)

File: e78ff8a7

Screenshot_2020-01-21_at_14.28.18

Usage

Dos and dont's

Related patterns

Links / references

Checklist

Make sure these are completed before closing the issue, with a link to the relevant commit or issue, if applicable. Get familiar with the Sketch UI Kit documentation which has information on updating files, structure, fonts, and symbols.

  1. Author: Create a Sketch file in your progress folder with the changes required for this issue. Try to use existing symbols, layer styles, and text styles.
  2. Author: Ask another Product Designer to review your personal Sketch file, linking them to your latest commit so they know where to find it. If they have the capacity, they should assign themselves to this issue. If not, try pinging another person.
  3. Reviewer: Review and approve author's changes in their personal Sketch file, according to the workflow.
  4. Author: Add your changes to the GitLab Sketch UI Kit (pattern library and/or instance sheet), following this step-by-step process.
  5. Author: Ask the reviewer to review your changes to the Sketch UI Kit files.
  6. Reviewer: Review and approve author's changes to the Sketch UI Kit files, according to the workflow.
  7. Author: Create an issue in the Design System to update the design specs and documentation. Mark it as related to this issue. This is this issue.
  8. Author: Add a read only (FYI) agenda item to the next UX weekly call to inform everyone of these changes, linking to this issue.

/cc @gitlab-com/gitlab-ux

Edited by Camellia X Yang