Skip to content

Update all dropdown to align the selection affordance

Background

We have updated dropdown with headers in the issue: #942 (comment 303492623)

Dropdown with headers use:

  • Radio button for single selection
  • Checkbox for multi selections

Screenshot_2020-01-21_at_14.28.18

Problem

**We still have dropdown without headers uses checkmarks which create same confusing and inconsistency, they need to be updated **

  • CASE 1: Without header + selection item without icons/avatar. It should use "radio-button" for single selection and multi-selection as well. It is quick to update because usability/visuals are the same as the header one which has been discussed and tested.

  • CASE 2: Without header + selection item with icons. Might need to play around to see how it looks visually with a radio button next to an icon/avatar. Not 100% sure about it yet.

Screenshot_2020-03-12_at_11.55.15

Solution

Dropdowns

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