Design Pattern Library - Add dropdowns

Example(s)

Usage

There are two main types of dropdowns:

• Plain dropdowns: These dropdowns usually present a list of actions. They can be thought of as a collection of buttons
• Checkmark dropdowns: The rows in dropdowns can show a checkmark to indicate that they are selected. These dropdowns are used as inputs for values
  • A dash (–) should be used instead of a checkmark when the row's value is present in some of the elements the dropdown is modifying but not others

Dimensions:

• The default max height of dropdowns is 312px
• If more elements need to be shown at once, the max height of dropdowns can be increased to 400px. Be mindful that this height can be problematic on smaller screens and mobile devices.
• The default width of dropdowns is 240px
• If the content of a dropdown is expected to consistently be narrower, the dropdown's width should be reduced to 160px (e.g. the navigation sidebar fly-outs)
• If the content of a dropdown is expected to consistently be wider, the dropdown's width should be increased to 400px (e.g. the Notification level dropdown)
• The dropdown should be placed 4px below the element it stems from

Layout:

• 8px top and bottom padding should be applied to the content of every dropdown
• 4px top and bottom margin should be applied to separators in dropdowns
• If there are more rows than fit the dropdown, an overlay with a fade effect will be applied to indicate there are more rows to be scrolled

Accessories:

• Dropdown header: Add a header to your dropdown to make its purpose clear. For example, add the header Assign milestone to make it clear that selecting an option will modify an issue's milestone instead of applying a filter
• Section headers: Use section headers to categorize the options in your dropdown. Always include a separator between sections.
• Filter box: If there are more than 20 elements in the list, it may be necessary to include a filter box
• Fixed rows: You can include a limited amount of rows that don't scroll at the bottom of your dropdown. For example, the dropdown used to switch between issue boards has two fixed options at the bottom: 'create new board' and 'delete board'

Dos and Dont's

(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)

Use checkmark dropdowns if the selection will be used as an input

✅ Do	🛑 Don’t

Don't use checkmarks if the options are actions

✅ Do	🛑 Don’t

Add padding to the top and bottom of the dropdown's content

✅ Do	🛑 Don’t

Related patterns

(List any related or similar solutions. If none, write: No related patterns)

Links / references

Pattern checklist

Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.

1. Ensure that you have broken things down into atoms, molecules, and organisms.
2. Check that you have not created a duplicate of an existing pattern.
3. Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
4. Make sure that text is created using text styles. When applicable used shared styles for colors.
5. QA check by another UXer (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)