rstudio · cpsievert · Sep 28, 2023 · Sep 28, 2023 · Sep 28, 2023 · Sep 28, 2023
diff --git a/NEWS.md b/NEWS.md
@@ -5,6 +5,7 @@
 * `bs_theme()` now defaults to `preset="shiny"`. This provides an additional set of theming defaults and rules that make it easier to create Shiny apps (in particular, dashboards) that look good out of the box. To revert to the previous behavior, set `bs_theme(preset="bootstrap")`. (#711)
 * `value_box()` no longer defaults to `theme_color = "primary"`. To restore the previous behavior, please use `theme = "primary"`. In addition to the default style change, the `theme_color` is now deprecated in favor of `theme`. (#758)
 * `page_navbar()` now defaults to `underline = TRUE`, meaning that navigation links in the navbar now have underline styling by default (set `underline = FALSE` to revert to previous behavior). (#784)
+* `page()` now returns a `<body>` tag instead of `tagList()`. This change allows `page()` to treat named arguments as HTML attributes. (#809)
 
 ## New features
 

diff --git a/R/page.R b/R/page.R
@@ -4,17 +4,26 @@
 
 #' Create a Bootstrap page
 #'
-#' These functions are small wrappers around shiny's page constructors (i.e., [shiny::fluidPage()], [shiny::navbarPage()], etc) that differ in two ways:
+#' These functions are small wrappers around shiny's page constructors (i.e.,
+#' [shiny::fluidPage()], [shiny::navbarPage()], etc) that differ in two ways:
 #'  * The `theme` parameter defaults bslib's recommended version of Bootstrap (for new projects).
 #'  * The return value is rendered as an static HTML page when printed interactively at the console.
 #'
 #' @inheritParams shiny::bootstrapPage
+#' @params ... UI elements for the page. Named arguments become HTML attributes.
 #' @param theme A [bslib::bs_theme()] object.
 #' @seealso [page_sidebar()]
 #' @export
 page <- function(..., title = NULL, theme = bs_theme(), lang = NULL) {
+  # Wrap ... in <body> since bootstrapPage() passes ... to tagList(),
+  # which means named arguments aren't handled sensibly
   as_page(
-    shiny::bootstrapPage(..., title = title, theme = theme, lang = lang)
+    shiny::bootstrapPage(
+      tags$body(...),
+      title = title,
+      theme = theme,
+      lang = lang
+    )
   )
 }
 
@@ -55,19 +64,15 @@ page_fillable <- function(..., padding = NULL, gap = NULL, fillable_mobile = FAL
     title = title,
     theme = theme,
     lang = lang,
-    bindFillRole(
-      tags$body(
-        class = "bslib-page-fill bslib-gap-spacing",
-        style = css(
-          padding = validateCssPadding(padding),
-          gap = validateCssUnit(gap),
-          "--bslib-page-fill-mobile-height" = if (fillable_mobile) "100%" else "auto"
-        ),
-        ...,
-        component_dependency_css("page_fillable")
-      ),
-      container = TRUE
-    )
+    class = "bslib-page-fill bslib-gap-spacing",
+    style = css(
+      padding = validateCssPadding(padding),
+      gap = validateCssUnit(gap),
+      "--bslib-page-fill-mobile-height" = if (fillable_mobile) "100%" else "auto"
+    ),
+    ...,
+    as_fillable_container(),
+    component_dependency_css("page_fillable")
   )
 }
 

diff --git a/R/sysdata.rda b/R/sysdata.rda
diff --git a/inst/builtin/bs5/shiny/_rules.scss b/inst/builtin/bs5/shiny/_rules.scss
@@ -70,22 +70,9 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
   }
 }
 
-// In a page_sidebar()/page_navbar() context,
-// apply a subtle background color and a box shadow to cards
-@mixin bslib-sidebar-layout {
-  > .sidebar {
-    background-color: var(--bs-body-bg);
-  }
-  > .main {
-    background-color: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.05);
-
-    @include bslib-box-shadows;
-  }
-}
-
+// Apply box shadow effect to cards
 @mixin bslib-box-shadows {
   .bslib-card {
-    --bslib-sidebar-bg: var(--bs-body-bg);
     box-shadow: $box-shadow;
     border: 0;
     .card-header, .card-footer {
@@ -100,32 +87,38 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
   }
 }
 
-
 // TODO: move this logic into a "core" bundle that comes with any theme
 // (but you only get the shadows by default in the preset theme)
 @if $bslib-enable-shadows {
 
+  :root {
+    --bslib-shiny-preset-main-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.05);
+  }
+
   .bslib-page-sidebar {
     --bslib-page-sidebar-title-color: var(--bs-body-color);
     --bslib-page-sidebar-title-bg: var(--bs-body-bg);
 
-    > .bslib-sidebar-layout {
-      @include bslib-sidebar-layout;
+    > .bslib-sidebar-layout:first-of-type > .main {
+      background-color: var(--bslib-shiny-preset-main-bg);
+      @include bslib-box-shadows;
     }
   }
 
   .bslib-page-navbar {
-    background-color: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.05);
+    background-color: var(--bslib-shiny-preset-main-bg);
 
-    // page_navbar(sidebar = ...)
-    > * > .bslib-sidebar-layout {
-      @include bslib-sidebar-layout;
+    // 1st selector is for page_navbar(sidebar = ...)
+    // 2nd selector is for page_navbar(nav_panel("A", layout_sidebar()))
+    > *, .tab-pane {
+      > .bslib-sidebar-layout:first-of-type > .main {
+        @include bslib-box-shadows;
+      }
     }
+  }
 
-    // page_navbar(nav_panel("A", layout_sidebar()))
-    .tab-pane > .bslib-sidebar-layout  {
-      @include bslib-sidebar-layout;
-    }
+  .bslib-sidebar-layout.bslib-sidebar-layout {
+    --bslib-sidebar-bg: var(--bs-body-bg);
   }
 }
 

diff --git a/inst/components/dist/sidebar/sidebar.css b/inst/components/dist/sidebar/sidebar.css
diff --git a/inst/components/scss/sidebar.scss b/inst/components/scss/sidebar.scss
@@ -4,7 +4,8 @@ $bslib-sidebar-toggle-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.1) !defaul
 $bslib-sidebar-border: var(--bs-card-border-width, #{$card-border-width}) solid var(--bs-card-border-color, #{$card-border-color}) !default;
 $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)), var(--bslib-sidebar-width, 250px));
 
-:root {
+
+.bslib-sidebar-layout {
   --bslib-sidebar-transition-duration: 500ms;
   --bslib-sidebar-transition-easing-x: cubic-bezier(0.8, 0.78, 0.22, 1.07);
   --bslib-sidebar-border: #{$bslib-sidebar-border};
@@ -26,9 +27,6 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)),
   --bslib-sidebar-toggle-transition-easing: cubic-bezier(1, 0, 0, 1);
   --bslib-collapse-toggle-right-transform: 180deg;
   --bslib-sidebar-column-main: minmax(0, 1fr);
-}
-
-.bslib-sidebar-layout {
 
   display: grid !important;
   grid-template-columns: $bslib-sidebar-column-sidebar var(--bslib-sidebar-column-main);

diff --git a/inst/css-precompiled/5/bootstrap.min.css b/inst/css-precompiled/5/bootstrap.min.css
diff --git a/man/page.Rd b/man/page.Rd