Add dark support for input field and dropdown #853
Conversation
|
This pull request is automatically deployed with Now. |
There was a problem hiding this comment.
I made some suggestions to get things in line with our spacing scale. However, there are a lot of very finnicky numbers in our directional "caret" CSS, so feel free to disregard any of these suggestions that break anything. Having a Storybook view with all of the directions open at once might make it easier to work through these; lmk if I can help on that front!
| @@ -0,0 +1,19 @@ | |||
| # Primer dropdown | |||
There was a problem hiding this comment.
Can we include the upstream changes in release-12.6.0 and regenerate this page from the template?
There was a problem hiding this comment.
Not sure what that means... should I do anything here? :)
| border-top: 7px solid $white; | ||
| border-right: 7px solid transparent; | ||
| border-bottom: 0; | ||
| border-left: 7px solid transparent; |
There was a problem hiding this comment.
Ugh, these styles! Ref: https://github.com/github/design-systems/issues/406
Co-Authored-By: Shawn Allen <shawn.allen@github.com>
|
Closing this for now. #862 has the same codebase but coming from a local branch. |
While this work is not trying to reflect on how dark theme should be supported across all primer components, it adds lightweight support for input fields and dropdowns to behave better in dark areas.
input-darkanddropdown-menu-darkare two new classes that are added on top of the existing markup to request a dark variation.In order to create new styles to the dropdown component, I had to move the existing classes from GitHub's
stylesheet.cssinto Primer (14237e9), since it didn't have any styles inline. To avoid duplicated code,dropdown.scssshould be removed from GH's stylesheet.This fixes https://github.com/github/design-systems/issues/669