support for tabs in BS4 #1694

maelle · 2021-05-18T12:33:15Z

maelle · 2021-05-18T13:21:59Z

I wonder whether there'd be a way to make each tabset height fixed at the height of the highest tab.

maelle · 2021-05-18T13:24:00Z

R/html-tweak.R

+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))


I didn't think this would be needed as HTML here is supposed to be the tabset, but if I didn't use the ID, all tabs ended up in the first tabset when there were two tabsets.

maelle · 2021-05-19T11:27:26Z

inst/assets/BS4/pkgdown.css

@@ -465,3 +465,8 @@ summary {
 details p {
  margin-top: -.5rem;
 }
+
+/* tabsets */


Another tweak that might make sense would be more padding/margin at the top of tab content.

Is there normally some styling around the content of the tabs? For the pills example in particular, it's hard to tell how the tab names are related to the content.

I added left and bottom borders for the pills example. Its color won't be hard-coded forever, since the blslib variables PR will prevent this kind of hard-coding.

R/html-tweak.R

Co-authored-by: Hadley Wickham <[email protected]>

maelle · 2021-05-24T08:27:33Z

R/html-tweak.R

@@ -129,6 +129,113 @@ tweak_footnotes <- function(html) {
  xml2::xml_remove(container)
 }

+# Tabsets tweaking: find Markdown recommended in https://bookdown.org/yihui/rmarkdown-cookbook/html-tabs.html


For the record, in rmarkdown the transformation happens via JS https://github.com/rstudio/rmarkdown/blob/145046175c721af185aa6ba3ecc9262f12dc7369/inst/rmd/h/navigation-1.1/tabsets.js#L50

@cderv is this transformation something that you might consider hosting in an Rmd-adjacent package at some point in the future? Or do you think the xml2 based transformation is too foreign for the Rmd ecosystem?

We are currently discussing a bit tabset feature because of rstudio/rmarkdown#2054. We got input from @cpsievert that bslib will offer functions for creating navs / tabs UI (https://rstudio.github.io/bslib/reference/index.html#section-create-navs-and-navbars) and that we may be able to leverage that in some way in the future for rmarkdown.

Until now our direction for reworking tabset feature would be to use Lua filters rather than R directly. Also because Quarto has already a Lua filter for this (but using a fenced div syntax). But nothing is planned and started on this.

I think Lua filter would not help at all pkgdown usage currently, am I right ?

If we don't go the Lua filter road, then yes regarding xml2, I think it could be included in the Rmd ecosystem. it has no dependency and I feel we should use it more for some html post processing. But it is not already in the package tree for rmarkdown.

If users use bslib for creating navs, then the resulting divs should be protected i.e. not treated by pkgdown. The code in this PR recognizes future tabsets via the XPath query .//div[contains(@class, 'tabset')] which if I follow correctly would not pick up navs created by bslib. 🤔

maelle · 2021-05-24T08:30:35Z

Direct link to tabs https://60ab6699228b8aeed7f4697d--pkgdown-dev.netlify.app/dev/articles/test/rendering.html#results-in-tabset-1

maelle · 2021-06-01T08:47:36Z

I think tweaking HTML with xml2 is easier than using https://rstudio.github.io/bslib/reference/index.html#section-create-navs-and-navbars, given what we start from. (but still wanted to make a note of the existence of those functions)

hadley · 2021-06-02T17:58:35Z

R/html-tweak.R

@@ -129,6 +129,113 @@ tweak_footnotes <- function(html) {
  xml2::xml_remove(container)
 }

+# Tabsets tweaking: find Markdown recommended in https://bookdown.org/yihui/rmarkdown-cookbook/html-tabs.html


@cderv is this transformation something that you might consider hosting in an Rmd-adjacent package at some point in the future? Or do you think the xml2 based transformation is too foreign for the Rmd ecosystem?

R/html-tweak.R

hadley · 2021-06-02T18:34:49Z

inst/assets/BS4/pkgdown.css

@@ -465,3 +465,8 @@ summary {
 details p {
  margin-top: -.5rem;
 }
+
+/* tabsets */


Is there normally some styling around the content of the tabs? For the pills example in particular, it's hard to tell how the tab names are related to the content.

Co-authored-by: Hadley Wickham <[email protected]>

maelle · 2021-06-03T11:18:02Z

Note from the PR linked by @cderv: in R Markdown you can have nav dropdowns but it's not documented, therefore I won't support it in this PR. 😇

cderv · 2021-06-03T11:26:46Z

in R Markdown you can have nav dropdowns but it's not documented

Correct. This is a special feature to turn tabs in a dropdown menu instead. And there is suggestion to make it more like Bootstrap dropdowns with tabs / navs: rstudio/rmarkdown#2054

maelle · 2021-06-03T12:17:15Z

Regarding the fading effect: if I remove the dependencies created by bslib and add Bootstrap via a CDN instead, I can see the fading effect. It's as if something were missing from the bslib JS? When I click on the tabs, the "fade" class disappears (and the "show" class isn't added).

NEWS.md

inst/assets/BS4/pkgdown.css

maelle · 2021-06-04T06:52:48Z

As a side-note, because the Netlify preview isn't a direct Netlify-GitHub integration, we don't get to use the fancy new Netlify preview tools. 😭 (How nice would screenshots be!)

hadley · 2021-06-15T19:30:11Z

tests/testthat/test-html-tweak.R

+<h3 class="hasAnchor">
+<a href="#tab-1" class="anchor" aria-hidden="true"></a>Tab 1</h3>
+<p>blablablabla</p>
+<div class="sourceCode" id="cb9"><pre class="downlit sourceCode r">


Is it important to have source code in here? Otherwise it would be better to keep the test as short and simple as possible.

I can't find of another solution right now #1725 (comment)

vignettes/test/rendering.Rmd

R/html-tweak.R

hadley · 2021-06-15T19:33:02Z

R/html-tweak.R

+#  no matter the heading level -- the headings one level down are the tabs
+# and transform to tabsets HTML a la Bootstrap
+
+tweak_tabsets <- function(html) {


I wonder if it's time to start breaking this file up into smaller pieces?

Oh no, it was my favorite R script in pkgdown 😢 More seriously: #1725

maelle added 5 commits May 18, 2021 14:01

work on tabs

77f3e59

tabs

9800678

better

62cbdc9

progress

e922160

choose active one

8f959c0

maelle mentioned this pull request May 18, 2021

How to put content in tabs? #1667

Closed

maelle commented May 18, 2021

View reviewed changes

maelle added 2 commits May 18, 2021 15:25

news item

96e10d0

add tests

68a1802

maelle marked this pull request as ready for review May 19, 2021 11:25

maelle requested a review from hadley May 19, 2021 11:25

clean

09aeba1

maelle commented May 19, 2021

View reviewed changes

tweak test

05389d6

hadley reviewed May 21, 2021

View reviewed changes

R/html-tweak.R Outdated Show resolved Hide resolved

R/html-tweak.R Outdated Show resolved Hide resolved

R/html-tweak.R Outdated Show resolved Hide resolved

R/html-tweak.R Show resolved Hide resolved

Update R/html-tweak.R

5e003f3

Co-authored-by: Hadley Wickham <[email protected]>

maelle mentioned this pull request May 24, 2021

Add an example for ".active" attribute in tabsets recipe? rstudio/rmarkdown-cookbook#338

Closed

feedback from review

00b18c2

maelle commented May 24, 2021

View reviewed changes

maelle requested a review from hadley May 24, 2021 08:30

fix code finding the tabs 🤦

9233d03

hadley reviewed Jun 2, 2021

View reviewed changes

maelle and others added 5 commits June 3, 2021 12:51

drop

0d61641

Update R/html-tweak.R

bd7c455

Co-authored-by: Hadley Wickham <[email protected]>

more compression of comments

7ae5091

if in assignment

bba3e4b

add border for tabset pills

bc8314c

Merge branch 'master' into taaabs

1a551cd

maelle added 2 commits June 3, 2021 13:58

try adding fading

dc5f2a4

update snapshot

88bc25a

test for fading

799a8ca

maelle commented Jun 3, 2021

View reviewed changes

NEWS.md Show resolved Hide resolved

maelle requested a review from hadley June 3, 2021 12:26

maelle mentioned this pull request Jun 3, 2021

Should fading work? rstudio/bslib#324

Closed

maelle marked this pull request as draft June 3, 2021 16:53

fixed

feb7139

maelle marked this pull request as ready for review June 4, 2021 06:15

maelle added 3 commits June 4, 2021 08:15

Merge branch 'master' into taaabs

b5e41d5

new css rules

43c4695

fix snapshot

92d8b8a

maelle commented Jun 4, 2021

View reviewed changes

inst/assets/BS4/pkgdown.css Show resolved Hide resolved

maelle added 3 commits June 4, 2021 08:25

link both books

a1faef9

add helper function for finding class

bdef2e0

empty line

a344565

hadley approved these changes Jun 15, 2021

View reviewed changes

border

e786c25

maelle changed the title ~~work on tabs~~ support for tabs in BS4 Jun 18, 2021

maelle merged commit 51268b0 into master Jun 18, 2021

maelle deleted the taaabs branch June 18, 2021 12:31

maelle mentioned this pull request Aug 23, 2021

Include {.tabset} functionality in rendered articles #981

Closed

jonkeane mentioned this pull request Nov 9, 2021

A small tabset oddity #1889

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

support for tabs in BS4 #1694

support for tabs in BS4 #1694

maelle commented May 18, 2021

maelle commented May 18, 2021

maelle May 18, 2021

maelle May 19, 2021

hadley Jun 2, 2021

maelle Jun 3, 2021

maelle May 24, 2021

hadley Jun 2, 2021

cderv Jun 2, 2021 •

edited

Loading

maelle Jun 3, 2021

maelle commented May 24, 2021 •

edited

Loading

maelle commented Jun 1, 2021

hadley Jun 2, 2021

hadley Jun 2, 2021

maelle commented Jun 3, 2021

cderv commented Jun 3, 2021

maelle commented Jun 3, 2021

maelle commented Jun 4, 2021

hadley Jun 15, 2021

maelle Jun 18, 2021

hadley Jun 15, 2021

maelle Jun 18, 2021

support for tabs in BS4 #1694

support for tabs in BS4 #1694

Conversation

maelle commented May 18, 2021

maelle commented May 18, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cderv Jun 2, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maelle commented May 24, 2021 • edited Loading

maelle commented Jun 1, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maelle commented Jun 3, 2021

cderv commented Jun 3, 2021

maelle commented Jun 3, 2021

maelle commented Jun 4, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cderv Jun 2, 2021 •

edited

Loading

maelle commented May 24, 2021 •

edited

Loading