rstudio / learnr

Interactive Tutorials with R Markdown
https://pkgs.rstudio.com/learnr
Apache License 2.0
712 stars 239 forks source link

Update learnr components to support bslib #468

Open gadenbuie opened 3 years ago

gadenbuie commented 3 years ago

bslib is close to being supported in learnr, but learnr's custom components need to be updated.

schloerke commented 3 years ago

Some sass that I've used in the bslib Rmd chunk... (similar to last example in https://rstudio.github.io/bslib/articles/bslib.html#add-rules)

.topicsList .topic {
  border-bottom: 1px solid $primary
}

.topicsList .topic.current, 
.topicsList .topic.current:hover,
.topicsList .topic:hover
{
  background-color: $primary
}
.panel-heading.tutorial-panel-heading {
  background-color: $primary
}

.btn-tutorial-start-over:hover {
  background-color: $warning
}
schloerke commented 3 years ago

With the default tutorial, change the header to

---
title: "Tutorial"
output:
  learnr::tutorial:
    theme:
      bootswatch: cerulean
runtime: shiny_prerendered
---

When running the tutorial, you'll get an error: Screen Shot 2021-07-27 at 11 33 57 AM

Caused by popover js within bootstrap moving from destroy method to dispose method.

Called here: https://github.com/rstudio/learnr/blob/6a1592f0798c7ea515253bb67464c836ac918126/inst/lib/tutorial/tutorial.js#L1322

bs3 docs (destroy): https://www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp bs4 docs (dispose): https://getbootstrap.com/docs/4.0/components/popovers/#popoverdispose bs5 docs (dispose): https://getbootstrap.com/docs/5.0/components/popovers/#dispose

How shiny currently detects if bs3 exists: https://github.com/rstudio/shiny/blob/244fdc72bc7334d182113b5e0494f1a16f04d9c1/srcts/src/utils/index.ts#L373 . Could be used to toggle the method name.

cc @rjknell