Import Dropdown component; add dark variants for dropdown and text fields

[vdepizzol]

(This PR is based on #853, but created from a local branch instead of a fork, as suggested by @shawnbot)

input-dark and dropdown-menu-dark are two new classes that are added on top of the existing markup to request a dark variation.

This fixes github/design-systems#669, closes #566.

/cc @primer/ds-core

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://primer-css-git-input-dark.primer.now.sh

[jonrohan]

We're punting this from 12.6 and putting in the next release

[simurai]

Merged in master to test and with the changes from doctocat, the dropdown styles from Primer CSS get overridden by the dropdown styles from styleguide.css.

Maybe it's ok to just switch the source order? I'll make a separate PR for that. Edit: 👉 PR #869

Resolved

[simurai]

Changes LGTM.. 👍

Something we might wanna consider: Temporarily adding input-dark and dropdown-menu-dark as a "/hack" instead of officially introduce them to Primer CSS. Because if/when we add support for dark mode, all components would need a dark version and we might not do that by adding *-dark modifier classes to all components?

[shawnbot]

Something we might wanna consider: Temporarily adding input-dark and dropdown-menu-dark as a "/hack" instead of officially introduce them to Primer CSS. Because if/when we add support for dark mode, all components would need a dark version and we might not do that by adding *-dark modifier classes to all components?

Yeah, I think of this change as a hack too. When we're ready to support dark mode more generally, we can deprecate the dark-specific selectors — unless there's some possibility that we'd want to allow folks to "manually" toggle dark mode for individual components? 🤔

[shawnbot]

As of 6964be2, this will have the following impacts on CSS bundles:

• 54 more selectors
• 1.04 K larger gzipped
• 4.2 K larger uncompressed

(As seen in the publish logs)

[shawnbot]

@vdepizzol the other thing I noticed when poking around on the docs page (which was probably broken before you started working on this): we need to probably need to wrap all of the examples in a <div style="min-height: 160px"> or similar to ensure that they dropdown is visible:

after:

To fix the north-oriented ones, you could insert an empty <div style="height: 160px"> before the <details> to push it down. See also: #820, #735 /cc @colebemis

[vdepizzol]

@shawnbot just fixed all examples in the dropdown page! flex-justify-center and flex-justify-end were useful to align the examples accordingly. ✨

[shawnbot]

Awesome! It looks like the .dropdown-w example is a bit wonky:

but that's also the case in production, so 🤷‍♀

Also, we don't use dropdown-w anywhere. So maybe we delete it? 😬 nope nope nope don't do it

[vdepizzol]

@shawnbot yeah, I also noted this. The spacings for dropdown-e and dropdown-w seem quite weird. Don't know if they are used or not 😬😬.

[shawnbot]

Okay, this looks great; let's ship it! 🚢 🚀 🤘