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
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
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.
-
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. -
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. -
Reviewer: Review and approve author's changes in their personal Sketch file, according to the workflow. -
Author: Add your changes to the GitLab Sketch UI Kit (pattern library and/or instance sheet), following this step-by-step process. -
Author: Ask the reviewer to review your changes to the Sketch UI Kit files. -
Reviewer: Review and approve author's changes to the Sketch UI Kit files, according to the workflow. -
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. -
Author: Add a read only (FYI) agenda item to the next UX weekly call to inform everyone of these changes, linking to this issue.