Document (GitHub Actions)

This reverts commit b5b0ba1774.

R/bootstrap.R

@@ -707,6 +707,7 @@ tabPanelBody <- function(value, ..., icon = NULL) {
 #'   conjunction with [tabPanelBody()] and [updateTabsetPanel()] to control the
 #'   active tab via other input controls. (See example below)}
 #' }
+#' @param card whether to wrap the navigation controls and content into an 'output card'. This functionality currently requires a [bslib::bs_theme()] in the page layout with `version = 4` or higher.
 #' @param position This argument is deprecated; it has been discontinued in
 #'   Bootstrap 3.
 #' @inheritParams navbarPage
@@ -761,6 +762,7 @@ tabsetPanel <- function(...,
                         type = c("tabs", "pills", "hidden"),
                         header = NULL,
                         footer = NULL,
+                        card = FALSE,
                         position = deprecated()) {
   if (lifecycle::is_present(position)) {
     shinyDeprecated(
@@ -775,15 +777,34 @@ tabsetPanel <- function(...,
   type <- match.arg(type)
   tabset <- buildTabset(..., ulClass = paste0("nav nav-", type), id = id, selected = selected)
 
-  tags$div(
+  nav <- tabset$navList
-    class = "tabbable",
+  if (card) {
-    !!!dropNulls(list(
+    nav <- tags$div(
-      tabset$navList,
+      class = "card-header",
-      header,
+      tagFunction(function() {
-      tabset$content,
+        if (getCurrentVersion() >= 4) {
-      footer
+          return(NULL)
-    ))
+        }
-  )
+        stop(
+          "`tabsetPanel(card = TRUE)` requires Bootstrap 4 or higher. ",
+          "Please supply `bslib::bs_theme()` to the UI's page layout function ",
+          "(e.g., `fluidPage(theme = bslib::bs_theme())`).",
+          call. = FALSE
+        )
+      }),
+      tagAppendAttributes(
+        nav, class = paste0("card-header-", type)
+      )
+    )
+  }
+
+  tabs <- tags$div(class = "tabbable", class = if (card) "card", nav)
+  content <- dropNulls(list(header, tabset$content, footer))
+  if (card) {
+    tagAppendChild(tabs, tags$div(class = "card-body", !!!content))
+  } else {
+    tagAppendChildren(tabs, content)
+  }
 }
 
 #' Create a navigation list panel

man/tabsetPanel.Rd

@@ -11,6 +11,7 @@ tabsetPanel(
   type = c("tabs", "pills", "hidden"),
   header = NULL,
   footer = NULL,
+  card = FALSE,
   position = deprecated()
 )
 }
@@ -40,6 +41,8 @@ tabPanels.}
 \item{footer}{Tag or list of tags to display as a common footer below all
 tabPanels}
 
+\item{card}{whether to wrap the navigation controls and content into an 'output card'. This functionality currently requires a \code{\link[bslib:bs_theme]{bslib::bs_theme()}} in the page layout with \code{version = 4} or higher.}
+
 \item{position}{This argument is deprecated; it has been discontinued in
 Bootstrap 3.}
 }

tests/testthat/_snaps/tabPanel.md

@@ -138,6 +138,43 @@
         <div class="content-footer"></div>
       </div>
 
+---
+
+    Code
+      bslib_tags(x)
+    Output
+      <div class="tabbable card">
+        <div class="card-header">
+          <ul class="nav nav-tabs card-header-tabs" data-tabsetid="4785">
+            <li class="nav-item">
+              <a class="nav-link active" data-toggle="tab" data-value="A" href="#tab-4785-1">A</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#tab-4785-2" data-toggle="tab" data-value="B">
+                <i class=" fab fa-github fa-fw" role="presentation" aria-label=" icon"></i>
+                B
+              </a>
+            </li>
+            <li class="dropdown nav-item">
+              <a class="dropdown-toggle nav-link" data-toggle="dropdown" data-value="Menu" href="#">
+                Menu
+                <b class="caret"></b>
+              </a>
+              <ul class="dropdown-menu" data-tabsetid="1502">
+                <a class="dropdown-item" href="#tab-1502-1" data-toggle="tab" data-value="C">C</a>
+              </ul>
+            </li>
+          </ul>
+        </div>
+        <div class="card-body">
+          <div class="tab-content" data-tabsetid="4785">
+            <div class="tab-pane active" data-value="A" id="tab-4785-1">a</div>
+            <div class="tab-pane" data-value="B" data-icon-class="fab fa-github" id="tab-4785-2">b</div>
+            <div class="tab-pane" data-value="C" id="tab-1502-1">c</div>
+          </div>
+        </div>
+      </div>
+
 # navbarPage() markup is correct
 
     Code

tests/testthat/test-tabPanel.R

@@ -54,6 +54,8 @@ test_that("tabsetPanel() markup is correct", {
   # BS4
   expect_snapshot_bslib(default)
   expect_snapshot_bslib(pills)
+  card <- tabset_panel(!!!panels, card = TRUE)
+  expect_snapshot_bslib(card)
 })
 
 test_that("navbarPage() markup is correct", {