navbar compatibility

[jcheng5]

The purpose of this PR is to make it possible for bs3 navigation bar markup to work properly when bs4 is loaded on the page (without interfering with bs4 navigation bars, if they happen to be on the page also).

Testing notes

There's a test app under test-apps/bs3-navs/app.R. You can either check out the repo and navigate there, or just download the two files at https://github.com/rstudio/bootsass/tree/master/test-apps/bs3-navs into the same directory and run the app.R.

• Ensure that navigation works for all except the "RMarkdown Website" nav bar
• Ensure that if a tab or pill is activated it looks like it is activated (tab comes to the front, pill is highlighted in blue)
  • If the selected item is on a sub-menu, then the sub-menu should look active, and the selected item should also look active
• Try making the browser window narrow to put it in mobile mode, and make sure everything works
• Disabled items should be disabled and not be clickable
• Test different themes (e.g., change bootstrap() to bootstrap(theme = "cosmo")) and ensure that the "bs3 navbarPage" section looks similar to the "bs4 navbar - default" section. Also that the "bs3 navbarPage (inverse)" section looks similar to the "bs4 navbar (dark)" section

TODO

• Clean up tests
• I think some shim JS needs to be removed from the Shiny branch
• Remove bs4 nav-related styles from Shiny branch
• For bs3 navbar drop-downs, it's possible to click on the <li> but not the <a>, which causes a no-op
• For bs3 navbar-inverse, drop-down menus have the wrong coloring (investigated and this problem exists in bs4 as well)
• $(nav_anchor).tab("show") needs to work for both bs3 and bs4

[cpsievert]

Did you mean to check in a test app?

[jcheng5]

There doesn't appear to be a dark-mode dropdown menu in bootstrap 4. This is what happens in straight bootstrap 4 if you change one of the examples from .navbar-light.bg-light to .navbar-dark.bg-dark:

And also looking at the _dropdown.scss file in bootstrap, there only appears to be one set of colors.

I'm not saying we shouldn't fix it, just that it may go into the category of "ways to make bootstrap 4 even better" rather than "ways to make bootstrap 3 work in bootstrap 4".

[cpsievert]

Looking good thus far! Just FYI, we may want to consider a shim for .tabset-dropdown rstudio/rmarkdown#1405

[cpsievert]

@jcheng5 consider 17a5f23 experimental at this point (just want to see if you think this is viable thing to do)

And now that I think of it, maybe this JS should live in rmarkdown and replace the existing .tabset-dropdown CSS? That CSS is already known to have issues, even with BS3

[cpsievert]

I think we should set justify-content: end for navbar-right?

[cpsievert]

For posterity, BS3 style content fading doesn't appear to work currently, but I'll approve and file an issue so we can get moving in the rmarkdown pull request

library(bootscss)
library(htmltools)
browsable(withTags(body(
  bs4_sass(),
  ul(
    class="nav nav-tabs", role="tablist",
    li(
      role="presentation", class="active",
      a(
        href="#home", "aria-controls" = "home", role="tab", "data-toggle"="tab",
        "Home"
      )
    ),
    li(
      role="presentation",
      a(
        href="#about", "aria-controls" = "about", role="tab", "data-toggle"="tab",
        "About"
      )
    )
  ),
  div(
    class="tab-content",
    div(
      role="tabpanel", class="tab-pane fade in active", id="home",
      "Foo"
    ),
    div(role="tabpanel", class="tab-pane fade", id="about",
        "Bar"
    )
  )
)))