Attach component-specific Sass/Css at the component level; allow for …

…more customization via CSS variables (#664)

Co-authored-by: cpsievert <cpsievert@users.noreply.github.com>

NEWS.md

@@ -1,5 +1,9 @@
 # bslib 0.5.0.9000
 
+## Improvements
+
+* Closed quarto-dev/quarto-cli#6081: `{bslib}`'s components (e.g., `card()`, `sidebar()`, etc.) now work more sensibly in Quarto docs. (#664)
+
 ## Bug fixes
 
 * Closed #636: Outputs in sidebars now work as expected when an initially-closed sidebar is opened. (#624)

R/accordion.R

@@ -277,6 +277,13 @@ check_character <- function(x, max_length = Inf, min_length = 1, call = rlang::c
   x
 }
 
-accordion_dependency <- function(minified = NULL) {
-  component_js_dependency("accordion", minified = minified)
+accordion_dependency <- function() {
+  list(
+    component_dependency_js("accordion"),
+    bs_dependency_defer(accordion_dependency_sass)
+  )
+}
+
+accordion_dependency_sass <- function(theme) {
+  component_dependency_sass(theme, "accordion")
 }

R/bs-theme.R

@@ -297,21 +297,6 @@ bootstrap_bundle <- function(version) {
       # Additions to BS5 that are always included (i.e., not a part of compatibility)
       sass_layer(rules = pandoc_tables),
       bs3compat = bs3compat_bundle(),
-      sass_layer(
-        mixins = list(
-          sass_file(path_components("scss", "_variables.scss")),
-          sass_file(path_components("scss", "_mixins.scss"))
-        )
-      ),
-      !!!rule_bundles(c(
-        path_components("scss", "accordion.scss"),
-        path_components("scss", "card.scss"),
-        path_components("scss", "fill.scss"),
-        path_components("scss", "layout_column_wrap.scss"),
-        path_components("scss", "layout_columns.scss"),
-        path_components("scss", "sidebar.scss"),
-        path_components("scss", "value_box.scss")
-      )),
       # Enable CSS Grid powered Bootstrap grid
       sass_layer(
         defaults = list("enable-cssgrid" = "true !default")
@@ -373,11 +358,8 @@ bootstrap_bundle <- function(version) {
     # 2. Allow Bootstrap 3 & 4 to use color-contrast() in variable definitions
     # 3. Allow Bootstrap 3 & 4 to use bs_get_contrast()
     sass_layer(
-      functions = sass_file(system_file("sass-utils/color-contrast.scss", package = "bslib"))
-    ),
-    # nav_spacer() CSS (can be removed)
-    nav_spacer = sass_layer(
-      rules = sass_file(path_components("scss", "nav-spacer.scss"))
+      functions = sass_file(path_inst("sass-utils/color-contrast.scss")),
+      rules = sass_file(path_inst("bslib-scss", "bslib.scss"))
     )
   )
 }

R/card.R

@@ -280,8 +280,15 @@ full_screen_toggle <- function() {
   )
 }
 
-card_dependency <- function(minified = NULL) {
-  component_js_dependency("card", minified = minified)
+card_dependency <- function() {
+  list(
+    component_dependency_js("card"),
+    bs_dependency_defer(card_dependency_sass)
+  )
+}
+
+card_dependency_sass <- function(theme) {
+  component_dependency_sass(theme, "card")
 }
 
 card_init_js <- function() {

R/layout.R

@@ -95,7 +95,8 @@ layout_column_wrap <- function(
       gap = validateCssUnit(gap)
     ),
     !!!attribs,
-    children
+    children,
+    component_dependency_css("grid")
   )
 
   tag <- bindFillRole(tag, item = fill)
@@ -220,7 +221,8 @@ layout_columns <- function(
     ),
     !!!row_heights_css_vars(row_heights),
     !!!attribs,
-    !!!children
+    !!!children,
+    component_dependency_css("grid")
   )
 
   tag <- bindFillRole(tag, item = fill)

R/nav-items.R

@@ -65,7 +65,7 @@ is_nav_item <- function(x) {
 #' @describeIn nav-items Adding spacing between nav items.
 #' @export
 nav_spacer <- function() {
-  div(class = "bslib-nav-spacer")
+  div(class = "bslib-nav-spacer", component_dependency_css("nav_spacer"))
 }
 
 is_nav_spacer <- function(x) {

R/navs-legacy.R

@@ -281,7 +281,8 @@ navbarPage_ <- function(title,
   # *Don't* wrap in bootstrapPage() (shiny::navbarPage()) does that part
   tagList(
     tags$nav(class = navbarClass, role = "navigation", containerDiv),
-    contentDiv
+    contentDiv,
+    component_dependency_css("page_navbar")
   )
 }
 

R/page.R

@@ -55,7 +55,6 @@ page_fillable <- function(..., padding = NULL, gap = NULL, fillable_mobile = FAL
     title = title,
     theme = theme,
     lang = lang,
-    tags$head(tags$style(HTML("html { height: 100%; }"))),
     bindFillRole(
       tags$body(
         class = "bslib-page-fill bslib-gap-spacing",
@@ -64,7 +63,8 @@ page_fillable <- function(..., padding = NULL, gap = NULL, fillable_mobile = FAL
           gap = validateCssUnit(gap),
           "--bslib-page-fill-mobile-height" = if (fillable_mobile) "100%" else "auto"
         ),
-        ...
+        ...,
+        component_dependency_css("page_fillable")
       ),
       container = TRUE
     )
@@ -141,10 +141,16 @@ page_sidebar <- function(..., sidebar = NULL, title = NULL, fillable = TRUE, fil
       border = FALSE,
       border_radius = FALSE,
       ...
-    )
+    ),
+    bs_dependency_defer(page_sidebar_dependency_sass)
   )
 }
 
+page_sidebar_dependency_sass <- function(theme) {
+  component_dependency_sass(theme, "page_sidebar")
+}
+
+
 #' @rdname page
 #' @inheritParams navset_bar
 #' @seealso [shiny::navbarPage()]

R/sidebar.R

@@ -278,10 +278,6 @@ collapse_icon <- function() {
   bsicons::bs_icon("chevron-down", class = "collapse-icon", size = NULL)
 }
 
-sidebar_dependency <- function(minified = NULL) {
-  component_js_dependency("sidebar", minified = minified)
-}
-
 sidebar_init_js <- function() {
   # Note: if we want to avoid inline `<script>` tags in the future for
   # initialization code, we might be able to do so by turning the sidebar layout
@@ -291,3 +287,16 @@ sidebar_init_js <- function() {
     HTML("bslib.Sidebar.initCollapsibleAll()")
   )
 }
+
+
+sidebar_dependency <- function() {
+  list(
+    component_dependency_js("sidebar"),
+    bs_dependency_defer(sidebar_dependency_sass)
+  )
+}
+
+sidebar_dependency_sass <- function(theme) {
+  component_dependency_sass(theme, "sidebar")
+}
+

R/utils-deps.R

@@ -1,14 +1,48 @@
-component_js_dependency <- function(name, minified = NULL) {
-  minified <-
-    minified %||%
-    get_shiny_devmode_option("shiny.minified", default = TRUE)
+component_dependency_js <- function(name) {
+  minified <- get_shiny_devmode_option("shiny.minified", default = TRUE)
 
   htmlDependency(
-    name = paste0("bslib-", name),
+    name = paste0("bslib-", name, "-js"),
     version = get_package_version("bslib"),
     package = "bslib",
     src = file.path("components", "dist", name),
-    all_files = TRUE,
-    script = paste0(name, if (minified) ".min", ".js")
+    script = paste0(name, if (minified) ".min", ".js"),
+    all_files = TRUE
+  )
+}
+
+# Pre-compiled component styles
+component_dependency_css <- function(name) {
+  htmlDependency(
+    name = paste0("bslib-", name, "-styles"),
+    version = get_package_version("bslib"),
+    package = "bslib",
+    src = file.path("components", "dist", name),
+    stylesheet = paste0(name, ".css")
+  )
+}
+
+# Run-time (Sass) component styles
+component_dependency_sass <- function(theme, name) {
+  if (!is_bs_theme(theme) || identical(theme, bs_theme())) {
+    component_dependency_css(name)
+  } else {
+    component_dependency_sass_(theme, name)
+  }
+}
+
+component_dependency_sass_ <- function(theme, name) {
+  scss_files <- list(
+    path_components("scss", "mixins", "_mixins.scss"),
+    path_components("scss", paste0(name, ".scss"))
+  )
+
+  bs_dependency(
+    input = lapply(scss_files, sass_file),
+    theme = theme,
+    name = paste0("bslib-", name, "-styles"),
+    version = get_package_version("bslib"),
+    cache_key_extra = get_package_version("bslib"),
+    .sass_args = list(options = sass_options(output_style = "compressed"))
   )
 }

R/value-box.R

@@ -70,7 +70,8 @@ value_box <- function(title, value, ..., showcase = NULL, showcase_layout = show
     max_height = max_height,
     fill = fill,
     !!!attribs,
-    contents
+    contents,
+    component_dependency_css("value_box")
   )
 
   as_fragment(tag_require(res, version = 5, caller = "value_box()"))

inst/bslib-scss/bslib.scss

@@ -0,0 +1,2 @@
+@import "spacer";
+@import "tab-fill";

inst/bslib-scss/spacer.scss

@@ -0,0 +1,26 @@
+$spacer: 1rem !default;
+
+:root {
+  // Controls default spacing in layout containers (e.g, layout_columns())
+  --bslib-spacer: #{$spacer};
+  --bslib-mb-spacer: var(--bslib-spacer, 1rem);
+}
+
+// Some things like card(), p(), inputs, etc. want some margin-bottom by default
+// so you can plop them anywhere and you get spacing between rows. However, now
+// that we have layout utilities like page_fillable(), layout_columns(),
+// layout_sidebar(), etc. where we can control the gap between rows/columns, we
+// need a way to reset those margin-bottom to 0 in those special contexts
+//
+// We do this by adding this class to components (e.g., card())...
+.bslib-mb-spacer {
+  margin-bottom: var(--bslib-mb-spacer);
+}
+
+// ...And this class for layout containers (e.g, layout_columns())
+.bslib-gap-spacing {
+  gap: var(--bslib-mb-spacer);
+  > .bslib-mb-spacer, > .form-group, > p, > pre {
+    margin-bottom: 0;
+  }
+}

inst/bslib-scss/tab-fill.scss

@@ -0,0 +1,18 @@
+.tab-content {
+  // Workaround for pkgdown's CSS to make tab-pane all a consistent height
+  // https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L342-L355
+  >.tab-pane.html-fill-container {
+    display: none;
+  }
+
+  // Take precedence over Bootstrap's `display:block` rule
+  >.active.html-fill-container {
+    display: flex;
+  }
+
+  // Another workaround for pkgdown adding extra padding we didn't ask for
+  // https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L335-L337
+  &.html-fill-container {
+    padding: 0;
+  }
+}

inst/components/dist/page_sidebar/page_sidebar.css

@@ -0,0 +1 @@
+.bslib-page-title{background-color:#212529;color:#fff;font-size:1.5rem;font-weight:300;padding:var(--bslib-spacer, 1rem);padding-left:1.5rem;margin-bottom:0}