support for tabs in BS4 by maelle · Pull Request #1694 · r-lib/pkgdown · GitHub

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

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.

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.

Co-authored-by: Hadley Wickham <h.wickham@gmail.com>

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. 🤔

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

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)

@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?

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 <h.wickham@gmail.com>

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. 😇

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

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

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

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)

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

Comment thread R/html-tweak.R Outdated

Comment thread R/html-tweak.R Outdated

Comment thread R/html-tweak.R Outdated

Comment thread R/html-tweak.R

Update R/html-tweak.R

5e003f3

Co-authored-by: Hadley Wickham <h.wickham@gmail.com>

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 <h.wickham@gmail.com>

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

Comment thread NEWS.md

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

Comment thread inst/assets/BS4/pkgdown.css

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

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

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

                 margin-top: -.5rem;
               }
+              /* tabsets */

                 xml2::xml_remove(container)
               }
+              # Tabsets tweaking: find Markdown recommended in https://bookdown.org/yihui/rmarkdown-cookbook/html-tabs.html

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

support for tabs in BS4 by maelle · Pull Request #1694 · r-lib/pkgdown · GitHub

Uh oh!

support for tabs in BS4 - #1694

support for tabs in BS4#1694maelle merged 29 commits intomasterr-lib/pkgdown:masterfrom taaabsr-lib/pkgdown:taaabsCopy head branch name to clipboard

Conversation

maelle commented May 18, 2021

Uh oh!

maelle commented May 18, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cderv Jun 2, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maelle commented May 24, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

maelle commented Jun 1, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maelle commented Jun 3, 2021

Uh oh!

cderv commented Jun 3, 2021

Uh oh!

maelle commented Jun 3, 2021

Uh oh!

Uh oh!

Uh oh!

maelle commented Jun 4, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

support for tabs in BS4#1694
maelle merged 29 commits into
masterfrom
taaabs

cderv Jun 2, 2021 •
edited
Loading

maelle commented May 24, 2021 •
edited
Loading