diff --git a/NEWS.md b/NEWS.md index f4a13803b..ab293eb8a 100644 --- a/NEWS.md +++ b/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) diff --git a/R/accordion.R b/R/accordion.R index f7619a92f..be62b6e6f 100644 --- a/R/accordion.R +++ b/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") } diff --git a/R/bs-theme.R b/R/bs-theme.R index b21ef5947..528f41c9d 100644 --- a/R/bs-theme.R +++ b/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")) ) ) } diff --git a/R/card.R b/R/card.R index 777f006d1..d701894e5 100644 --- a/R/card.R +++ b/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() { diff --git a/R/layout.R b/R/layout.R index f6f97ee74..00ab80ffa 100644 --- a/R/layout.R +++ b/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) diff --git a/R/nav-items.R b/R/nav-items.R index b98d076ea..4bc1d359b 100644 --- a/R/nav-items.R +++ b/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) { diff --git a/R/navs-legacy.R b/R/navs-legacy.R index 069ecf729..e9418669e 100644 --- a/R/navs-legacy.R +++ b/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") ) } diff --git a/R/page.R b/R/page.R index e86e82417..d2aa15d17 100644 --- a/R/page.R +++ b/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()] diff --git a/R/sidebar.R b/R/sidebar.R index 6fa4694ef..96198bc6e 100644 --- a/R/sidebar.R +++ b/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 `