From 77f3e5921cfaa4a627d00eb59d2d0d8f8a63ef7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Tue, 18 May 2021 14:01:48 +0200 Subject: [PATCH 01/27] work on tabs --- R/html-tweak.R | 63 ++++++++++++++++++++++++++++++++++++ vignettes/test/rendering.Rmd | 14 ++++++++ 2 files changed, 77 insertions(+) diff --git a/R/html-tweak.R b/R/html-tweak.R index f1af66335..563406d9c 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -129,6 +129,64 @@ tweak_footnotes <- function(html) { xml2::xml_remove(container) } +tablist_item <- function(tab, html, id) { + id <- xml2::xml_attr(tab, "id") + text <- xml_text1(xml2::xml_child(tab)) + xml2::xml_add_child( + xml2::xml_find_first(html, "//div[contains(@class, 'list-group')]"), + "a", + text, + class = "list-group-item list-group-item-action", + `data-toggle` = "list", + href = paste0("#", id), + role = "tab" + ) +} + +tablist_content <- function(tab, html) { + id <- xml2::xml_attr(tab, "id") + + # remove 1st child that is the header + xml2::xml_remove(xml2::xml_child(tab)) + + xml2::xml_attr(tab, "class") <- "tab-pane" + xml2::xml_attr(tab, "role") <- "tabpanel" + + xml2::xml_add_child( + xml2::xml_find_first(html, "//div[contains(@class, 'tab-content')]"), + tab + ) +} + +tweak_tabset <- function(html) { + id <- xml2::xml_attr(html, "id") + xml2::xml_add_child(html, "div", class="list-group", id=id, role="tablist") + xml2::xml_add_child(html, "div", class="tab-content") + tabs <- xml2::xml_find_all(html, "div[contains(@id, 'tab')]") + purrr::walk(tabs, tablist_item, html = html, id = id) + purrr::walk(tabs, tablist_content, html = html) + + xml2::xml_remove(tabs) + + # active first + tweak_class_prepend( + xml2::xml_find_first(html, "//a[contains(@class, 'list-group-item list-group-item-action')]"), + "active" + ) + tweak_class_prepend( + xml2::xml_find_first(html, "//div[contains(@class, 'tab-pane')]"), + "active" + ) +} + +tweak_tabsets <- function(html) { + tabsets <- xml2::xml_find_all(html, ".//div[contains(@class, 'tabset')]") + if (length(tabsets) == 0) { + return() + } + purrr::walk(tabsets, tweak_tabset) +} + # File level tweaks -------------------------------------------- tweak_rmarkdown_html <- function(html, input_path, pkg = pkg) { @@ -137,8 +195,13 @@ tweak_rmarkdown_html <- function(html, input_path, pkg = pkg) { tweak_anchors(html, only_contents = FALSE) tweak_md_links(html) tweak_all_links(html, pkg = pkg) + + # Tweak footnotes if (pkg$bs_version > 3) tweak_footnotes(html) + # Tweak tabsets + if (pkg$bs_version > 3) tweak_tabsets(html) + # Tweak classes of navbar toc <- xml2::xml_find_all(html, ".//div[@id='tocnav']//ul") xml2::xml_attr(toc, "class") <- "nav nav-pills nav-stacked" diff --git a/vignettes/test/rendering.Rmd b/vignettes/test/rendering.Rmd index 77eff9eb1..bf16c9838 100644 --- a/vignettes/test/rendering.Rmd +++ b/vignettes/test/rendering.Rmd @@ -185,3 +185,17 @@ Blablablablablabla. # This section is unnumbered {-} There should however be no bug here! + +## Results {.tabset} + +### Tab 1 + +blablablabla + +```r +1 + 1 +``` + +### Tab 2 + +blop From 98006787554d66d3eaa91162b953e13b59e789e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Tue, 18 May 2021 14:31:35 +0200 Subject: [PATCH 02/27] tabs --- R/html-tweak.R | 23 +++++++++++++++++------ inst/assets/BS4/pkgdown.css | 5 +++++ vignettes/test/rendering.Rmd | 2 +- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/R/html-tweak.R b/R/html-tweak.R index 563406d9c..79d590fd7 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -133,14 +133,19 @@ tablist_item <- function(tab, html, id) { id <- xml2::xml_attr(tab, "id") text <- xml_text1(xml2::xml_child(tab)) xml2::xml_add_child( - xml2::xml_find_first(html, "//div[contains(@class, 'list-group')]"), + xml2::xml_find_first(html, "//ul[contains(@class, 'nav nav-')]"), "a", text, - class = "list-group-item list-group-item-action", - `data-toggle` = "list", + `data-toggle` = "tab", + `data-value` = text, href = paste0("#", id), role = "tab" ) + + xml2::xml_add_parent( + xml2::xml_find_first(html, sprintf("//a[@href='%s']", paste0("#", id))), + "li" + ) } tablist_content <- function(tab, html) { @@ -151,6 +156,7 @@ tablist_content <- function(tab, html) { xml2::xml_attr(tab, "class") <- "tab-pane" xml2::xml_attr(tab, "role") <- "tabpanel" + xml2::xml_attr(tab, "data-value") <- xml_text1(xml2::xml_child(tab)) xml2::xml_add_child( xml2::xml_find_first(html, "//div[contains(@class, 'tab-content')]"), @@ -160,17 +166,22 @@ tablist_content <- function(tab, html) { tweak_tabset <- function(html) { id <- xml2::xml_attr(html, "id") - xml2::xml_add_child(html, "div", class="list-group", id=id, role="tablist") + nav_class <- if (grepl("tabset-pills", xml2::xml_attr(html, "class"))) { + "nav-pills" + } else { + "nav-tabs" + } + xml2::xml_add_child(html, "ul", class=sprintf("nav %s nav-row", nav_class), id=id) xml2::xml_add_child(html, "div", class="tab-content") tabs <- xml2::xml_find_all(html, "div[contains(@id, 'tab')]") + xml2::xml_remove(tabs) purrr::walk(tabs, tablist_item, html = html, id = id) purrr::walk(tabs, tablist_content, html = html) - xml2::xml_remove(tabs) # active first tweak_class_prepend( - xml2::xml_find_first(html, "//a[contains(@class, 'list-group-item list-group-item-action')]"), + xml2::xml_parent(xml2::xml_find_first(html, "//a[@role='tab']")), "active" ) tweak_class_prepend( diff --git a/inst/assets/BS4/pkgdown.css b/inst/assets/BS4/pkgdown.css index 5699583ac..4cce56011 100644 --- a/inst/assets/BS4/pkgdown.css +++ b/inst/assets/BS4/pkgdown.css @@ -465,3 +465,8 @@ summary { details p { margin-top: -.5rem; } + +/* tabsets */ +.nav-row { + flex-direction: row; +} diff --git a/vignettes/test/rendering.Rmd b/vignettes/test/rendering.Rmd index bf16c9838..9e3925417 100644 --- a/vignettes/test/rendering.Rmd +++ b/vignettes/test/rendering.Rmd @@ -186,7 +186,7 @@ Blablablablablabla. There should however be no bug here! -## Results {.tabset} +## Results in tabset {.tabset .tabset-pills} ### Tab 1 From 62cbdc9da9ec31bc141d08602f36254086966ee3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Tue, 18 May 2021 15:04:48 +0200 Subject: [PATCH 03/27] better --- R/html-tweak.R | 42 +++++++++++++++++++++++++----------- vignettes/test/rendering.Rmd | 15 +++++++++++++ 2 files changed, 44 insertions(+), 13 deletions(-) diff --git a/R/html-tweak.R b/R/html-tweak.R index 79d590fd7..f0decdaee 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -129,54 +129,70 @@ tweak_footnotes <- function(html) { xml2::xml_remove(container) } -tablist_item <- function(tab, html, id) { +tablist_item <- function(tab, html, parent_id) { id <- xml2::xml_attr(tab, "id") text <- xml_text1(xml2::xml_child(tab)) + ul_nav <- xml2::xml_find_first(html, sprintf("//ul[@id='%s']", parent_id)) + xml2::xml_add_child( - xml2::xml_find_first(html, "//ul[contains(@class, 'nav nav-')]"), + ul_nav, "a", text, `data-toggle` = "tab", - `data-value` = text, + #`data-value` = id, href = paste0("#", id), role = "tab" ) + # a's need to be wrapped in li's xml2::xml_add_parent( xml2::xml_find_first(html, sprintf("//a[@href='%s']", paste0("#", id))), "li" ) } -tablist_content <- function(tab, html) { - id <- xml2::xml_attr(tab, "id") - +# For filling the content div of a tabset +tablist_content <- function(tab, html, parent_id) { # remove 1st child that is the header xml2::xml_remove(xml2::xml_child(tab)) xml2::xml_attr(tab, "class") <- "tab-pane" xml2::xml_attr(tab, "role") <- "tabpanel" - xml2::xml_attr(tab, "data-value") <- xml_text1(xml2::xml_child(tab)) - - xml2::xml_add_child( - xml2::xml_find_first(html, "//div[contains(@class, 'tab-content')]"), - tab + #xml2::xml_attr(tab, "data-value") <- xml2::xml_attr(tab, "id") + content_div <- xml2::xml_find_first( + html, + sprintf("//div[@id='%s']/div", parent_id) ) + + xml2::xml_add_child(content_div, tab) } tweak_tabset <- function(html) { id <- xml2::xml_attr(html, "id") + + # Users can choose pills or tabs nav_class <- if (grepl("tabset-pills", xml2::xml_attr(html, "class"))) { "nav-pills" } else { "nav-tabs" } + + # Add empty ul for nav xml2::xml_add_child(html, "ul", class=sprintf("nav %s nav-row", nav_class), id=id) + # Add empty div for content xml2::xml_add_child(html, "div", class="tab-content") + + # Identify tabs and get them in an object tabs <- xml2::xml_find_all(html, "div[contains(@id, 'tab')]") + + # Remove tabs from original HTML xml2::xml_remove(tabs) - purrr::walk(tabs, tablist_item, html = html, id = id) - purrr::walk(tabs, tablist_content, html = html) + + # Fill the ul for nav + purrr::walk(tabs, tablist_item, html = html, parent_id = id) + + # Fill the div for content + purrr::walk(tabs, tablist_content, html = html, parent_id = id) # active first diff --git a/vignettes/test/rendering.Rmd b/vignettes/test/rendering.Rmd index 9e3925417..e2fad35e2 100644 --- a/vignettes/test/rendering.Rmd +++ b/vignettes/test/rendering.Rmd @@ -199,3 +199,18 @@ blablablabla ### Tab 2 blop + + +## Results in tabset, no pills {.tabset} + +### Tab 1 + +something nice + +```r +1 + 1 +``` + +### Tab 2 + +hello From e9221609f1fc23adca23da29f9483345e1041a3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Tue, 18 May 2021 15:10:28 +0200 Subject: [PATCH 04/27] progress --- R/html-tweak.R | 11 ++++++++--- vignettes/test/rendering.Rmd | 4 ++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/R/html-tweak.R b/R/html-tweak.R index f0decdaee..8cbac928e 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -194,14 +194,19 @@ tweak_tabset <- function(html) { # Fill the div for content purrr::walk(tabs, tablist_content, html = html, parent_id = id) - # active first +# TODO add control tweak_class_prepend( - xml2::xml_parent(xml2::xml_find_first(html, "//a[@role='tab']")), + xml2::xml_child(xml2::xml_find_first(html, sprintf("//ul[@id='%s']", id))), "active" ) tweak_class_prepend( - xml2::xml_find_first(html, "//div[contains(@class, 'tab-pane')]"), + xml2::xml_child( + xml2::xml_find_first( + html, + sprintf("//div[@id='%s']/div", id) + ) + ), "active" ) } diff --git a/vignettes/test/rendering.Rmd b/vignettes/test/rendering.Rmd index e2fad35e2..f361aeb1d 100644 --- a/vignettes/test/rendering.Rmd +++ b/vignettes/test/rendering.Rmd @@ -207,8 +207,8 @@ blop something nice -```r -1 + 1 +```{r} +plot(1:42) ``` ### Tab 2 From 8f959c05468fd174a7868ca6e156e0e27f7e8451 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Tue, 18 May 2021 15:19:50 +0200 Subject: [PATCH 05/27] choose active one --- R/html-tweak.R | 38 +++++++++++++++++++++--------------- vignettes/test/rendering.Rmd | 2 +- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/R/html-tweak.R b/R/html-tweak.R index 8cbac928e..6e4d32420 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -144,10 +144,16 @@ tablist_item <- function(tab, html, parent_id) { role = "tab" ) + if (grepl("active", xml2::xml_attr(tab, "class"))) { + class <- "active" + } else { + class = "" + } # a's need to be wrapped in li's xml2::xml_add_parent( xml2::xml_find_first(html, sprintf("//a[@href='%s']", paste0("#", id))), - "li" + "li", + class = class ) } @@ -156,7 +162,12 @@ tablist_content <- function(tab, html, parent_id) { # remove 1st child that is the header xml2::xml_remove(xml2::xml_child(tab)) - xml2::xml_attr(tab, "class") <- "tab-pane" + if (grepl("active", xml2::xml_attr(tab, "class"))) { + xml2::xml_attr(tab, "class") <- sprintf("tab-pane active") + } else { + xml2::xml_attr(tab, "class") <- sprintf("tab-pane") + } + xml2::xml_attr(tab, "role") <- "tabpanel" #xml2::xml_attr(tab, "data-value") <- xml2::xml_attr(tab, "id") content_div <- xml2::xml_find_first( @@ -195,20 +206,15 @@ tweak_tabset <- function(html) { purrr::walk(tabs, tablist_content, html = html, parent_id = id) # active first -# TODO add control - tweak_class_prepend( - xml2::xml_child(xml2::xml_find_first(html, sprintf("//ul[@id='%s']", id))), - "active" - ) - tweak_class_prepend( - xml2::xml_child( - xml2::xml_find_first( - html, - sprintf("//div[@id='%s']/div", id) - ) - ), - "active" - ) + nav_url <- xml2::xml_find_first(html, sprintf("//ul[@id='%s']", id)) + if (!any(grepl("active", xml2::xml_attr(xml2::xml_children(nav_url), "class")))) { + tweak_class_prepend(xml2::xml_child(nav_url), "active") + } + + content_div <- xml2::xml_find_first(html, sprintf("//div[@id='%s']/div", id)) + if (!any(grepl("active", xml2::xml_attr(xml2::xml_children(content_div), "class")))) { + tweak_class_prepend(xml2::xml_child(content_div), "active") + } } tweak_tabsets <- function(html) { diff --git a/vignettes/test/rendering.Rmd b/vignettes/test/rendering.Rmd index f361aeb1d..bf6898334 100644 --- a/vignettes/test/rendering.Rmd +++ b/vignettes/test/rendering.Rmd @@ -211,6 +211,6 @@ something nice plot(1:42) ``` -### Tab 2 +### Tab 2 {.active} hello From 96e10d053d77dd9e3443b7a9ae48eebc9246dc88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Tue, 18 May 2021 15:25:13 +0200 Subject: [PATCH 06/27] news item --- NEWS.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/NEWS.md b/NEWS.md index 8ea1f0830..142f540e7 100644 --- a/NEWS.md +++ b/NEWS.md @@ -1,5 +1,7 @@ # pkgdown (development version) +* pkgdown, for Bootstrap 4, supports tabsets in articles [as in R Markdown](https://bookdown.org/yihui/rmarkdown-cookbook/html-tabs.html) (@JamesHWade, #1667). + * pkgdown (in concert with downlit and roxygen2) is moving towards more consistent HTML structure for syntax highlighting. The goal is to always have a `
` with class `sourceCode` (and other classes as needed), which contains one or more `
`s that has class `sourceCode` and the language, and each `
` contains ``. Something like this:
 
     ```html

From 68a18024d11a5c00f3e7ab5eae9cd023ba8aca79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= 
Date: Tue, 18 May 2021 15:33:25 +0200
Subject: [PATCH 07/27] add tests

---
 R/html-tweak.R                                |  1 +
 tests/testthat/_snaps/html-tweak/tabsets.html | 23 +++++++++
 tests/testthat/test-html-tweak.R              | 48 +++++++++++++++++++
 3 files changed, 72 insertions(+)
 create mode 100644 tests/testthat/_snaps/html-tweak/tabsets.html

diff --git a/R/html-tweak.R b/R/html-tweak.R
index 6e4d32420..fe4b18337 100644
--- a/R/html-tweak.R
+++ b/R/html-tweak.R
@@ -223,6 +223,7 @@ tweak_tabsets <- function(html) {
     return()
   }
   purrr::walk(tabsets, tweak_tabset)
+  return(invisible(html))
 }
 
 # File level tweaks --------------------------------------------
diff --git a/tests/testthat/_snaps/html-tweak/tabsets.html b/tests/testthat/_snaps/html-tweak/tabsets.html
new file mode 100644
index 000000000..91a768ec5
--- /dev/null
+++ b/tests/testthat/_snaps/html-tweak/tabsets.html
@@ -0,0 +1,23 @@
+
+

+

+Results in tabset

+
+
+
+

+

+
+
blablablabla

+
+1 + 1

+

+

+
+
blop

+

+

+

diff --git a/tests/testthat/test-html-tweak.R b/tests/testthat/test-html-tweak.R
index 21cdfa072..1d4a319aa 100644
--- a/tests/testthat/test-html-tweak.R
+++ b/tests/testthat/test-html-tweak.R
@@ -354,3 +354,51 @@ test_that("activate_navbar()", {
       xml2::xml_find_first(navbar, ".//li[contains(@class, 'active')]")
   )
 })
+
+# tabsets -------------------------------------------------------------
+
+test_that("tweak_tabsets() default", {
+  html <- '

+

+Results in tabset

+

+

+Tab 1

+
blablablabla

+
+1 + 1

+

+

+

+Tab 2

+
blop

+

+
'
+  new_html <- tweak_tabsets(xml2::read_html(html))
+  dir <- withr::local_tempdir()
+  xml2::write_html(new_html, file.path(dir, "tabsets.html"))
+  expect_snapshot_file(file.path(dir, "tabsets.html"))
+})
+
+test_that("tweak_tabsets() with tab pills and second tab active", {
+  html <- '

+

+Results in tabset

+

+

+Tab 1

+
blablablabla

+
+1 + 1

+

+

+

+Tab 2

+
blop

+

+
'
+  new_html <- tweak_tabsets(xml2::read_html(html))
+  dir <- withr::local_tempdir()
+  xml2::write_html(new_html, file.path(dir, "tabsets-pills-second-active.html"))
+  expect_snapshot_file(file.path(dir, "tabsets-pills-second-activ.html"))
+})

From 09aeba16ab8c2faa7cfbb3aa3dcb6f184f9c55f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= 
Date: Wed, 19 May 2021 13:26:45 +0200
Subject: [PATCH 08/27] clean

---
 R/html-tweak.R | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/R/html-tweak.R b/R/html-tweak.R
index fe4b18337..f8cbe0520 100644
--- a/R/html-tweak.R
+++ b/R/html-tweak.R
@@ -139,7 +139,6 @@ tablist_item <- function(tab, html, parent_id) {
     "a",
     text,
     `data-toggle` = "tab",
-    #`data-value` = id,
     href = paste0("#", id),
     role = "tab"
   )
@@ -169,7 +168,7 @@ tablist_content <- function(tab, html, parent_id) {
   }
 
   xml2::xml_attr(tab, "role") <- "tabpanel"
-  #xml2::xml_attr(tab, "data-value") <- xml2::xml_attr(tab, "id")
+
   content_div <- xml2::xml_find_first(
     html,
     sprintf("//div[@id='%s']/div", parent_id)
@@ -205,7 +204,8 @@ tweak_tabset <- function(html) {
   # Fill the div for content
   purrr::walk(tabs, tablist_content, html = html, parent_id = id)
 
-  # active first
+  # activate first tab unless another one is already activated
+  # (by {.active} in the source Rmd)
   nav_url <- xml2::xml_find_first(html, sprintf("//ul[@id='%s']", id))
   if (!any(grepl("active", xml2::xml_attr(xml2::xml_children(nav_url), "class")))) {
     tweak_class_prepend(xml2::xml_child(nav_url), "active")

From 05389d67aa2b091db0beca1356a9ba5922e03ef1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= 
Date: Wed, 19 May 2021 14:02:51 +0200
Subject: [PATCH 09/27] tweak test

---
 tests/testthat/_snaps/html-tweak.md           | 52 +++++++++++++++++++
 tests/testthat/_snaps/html-tweak/tabsets.html | 23 --------
 tests/testthat/test-html-tweak.R              |  8 +--
 3 files changed, 54 insertions(+), 29 deletions(-)
 delete mode 100644 tests/testthat/_snaps/html-tweak/tabsets.html

diff --git a/tests/testthat/_snaps/html-tweak.md b/tests/testthat/_snaps/html-tweak.md
index 1df5c2962..0503f916e 100644
--- a/tests/testthat/_snaps/html-tweak.md
+++ b/tests/testthat/_snaps/html-tweak.md
@@ -100,3 +100,55 @@
     [1] \n    
+    

+    

+    Results in tabset

+    
+    
+    
+    

+    

+    
+    
blablablabla

+    
+    1 + 1

+    

+    

+    
+    
blop

+    

+    

+    

+
+# tweak_tabsets() with tab pills and second tab active
+
+    
+    

+    

+    Results in tabset

+    
+    
+    
+    

+    

+    
+    
blablablabla

+    
+    1 + 1

+    

+    

+    
+    
blop

+    

+    

+    

+
diff --git a/tests/testthat/_snaps/html-tweak/tabsets.html b/tests/testthat/_snaps/html-tweak/tabsets.html
deleted file mode 100644
index 91a768ec5..000000000
--- a/tests/testthat/_snaps/html-tweak/tabsets.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-

-

-Results in tabset

-
-
-
-

-

-
-
blablablabla

-
-1 + 1

-

-

-
-
blop

-

-

-

diff --git a/tests/testthat/test-html-tweak.R b/tests/testthat/test-html-tweak.R
index 1d4a319aa..fcf98b93a 100644
--- a/tests/testthat/test-html-tweak.R
+++ b/tests/testthat/test-html-tweak.R
@@ -375,9 +375,7 @@ test_that("tweak_tabsets() default", {
' new_html <- tweak_tabsets(xml2::read_html(html)) - dir <- withr::local_tempdir() - xml2::write_html(new_html, file.path(dir, "tabsets.html")) - expect_snapshot_file(file.path(dir, "tabsets.html")) + expect_snapshot_output(cat(as.character(new_html))) }) test_that("tweak_tabsets() with tab pills and second tab active", { @@ -398,7 +396,5 @@ test_that("tweak_tabsets() with tab pills and second tab active", { ' new_html <- tweak_tabsets(xml2::read_html(html)) - dir <- withr::local_tempdir() - xml2::write_html(new_html, file.path(dir, "tabsets-pills-second-active.html")) - expect_snapshot_file(file.path(dir, "tabsets-pills-second-activ.html")) + expect_snapshot_output(cat(as.character(new_html))) }) From 5e003f3c04aa2b0ab834f3621cdba2d6f7a69c1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Mon, 24 May 2021 10:05:49 +0200 Subject: [PATCH 10/27] Update R/html-tweak.R Co-authored-by: Hadley Wickham --- R/html-tweak.R | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/R/html-tweak.R b/R/html-tweak.R index f8cbe0520..c60910053 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -223,7 +223,7 @@ tweak_tabsets <- function(html) { return() } purrr::walk(tabsets, tweak_tabset) - return(invisible(html)) + invisible(html) } # File level tweaks -------------------------------------------- From 00b18c21b89a30b2368acb1473e61681c72d77b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Mon, 24 May 2021 10:23:41 +0200 Subject: [PATCH 11/27] feedback from review --- R/html-tweak.R | 126 +++++++++++++++++++++++++++---------------------- 1 file changed, 69 insertions(+), 57 deletions(-) diff --git a/R/html-tweak.R b/R/html-tweak.R index c60910053..754e2096a 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -129,52 +129,18 @@ tweak_footnotes <- function(html) { xml2::xml_remove(container) } -tablist_item <- function(tab, html, parent_id) { - id <- xml2::xml_attr(tab, "id") - text <- xml_text1(xml2::xml_child(tab)) - ul_nav <- xml2::xml_find_first(html, sprintf("//ul[@id='%s']", parent_id)) - - xml2::xml_add_child( - ul_nav, - "a", - text, - `data-toggle` = "tab", - href = paste0("#", id), - role = "tab" - ) - - if (grepl("active", xml2::xml_attr(tab, "class"))) { - class <- "active" - } else { - class = "" - } - # a's need to be wrapped in li's - xml2::xml_add_parent( - xml2::xml_find_first(html, sprintf("//a[@href='%s']", paste0("#", id))), - "li", - class = class - ) -} - -# For filling the content div of a tabset -tablist_content <- function(tab, html, parent_id) { - # remove 1st child that is the header - xml2::xml_remove(xml2::xml_child(tab)) +# Tabsets tweaking: find Markdown recommended in https://bookdown.org/yihui/rmarkdown-cookbook/html-tabs.html +# i.e. "## Heading {.tabset}" or "## Heading {.tabset .tabset-pills}" +# no matter the heading level -- the headings one level down are the tabs +# and transform to tabsets HTML a la Bootstrap - if (grepl("active", xml2::xml_attr(tab, "class"))) { - xml2::xml_attr(tab, "class") <- sprintf("tab-pane active") - } else { - xml2::xml_attr(tab, "class") <- sprintf("tab-pane") +tweak_tabsets <- function(html) { + tabsets <- xml2::xml_find_all(html, ".//div[contains(@class, 'tabset')]") + if (length(tabsets) == 0) { + return() } - - xml2::xml_attr(tab, "role") <- "tabpanel" - - content_div <- xml2::xml_find_first( - html, - sprintf("//div[@id='%s']/div", parent_id) - ) - - xml2::xml_add_child(content_div, tab) + purrr::walk(tabsets, tweak_tabset) + invisible(html) } tweak_tabset <- function(html) { @@ -205,27 +171,71 @@ tweak_tabset <- function(html) { purrr::walk(tabs, tablist_content, html = html, parent_id = id) # activate first tab unless another one is already activated - # (by {.active} in the source Rmd) + # (by the attribute {.active} in the source Rmd) nav_url <- xml2::xml_find_first(html, sprintf("//ul[@id='%s']", id)) if (!any(grepl("active", xml2::xml_attr(xml2::xml_children(nav_url), "class")))) { tweak_class_prepend(xml2::xml_child(nav_url), "active") } - content_div <- xml2::xml_find_first(html, sprintf("//div[@id='%s']/div", id)) if (!any(grepl("active", xml2::xml_attr(xml2::xml_children(content_div), "class")))) { tweak_class_prepend(xml2::xml_child(content_div), "active") } } -tweak_tabsets <- function(html) { - tabsets <- xml2::xml_find_all(html, ".//div[contains(@class, 'tabset')]") - if (length(tabsets) == 0) { - return() +# Add an item (tab) to the tablist +tablist_item <- function(tab, html, parent_id) { + id <- xml2::xml_attr(tab, "id") + text <- xml_text1(xml2::xml_child(tab)) + ul_nav <- xml2::xml_find_first(html, sprintf("//ul[@id='%s']", parent_id)) + + xml2::xml_add_child( + ul_nav, + "a", + text, + `data-toggle` = "tab", + href = paste0("#", id), + role = "tab" + ) + + # Activate (if there was "{.active}" in the source Rmd) + if (grepl("active", xml2::xml_attr(tab, "class"))) { + class <- "active" + } else { + class = "" } - purrr::walk(tabsets, tweak_tabset) - invisible(html) + + # tab a's need to be wrapped in li's + xml2::xml_add_parent( + xml2::xml_find_first(html, sprintf("//a[@href='%s']", paste0("#", id))), + "li", + class = class + ) +} + +# Add content of a tab to a tabset +tablist_content <- function(tab, html, parent_id) { + # remove first child, that is the header + xml2::xml_remove(xml2::xml_child(tab)) + + # Activate (if there was "{.active}" in the source Rmd) + if (grepl("active", xml2::xml_attr(tab, "class"))) { + xml2::xml_attr(tab, "class") <- "tab-pane active" + } else { + xml2::xml_attr(tab, "class") <- "tab-pane" + } + + xml2::xml_attr(tab, "role") <- "tabpanel" + + content_div <- xml2::xml_find_first( + html, + sprintf("//div[@id='%s']/div", parent_id) + ) + + xml2::xml_add_child(content_div, tab) } + + # File level tweaks -------------------------------------------- tweak_rmarkdown_html <- function(html, input_path, pkg = pkg) { @@ -235,17 +245,19 @@ tweak_rmarkdown_html <- function(html, input_path, pkg = pkg) { tweak_md_links(html) tweak_all_links(html, pkg = pkg) - # Tweak footnotes - if (pkg$bs_version > 3) tweak_footnotes(html) + if (pkg$bs_version > 3) { + # Tweak footnotes + tweak_footnotes(html) - # Tweak tabsets - if (pkg$bs_version > 3) tweak_tabsets(html) + # Tweak tabsets + tweak_tabsets(html) + } # Tweak classes of navbar toc <- xml2::xml_find_all(html, ".//div[@id='tocnav']//ul") xml2::xml_attr(toc, "class") <- "nav nav-pills nav-stacked" - # Mame sure all images use relative paths + # Make sure all images use relative paths img <- xml2::xml_find_all(html, "//img") src <- xml2::xml_attr(img, "src") abs_src <- is_absolute_path(src) From 9233d0363474f2268ec55c3cdc492a229fb52019 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Mon, 24 May 2021 10:37:37 +0200 Subject: [PATCH 12/27] fix code finding the tabs :facepalm: --- R/html-tweak.R | 12 ++++++------ vignettes/test/rendering.Rmd | 6 +++++- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/R/html-tweak.R b/R/html-tweak.R index 754e2096a..8f197bfc9 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -153,17 +153,17 @@ tweak_tabset <- function(html) { "nav-tabs" } - # Add empty ul for nav - xml2::xml_add_child(html, "ul", class=sprintf("nav %s nav-row", nav_class), id=id) - # Add empty div for content - xml2::xml_add_child(html, "div", class="tab-content") - # Identify tabs and get them in an object - tabs <- xml2::xml_find_all(html, "div[contains(@id, 'tab')]") + tabs <- xml2::xml_find_all(html, "div") # Remove tabs from original HTML xml2::xml_remove(tabs) + # Add empty ul for nav + xml2::xml_add_child(html, "ul", class=sprintf("nav %s nav-row", nav_class), id=id) + # Add empty div for content + xml2::xml_add_child(html, "div", class="tab-content") + # Fill the ul for nav purrr::walk(tabs, tablist_item, html = html, parent_id = id) diff --git a/vignettes/test/rendering.Rmd b/vignettes/test/rendering.Rmd index bf6898334..fcbff783c 100644 --- a/vignettes/test/rendering.Rmd +++ b/vignettes/test/rendering.Rmd @@ -203,7 +203,7 @@ blop ## Results in tabset, no pills {.tabset} -### Tab 1 +### A thing something nice @@ -211,6 +211,10 @@ something nice plot(1:42) ``` +#### cool + +yay + ### Tab 2 {.active} hello From 0d61641370daa18dcf012d3321f085cb99a241f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Thu, 3 Jun 2021 12:51:08 +0200 Subject: [PATCH 13/27] drop --- R/html-tweak.R | 3 --- 1 file changed, 3 deletions(-) diff --git a/R/html-tweak.R b/R/html-tweak.R index 8f197bfc9..35ce730cd 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -136,9 +136,6 @@ tweak_footnotes <- function(html) { tweak_tabsets <- function(html) { tabsets <- xml2::xml_find_all(html, ".//div[contains(@class, 'tabset')]") - if (length(tabsets) == 0) { - return() - } purrr::walk(tabsets, tweak_tabset) invisible(html) } From bd7c455eaee293bcabf654dd1ac6af299e117108 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Thu, 3 Jun 2021 12:51:44 +0200 Subject: [PATCH 14/27] Update R/html-tweak.R Co-authored-by: Hadley Wickham --- R/html-tweak.R | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/R/html-tweak.R b/R/html-tweak.R index 35ce730cd..8139d9521 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -156,9 +156,8 @@ tweak_tabset <- function(html) { # Remove tabs from original HTML xml2::xml_remove(tabs) - # Add empty ul for nav + # Add empty ul for nav and div for content xml2::xml_add_child(html, "ul", class=sprintf("nav %s nav-row", nav_class), id=id) - # Add empty div for content xml2::xml_add_child(html, "div", class="tab-content") # Fill the ul for nav From 7ae5091b28143f7cad640f2302502d53f5c35c9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Thu, 3 Jun 2021 12:53:41 +0200 Subject: [PATCH 15/27] more compression of comments --- R/html-tweak.R | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/R/html-tweak.R b/R/html-tweak.R index 8139d9521..094473f6b 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -150,20 +150,16 @@ tweak_tabset <- function(html) { "nav-tabs" } - # Identify tabs and get them in an object + # Get tabs and remove them from original HTML tabs <- xml2::xml_find_all(html, "div") - - # Remove tabs from original HTML xml2::xml_remove(tabs) # Add empty ul for nav and div for content xml2::xml_add_child(html, "ul", class=sprintf("nav %s nav-row", nav_class), id=id) xml2::xml_add_child(html, "div", class="tab-content") - # Fill the ul for nav + # Fill the ul for nav and div for content purrr::walk(tabs, tablist_item, html = html, parent_id = id) - - # Fill the div for content purrr::walk(tabs, tablist_content, html = html, parent_id = id) # activate first tab unless another one is already activated From bba3e4bae975d1eb3ab1e650df2dc3133b01d12b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Thu, 3 Jun 2021 13:06:22 +0200 Subject: [PATCH 16/27] if in assignment --- R/html-tweak.R | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/R/html-tweak.R b/R/html-tweak.R index 094473f6b..257a2a16b 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -190,10 +190,10 @@ tablist_item <- function(tab, html, parent_id) { ) # Activate (if there was "{.active}" in the source Rmd) - if (grepl("active", xml2::xml_attr(tab, "class"))) { - class <- "active" + class <- if (grepl("active", xml2::xml_attr(tab, "class"))) { + "active" } else { - class = "" + "" } # tab a's need to be wrapped in li's From bc8314c9c8152591eaad3a08718cceb0a5cfe2e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Thu, 3 Jun 2021 13:15:37 +0200 Subject: [PATCH 17/27] add border for tabset pills --- inst/assets/BS4/pkgdown.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/inst/assets/BS4/pkgdown.css b/inst/assets/BS4/pkgdown.css index 4cce56011..149ef4bf4 100644 --- a/inst/assets/BS4/pkgdown.css +++ b/inst/assets/BS4/pkgdown.css @@ -470,3 +470,9 @@ details p { .nav-row { flex-direction: row; } + +.tabset-pills .tab-content { + padding: 1rem; + border-left: solid 1px #e5e5e5; + border-bottom: solid 1px #e5e5e5; +} From dc5f2a4972998d7b625f502f9ad06bd099b282f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Thu, 3 Jun 2021 13:58:49 +0200 Subject: [PATCH 18/27] try adding fading --- NEWS.md | 2 +- R/html-tweak.R | 25 +++++++++++++++++++------ inst/assets/BS4/pkgdown.css | 8 +++++++- vignettes/test/rendering.Rmd | 18 ++++++++++++++++++ 4 files changed, 45 insertions(+), 8 deletions(-) diff --git a/NEWS.md b/NEWS.md index a471f353c..b4b89fc78 100644 --- a/NEWS.md +++ b/NEWS.md @@ -1,6 +1,6 @@ # pkgdown (development version) -* pkgdown, for Bootstrap 4, supports tabsets in articles [as in R Markdown](https://bookdown.org/yihui/rmarkdown-cookbook/html-tabs.html) (@JamesHWade, #1667). +* pkgdown, for Bootstrap 4, supports tabsets in articles [as in R Markdown](https://bookdown.org/yihui/rmarkdown-cookbook/html-tabs.html) including [fading effect](https://bookdown.org/yihui/rmarkdown/html-document.html#tabbed-sections) (@JamesHWade, #1667). * New `pkgdown_sitrep()` function reporting whether the pkgdown website URL is stored in the pkgdown configuration and in DESCRIPTION. (#1478) diff --git a/R/html-tweak.R b/R/html-tweak.R index 257a2a16b..a5b1c8302 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -149,6 +149,8 @@ tweak_tabset <- function(html) { } else { "nav-tabs" } + # Users can choose to make content fade + fade <- grepl("tabset-fade", xml2::xml_attr(html, "class")) # Get tabs and remove them from original HTML tabs <- xml2::xml_find_all(html, "div") @@ -160,7 +162,7 @@ tweak_tabset <- function(html) { # Fill the ul for nav and div for content purrr::walk(tabs, tablist_item, html = html, parent_id = id) - purrr::walk(tabs, tablist_content, html = html, parent_id = id) + purrr::walk(tabs, tablist_content, html = html, parent_id = id, fade = fade) # activate first tab unless another one is already activated # (by the attribute {.active} in the source Rmd) @@ -171,6 +173,9 @@ tweak_tabset <- function(html) { content_div <- xml2::xml_find_first(html, sprintf("//div[@id='%s']/div", id)) if (!any(grepl("active", xml2::xml_attr(xml2::xml_children(content_div), "class")))) { tweak_class_prepend(xml2::xml_child(content_div), "active") + if (fade) { + tweak_class_prepend(xml2::xml_child(content_div), "show") + } } } @@ -205,15 +210,23 @@ tablist_item <- function(tab, html, parent_id) { } # Add content of a tab to a tabset -tablist_content <- function(tab, html, parent_id) { +tablist_content <- function(tab, html, parent_id, fade) { + active <- grepl("active", xml2::xml_attr(tab, "class")) + # remove first child, that is the header xml2::xml_remove(xml2::xml_child(tab)) + xml2::xml_attr(tab, "class") <- "tab-pane" + if (fade) { + tweak_class_prepend(tab, "fade") + } + # Activate (if there was "{.active}" in the source Rmd) - if (grepl("active", xml2::xml_attr(tab, "class"))) { - xml2::xml_attr(tab, "class") <- "tab-pane active" - } else { - xml2::xml_attr(tab, "class") <- "tab-pane" + if (active) { + tweak_class_prepend(tab, "active") + if (fade) { + tweak_class_prepend(tab, "show") + } } xml2::xml_attr(tab, "role") <- "tabpanel" diff --git a/inst/assets/BS4/pkgdown.css b/inst/assets/BS4/pkgdown.css index 149ef4bf4..dca0ded1a 100644 --- a/inst/assets/BS4/pkgdown.css +++ b/inst/assets/BS4/pkgdown.css @@ -471,8 +471,14 @@ details p { flex-direction: row; } -.tabset-pills .tab-content { +.tab-content { padding: 1rem; +} + +.fade { + transition: opacity 1s linear; +} +.tabset-pills .tab-content { border-left: solid 1px #e5e5e5; border-bottom: solid 1px #e5e5e5; } diff --git a/vignettes/test/rendering.Rmd b/vignettes/test/rendering.Rmd index fcbff783c..3e05e1667 100644 --- a/vignettes/test/rendering.Rmd +++ b/vignettes/test/rendering.Rmd @@ -218,3 +218,21 @@ yay ### Tab 2 {.active} hello + +## Results in tabset, fading {.tabset .tabset-fade} + +### Something + +ok + +```{r} +plot(1) +``` + +#### cool + +yay + +### Nice {.active} + +bonjour From 88bc25a16cecfaa363be208acc9187dee1c6db67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Thu, 3 Jun 2021 14:16:55 +0200 Subject: [PATCH 19/27] update snapshot --- tests/testthat/_snaps/html-tweak.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/testthat/_snaps/html-tweak.md b/tests/testthat/_snaps/html-tweak.md index 0503f916e..d5dc24b83 100644 --- a/tests/testthat/_snaps/html-tweak.md +++ b/tests/testthat/_snaps/html-tweak.md @@ -145,7 +145,7 @@ 
     1 + 1
-
+

blop

From 799a8cab5081df845156280534c044f02c3221d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Thu, 3 Jun 2021 14:18:53 +0200 Subject: [PATCH 20/27] test for fading --- tests/testthat/_snaps/html-tweak.md | 26 ++++++++++++++++++++++++++ tests/testthat/test-html-tweak.R | 22 ++++++++++++++++++++++ 2 files changed, 48 insertions(+) diff --git a/tests/testthat/_snaps/html-tweak.md b/tests/testthat/_snaps/html-tweak.md index d5dc24b83..156d1cf69 100644 --- a/tests/testthat/_snaps/html-tweak.md +++ b/tests/testthat/_snaps/html-tweak.md @@ -152,3 +152,29 @@
+# tweak_tabsets() with tab pills, fade and second tab active + + +
+

+ Results in tabset

+ + + +
+
+ +

blablablabla

+ 
+    1 + 1
+
+
+ +

blop

+
+
+
+ diff --git a/tests/testthat/test-html-tweak.R b/tests/testthat/test-html-tweak.R index fcf98b93a..4ebc23922 100644 --- a/tests/testthat/test-html-tweak.R +++ b/tests/testthat/test-html-tweak.R @@ -398,3 +398,25 @@ test_that("tweak_tabsets() with tab pills and second tab active", { new_html <- tweak_tabsets(xml2::read_html(html)) expect_snapshot_output(cat(as.character(new_html))) }) + + +test_that("tweak_tabsets() with tab pills, fade and second tab active", { + html <- '
+

+Results in tabset

+
+

+Tab 1

+

blablablabla

+
+1 + 1
+
+
+

+Tab 2

+

blop

+
+
' + new_html <- tweak_tabsets(xml2::read_html(html)) + expect_snapshot_output(cat(as.character(new_html))) +}) From feb7139a95e5b41afbfe81c69a47392e87418fa1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Fri, 4 Jun 2021 08:14:27 +0200 Subject: [PATCH 21/27] fixed --- R/html-tweak.R | 39 ++++++++++++++++++++++++------------- inst/assets/BS4/pkgdown.css | 3 --- 2 files changed, 26 insertions(+), 16 deletions(-) diff --git a/R/html-tweak.R b/R/html-tweak.R index a5b1c8302..e88e20bd3 100644 --- a/R/html-tweak.R +++ b/R/html-tweak.R @@ -157,7 +157,13 @@ tweak_tabset <- function(html) { xml2::xml_remove(tabs) # Add empty ul for nav and div for content - xml2::xml_add_child(html, "ul", class=sprintf("nav %s nav-row", nav_class), id=id) + xml2::xml_add_child( + html, + "ul", + class = sprintf("nav %s nav-row", nav_class), + id = id, + role = "tablist" + ) xml2::xml_add_child(html, "div", class="tab-content") # Fill the ul for nav and div for content @@ -166,10 +172,11 @@ tweak_tabset <- function(html) { # activate first tab unless another one is already activated # (by the attribute {.active} in the source Rmd) - nav_url <- xml2::xml_find_first(html, sprintf("//ul[@id='%s']", id)) - if (!any(grepl("active", xml2::xml_attr(xml2::xml_children(nav_url), "class")))) { - tweak_class_prepend(xml2::xml_child(nav_url), "active") + nav_links <- xml2::xml_find_all(html, sprintf("//ul[@id='%s']/li/a", id)) + if (!any(grepl("active", xml2::xml_attr(nav_links, "class")))) { + tweak_class_prepend(nav_links[1], "active") } + content_div <- xml2::xml_find_first(html, sprintf("//div[@id='%s']/div", id)) if (!any(grepl("active", xml2::xml_attr(xml2::xml_children(content_div), "class")))) { tweak_class_prepend(xml2::xml_child(content_div), "active") @@ -185,27 +192,32 @@ tablist_item <- function(tab, html, parent_id) { text <- xml_text1(xml2::xml_child(tab)) ul_nav <- xml2::xml_find_first(html, sprintf("//ul[@id='%s']", parent_id)) + # Activate (if there was "{.active}" in the source Rmd) + active <- grepl("active", xml2::xml_attr(tab, "class")) + class <- if (active) { + "nav-link active" + } else { + "nav-link" + } + xml2::xml_add_child( ul_nav, "a", text, `data-toggle` = "tab", href = paste0("#", id), - role = "tab" + role = "tab", + `aria-controls` = id, + `aria-selected` = tolower(as.character(active)), + class = class ) - # Activate (if there was "{.active}" in the source Rmd) - class <- if (grepl("active", xml2::xml_attr(tab, "class"))) { - "active" - } else { - "" - } - # tab a's need to be wrapped in li's xml2::xml_add_parent( xml2::xml_find_first(html, sprintf("//a[@href='%s']", paste0("#", id))), "li", - class = class + role = "presentation", + class = "nav-item" ) } @@ -230,6 +242,7 @@ tablist_content <- function(tab, html, parent_id, fade) { } xml2::xml_attr(tab, "role") <- "tabpanel" + xml2::xml_attr(tab, " aria-labelledby") <- xml2::xml_attr(tab, "id") content_div <- xml2::xml_find_first( html, diff --git a/inst/assets/BS4/pkgdown.css b/inst/assets/BS4/pkgdown.css index dca0ded1a..c6d2eb39d 100644 --- a/inst/assets/BS4/pkgdown.css +++ b/inst/assets/BS4/pkgdown.css @@ -475,9 +475,6 @@ details p { padding: 1rem; } -.fade { - transition: opacity 1s linear; -} .tabset-pills .tab-content { border-left: solid 1px #e5e5e5; border-bottom: solid 1px #e5e5e5; From 43c4695433ecabd220a8f00065669f22d29db3cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Fri, 4 Jun 2021 08:18:50 +0200 Subject: [PATCH 22/27] new css rules --- inst/assets/BS4/pkgdown.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/inst/assets/BS4/pkgdown.css b/inst/assets/BS4/pkgdown.css index c6d2eb39d..0da87eb51 100644 --- a/inst/assets/BS4/pkgdown.css +++ b/inst/assets/BS4/pkgdown.css @@ -479,3 +479,21 @@ details p { border-left: solid 1px #e5e5e5; border-bottom: solid 1px #e5e5e5; } + +/* https://observablehq.com/@rkaravia/css-trick-tabs-with-consistent-height */ +/* Make tab height consistent */ + +.tab-content { + display: flex; +} + +.tab-content > .tab-pane { + display: block; /* undo "display: none;" */ + visibility: hidden; + margin-right: -100%; + width: 100%; +} + +.tab-content > .active { + visibility: visible; +} From 92d8b8a6c37c3271062fc0cf86bfe6e4cdd6a31a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABlle=20Salmon?= Date: Fri, 4 Jun 2021 08:19:34 +0200 Subject: [PATCH 23/27] fix snapshot --- tests/testthat/_snaps/html-tweak.md | 30 ++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/tests/testthat/_snaps/html-tweak.md b/tests/testthat/_snaps/html-tweak.md index 156d1cf69..8fa2016a0 100644 --- a/tests/testthat/_snaps/html-tweak.md +++ b/tests/testthat/_snaps/html-tweak.md @@ -108,18 +108,18 @@ Results in tabset -