Should fading work?

[maelle]

In a PR to pkgdown where we now use bslib for BS4 dependencies, I'm adding the HTML structure for tabsets including support for fading as documented in an R Markdown book.

I'm following the Bootstrap docs.

Here's the HTML I've created: https://60b8c9c243e3b70d06c196c1--pkgdown-dev.netlify.app/dev/articles/test/rendering.html#results-in-tabset-fading-1 where the second tab-panel has the active and show classes, the other panel has the fade class.

<div id="results-in-tabset-fading" class="section level2 tabset tabset-fade">
<h2 class="hasAnchor">
<a href="#results-in-tabset-fading" class="anchor" aria-hidden="true"></a>Results in tabset, fading</h2>


<ul class="nav nav-tabs nav-row" id="results-in-tabset-fading">
<li class=""><a data-toggle="tab" href="#something" role="tab">Something</a></li>
<li class="active"><a data-toggle="tab" href="#nice" role="tab">Nice</a></li>
</ul>
<div class="tab-content">
<div id="something" class="fade tab-pane" role="tabpanel">

<p>ok</p>
<div class="sourceCode" id="cb11"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="https://rdrr.io/r/graphics/plot.default.html" class="external-link">plot</a></span><span class="op">(</span><span class="fl">1</span><span class="op">)</span></code></pre></div>
<p><img src="rendering_files/figure-html/unnamed-chunk-12-1.png" width="700"></p>
<div id="cool-1" class="section level4">
<h4 class="hasAnchor">
<a href="#cool-1" class="anchor" aria-hidden="true"></a>cool</h4>
<p>yay</p>
</div>
</div>
<div id="nice" class="show active fade tab-pane" role="tabpanel">

<p>bonjour</p>
</div>
</div>
</div>

Now if I click on the panels it removes their "fade" class so I see no fading.
I've tried removing the bslib dependencies in favor of CSS+JS for Bootstrap via CDN and I see the fading https://codepen.io/maellesalmon/pen/rNydawa (I've made it super obvious in the pen with a very slow transition).
I guess I am yet again missing something in bslib, and would appreciate any hint. Thanks for the great package in any case!

[cderv]

It seems there is something indeed with BS4. This does not work as it should I think in rmarkdown

---
title: "RMarkdown tabset fade"
output: 
  html_document:
    self_contained: false
    theme:
      version: 4
---

## Quarterly Results {.tabset .tabset-fade}

### By Product

(tab content 1)

### By Region

(tab content 2)

Try with

    theme:
      version: 3

and without bslib , you'll see the fading.

With BS4, the two divs for the tab content loose their class .fade

<div class="tab-content">
<div id="by-product" class="section level3 tab-pane tabbed-pane active" role="tabpanel">
<p>(tab content 1)</p>
</div>
<div id="by-region" class="section level3 tab-pane tabbed-pane" role="tabpanel">
<p>(tab content 2)</p>
</div>
</div>

If I add it manually in the browser, it disappears on the next click on a tab.

Something in the bs3compat layer ?

[cpsievert]

This is a duplicate of #6 (currently, you'll have to use 'valid' BS4 markup to get fading to work). Can pkgdown emit BS4 markup or does it need to be compatible with BS3? If so, I'll try to fix this in bslib (otherwise, for rmarkdown, it might be easier to just fix this issue in rmarkdown itself)

[maelle]

I thought the pkgdown markup was BS4, I'll have to re-check then!

[cpsievert]

The markup in your comment is BS3, which is what you want to emit if you need to support Bootstrap 3 and up (we're pretty committed to supporting it in Shiny and R Markdown, which is why bs_theme(version = 4) includes an extra 'compatibility' layer to recognize both forms).

[cpsievert]

By the way, Bootstrap 5 support (#304) should land this week and this appears to no longer be an issue with BS5, so I might just let this be a known BS4 issue.

(Once Bootstrap 5 support lands bs_theme() will start defaulting to bs_theme(version = 5) -- I'd like to move away from Bootstrap 4 as fast as possible so we don't have to support so many versions)

[maelle]

@cpsievert Thank you! How do you recognize it's BS3?

Thanks for the information reg Bootstrap 5. Do you mean you won't support BS4 any more?

[maelle]

(I'll fix my markup with https://getbootstrap.com/docs/4.6/components/navs/#javascript-behavior 😇 🙈 )

[cderv]

Good to know that R Markdown tabset fading won't work if you use BS4. I did not have that in mind. Thanks for asking @maelle !

[cpsievert]

Thank you! How do you recognize it's BS3?

The active class is on the <li> and there is no .nav-item or .nav-link

Do you mean you won't support BS4 any more?

I think we'll consider version = 4 superseded by version = 5, meaning that you can continue using version = 4, but we won't be actively developing it (only making critical bug fixes)

[maelle]

Thank you for the information! 🙏

[cpsievert]

After looking into this more, I think it's going to make sense to fix this across all Bootstrap versions, see #325 for a tentative fix

[cderv]

That works now in Rmd. Thanks!

[github-actions]

This issue has been automatically locked. If you believe you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue.