From 8b0dc57de4e5c3524b4dcceb4e9545e443d672de Mon Sep 17 00:00:00 2001 From: Carson Sievert Date: Tue, 11 Jul 2023 14:30:41 -0500 Subject: [PATCH] Attach component-specific Sass/Css at the component level; allow for more customization via CSS variables (#664) Co-authored-by: cpsievert --- NEWS.md | 4 + R/accordion.R | 11 ++- R/bs-theme.R | 22 +---- R/card.R | 11 ++- R/layout.R | 6 +- R/nav-items.R | 2 +- R/navs-legacy.R | 3 +- R/page.R | 12 ++- R/sidebar.R | 17 +++- R/utils-deps.R | 48 ++++++++-- R/value-box.R | 3 +- inst/bslib-scss/bslib.scss | 2 + inst/bslib-scss/spacer.scss | 26 ++++++ inst/bslib-scss/tab-fill.scss | 18 ++++ inst/components/dist/accordion/accordion.css | 1 + inst/components/dist/card/card.css | 1 + inst/components/dist/grid/grid.css | 1 + .../components/dist/nav_spacer/nav_spacer.css | 1 + .../dist/page_fillable/page_fillable.css | 1 + .../dist/page_navbar/page_navbar.css | 1 + .../dist/page_sidebar/page_sidebar.css | 1 + inst/components/dist/sidebar/sidebar.css | 1 + inst/components/dist/sidebar/sidebar.js | 5 ++ inst/components/dist/sidebar/sidebar.js.map | 4 +- inst/components/dist/sidebar/sidebar.min.js | 2 +- .../dist/sidebar/sidebar.min.js.map | 6 +- inst/components/dist/value_box/value_box.css | 1 + inst/components/scss/_mixins.scss | 17 ---- inst/components/scss/_variables.scss | 16 ---- inst/components/scss/accordion.scss | 13 +-- inst/components/scss/fill.scss | 65 -------------- inst/components/scss/grid.scss | 36 ++++++++ inst/components/scss/layout_column_wrap.scss | 12 --- inst/components/scss/layout_columns.scss | 27 ------ inst/components/scss/mixins/_mixins.scss | 31 +++++++ .../scss/{nav-spacer.scss => nav_spacer.scss} | 0 inst/components/scss/page_fillable.scss | 17 ++++ inst/components/scss/page_navbar.scss | 39 ++++++++ inst/components/scss/page_sidebar.scss | 13 +++ inst/components/scss/sidebar.scss | 88 +++++++------------ inst/components/scss/value_box.scss | 11 +-- inst/css-precompiled/3/bootstrap.min.css | 2 +- inst/css-precompiled/4/bootstrap.min.css | 2 +- inst/css-precompiled/5/bootstrap.min.css | 2 +- inst/css-precompiled/5/bootstrap.scss | 11 +-- srcts/src/components/sidebar.ts | 5 ++ tests/testthat/_snaps/page.md | 4 - tests/testthat/_snaps/zzzz-bs-sass.md | 15 ++++ tests/testthat/test-zzzz-bs-sass.R | 20 ++++- tools/compile_component_sass.R | 18 ++++ tools/main.R | 3 +- tools/yarn_install.R | 2 +- 52 files changed, 405 insertions(+), 275 deletions(-) create mode 100644 inst/bslib-scss/bslib.scss create mode 100644 inst/bslib-scss/spacer.scss create mode 100644 inst/bslib-scss/tab-fill.scss create mode 100644 inst/components/dist/accordion/accordion.css create mode 100644 inst/components/dist/card/card.css create mode 100644 inst/components/dist/grid/grid.css create mode 100644 inst/components/dist/nav_spacer/nav_spacer.css create mode 100644 inst/components/dist/page_fillable/page_fillable.css create mode 100644 inst/components/dist/page_navbar/page_navbar.css create mode 100644 inst/components/dist/page_sidebar/page_sidebar.css create mode 100644 inst/components/dist/sidebar/sidebar.css create mode 100644 inst/components/dist/value_box/value_box.css delete mode 100644 inst/components/scss/_mixins.scss delete mode 100644 inst/components/scss/_variables.scss delete mode 100644 inst/components/scss/fill.scss create mode 100644 inst/components/scss/grid.scss delete mode 100644 inst/components/scss/layout_column_wrap.scss delete mode 100644 inst/components/scss/layout_columns.scss create mode 100644 inst/components/scss/mixins/_mixins.scss rename inst/components/scss/{nav-spacer.scss => nav_spacer.scss} (100%) create mode 100644 inst/components/scss/page_fillable.scss create mode 100644 inst/components/scss/page_navbar.scss create mode 100644 inst/components/scss/page_sidebar.scss create mode 100644 tests/testthat/_snaps/zzzz-bs-sass.md create mode 100644 tools/compile_component_sass.R 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 `