From ce2291ec8db51a87f87bd46a45bbe0e56b7739a6 Mon Sep 17 00:00:00 2001 From: Carson Date: Mon, 10 Jul 2023 10:35:06 -0500 Subject: [PATCH 01/20] Attach component-specific Sass/Css at the component level; allow for more customization via CSS variables --- R/accordion.R | 11 +- R/bs-theme.R | 26 +- R/card.R | 11 +- R/layout.R | 6 +- R/nav-items.R | 2 +- R/page.R | 14 +- R/sidebar.R | 17 +- R/utils-deps.R | 43 ++- R/value-box.R | 3 +- .../color-contrast.scss | 0 inst/bslib-scss/spacer.scss | 26 ++ inst/bslib-scss/tab-fill.scss | 18 + inst/components/dist/accordion/accordion.css | 29 ++ inst/components/dist/card/card.css | 150 +++++++++ inst/components/dist/grid/grid.css | 77 +++++ .../components/dist/nav_spacer/nav_spacer.css | 34 ++ .../dist/page_fillable/page_fillable.css | 23 ++ .../dist/page_sidebar/page_sidebar.css | 15 + inst/components/dist/sidebar/sidebar.css | 310 ++++++++++++++++++ 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 | 103 ++++++ 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 | 32 ++ .../scss/{nav-spacer.scss => nav_spacer.scss} | 0 inst/components/scss/page_fillable.scss | 17 + inst/components/scss/page_sidebar.scss | 13 + inst/components/scss/sidebar.scss | 26 +- inst/components/scss/value_box.scss | 11 +- srcts/src/components/sidebar.ts | 5 + tests/testthat/_snaps/page.md | 6 +- tools/compile_component_sass.R | 18 + tools/main.R | 3 +- 41 files changed, 1040 insertions(+), 212 deletions(-) rename inst/{sass-utils => bslib-scss}/color-contrast.scss (100%) 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_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_sidebar.scss create mode 100644 tools/compile_component_sass.R diff --git a/R/accordion.R b/R/accordion.R index f7619a92f..fe8760a25 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"), + bslib::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..51b9f75c6 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,12 @@ 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("bslib-scss", "color-contrast.scss")), + rules = list( + sass_file(path_inst("bslib-scss", "tab-fill.scss")), + # TODO: could component-ize this? + sass_file(path_inst("bslib-scss", "spacer.scss")) + ) ) ) } diff --git a/R/card.R b/R/card.R index 777f006d1..20ffeec01 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"), + bslib::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/page.R b/R/page.R index e86e82417..24ef40676 100644 --- a/R/page.R +++ b/R/page.R @@ -55,16 +55,16 @@ 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", + class = "bslib-page-fillable 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 ) @@ -141,10 +141,16 @@ page_sidebar <- function(..., sidebar = NULL, title = NULL, fillable = TRUE, fil border = FALSE, border_radius = FALSE, ... - ) + ), + bslib::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..0cce29339 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 `