Use Bootstrap default line height for new dropdowns
What does this MR do?
Change the line height for dropdowns from browser default to Bootstrap default (which is used elsewhere in GitLab).
Screenshots
| Before | After |
|---|---|
 |
 |
Does this MR meet the acceptance criteria?
- Review
-
Has been reviewed by UX -
Has been reviewed by Frontend
-
What are the relevant issue numbers?
Merge request reports
Activity
@tauriedavis can you please have a look? this changes the line height from
17pxto20pxfor the dropdowns. @cperessini mentioned that you'd be interested in this change.
assigned to @tauriedavis
@tauriedavis I saw that the design library is using 16px line height for UI components like buttons. Is the 20px line height only supposed to be used in text blocks?
Thats right, @cperessini. Only markdown is using the larger line height. UI components use 16px in order to keep aligned to our 8px grid. Rather than using line height for height, we set 16px line height and then add 8px padding (or a measure of our scale). Does that make sense?
-
Yep, that makes sense @tauriedavis.
I'd been using a mix of an approach based on 8px padding and another based on the total height of the element being a multiple of 8. It didn't really sound right to me, but I thought we were making exceptions for that kind of stuff instead of finding something logical like what you said
@winh Line height should be 16px in all dropdowns, then.
-
No prob! All the type styles are in the brand.ai now so you can import them into new sketch files. UI type is under the UI folder, markdown under markdown. Hopefully this'll be clearer moving forward since they are separated and the line heights are pre-defined
Edited by Taurie Davis -
@cperessini Would you be up for adding the dropdown as a component in the design library/sketch file? I pushed the master file to the design repo. Let me know if you want me to take a look at it after or have any questions about building out the component for the library! I was about to add dropdowns but if you want to give it a shot, then thats awesome!
assigned to @winh
-
Line height should be 16px in all dropdowns, then.
@cperessini So I should change it for the pipeline dropdowns from
20pxto16px? -
@winh Yeah, all dropdowns should be
16pxline height. We can make that a different MR and make it a stretch for 10.0 or even 10.1, we can do this incrementally.
@tauriedavis cool, I'll add them to the library! It'll give me a chance to learn how to do it
-
Yeah, all dropdowns should be
16pxline height.@cperessini I'll close this one then and open a new one to fix the line height for pipeline dropdowns.