Using styled dropdowns over native browser dropdowns
Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.
Summary
We have mixed usage of dropdowns across GitLab which fall in either of the following categories;
- Listing items asynchronously with search support
- Causing item selection to reload the page
- Static list of items
Out of above 3 categories, it is only in 3rd type where we're using native browser dropdown as items shown are fixed and aren't too many that requires search support.
Examples of browser native dropdown
| Desktop (macOS Mojave) | Mobile (Android Pie) | |
|---|---|---|
| Default State |  |
 |
| Dropdown Open |  |
 |
💚 Advantages
- Simple implementation due to static items.
- Native look and feel for given platform (good for gitlab-ce~2677490 as seen in mobile layout).
💔 Disadvantages
- Inconsistent styling with rest of dropdown types
- No search support when there are several items to choose from.
Proposal
This issue is open for discussion on how to go about this, there are ways to tweak default (closed state) look of dropdown via CSS appearance property to a certain extent, but it is highly experimental and lacks proper browser support. So feel free to leave your feedback/suggestions around the topic.
Personally I like our mixture of having 3 types of dropdowns as we're any way solving 3 different types of problems with these, but this issue comes from this conversation around the subject.