Skip to content
GitLab

Add dropdown classes for contextual background colors

Closed Administrator requested to merge github/fork/tordans/v4-dropdown-background-colors into v4-dev

Created by: tordans

The Dropdown Element should have the ability to receive colored backgrounds similar to the Table contextual classes or card background variants.

Example Code

See docs/components/dropdowns.md

Changes

  • There are three special cases I see for the background colors, that make the whole change more complex that I like.
    • Edge case 1: colored item as first/last child; this the easiest and cleanest to solve.
    • Edge case 2: a divider, then a colored item; this is annoying, since there is now "previous sibling" in css yet, so I worked around it with negative margins and border. To keep the margins in sync they are extracted in a variable.
    • Edge case 3: a colored item, then a divider; the is also annoying, since the divider is not build in a way that would make this color change easy, so I worked around it with a before element. A cleaner way might be to find a way to refactor the divider to behave like three stacked color bars on top of each other; maybe by just switching the spacing from margins to borders?
  • To solve edge case 3 I change the .dropdown-divider-overflow and position behavior. Also I removed/re-integrated mixins/nav-divider since it was only used by the divider anyways.
  • The colors for the dropdown modifier are added to the variables and re-use the form-state-colors as a default.
  • The dropdown documentation is extend i a very basic way.

Questions

  • Does the whole thing compile? I don't have a full setup here. // See comments below.
  • Should it also work for the whole .dropdown-menu like it does for table>tr as well as table>td?
  • Should the docs for Buttons dropdown and Dropdown interlink more? Right now they duplicate information but there are no links for the information that is missing in the other place.
  • Should there be an .inverted case?
  • For the docs: What is the proper pattern to name the headlines that handle color changes. For tables, cards, … they all use different headlines like "Contextual variations", "Examples", "Contextual classes" and so on. Maybe I should extract this in a separate issue?
  • How to handle the fact that https://github.com/twbs/bootstrap/pull/13797 introduces colored :hover states that will cause new edge cases for this idea. Worst case is, that the colors are very similar so the :hover effect is nullified.