feat: Use margin-bottom/gap spacing in more places

NEWS.md

@@ -10,6 +10,7 @@
 ## Improvements
 
 * Closed quarto-dev/quarto-cli#6081: `{bslib}`'s components (e.g., `card()`, `sidebar()`, etc.) now work more sensibly in Quarto docs. (#664)
+* `sidebar()` gains `gap` and `padding` arguments to control the vertical gap between items in the sidebar and the padding around the sidebar's content. (#725)
 
 ## Bug fixes
 

R/card.R

@@ -61,7 +61,7 @@ card <- function(..., full_screen = FALSE, height = NULL, max_height = NULL, min
   children <- as_card_items(args[!nzchar(argnames)], wrapper = wrapper)
 
   tag <- div(
-    class = "card bslib-card bslib-mb-spacer",
+    class = "card bslib-card bslib-mb-spacing",
     style = css(
       height = validateCssUnit(height),
       max_height = validateCssUnit(max_height),

R/layout.R

@@ -84,7 +84,7 @@ layout_column_wrap <- function(
   children <- lapply(children, grid_item_container, fillable = fillable)
 
   tag <- div(
-    class = "bslib-grid",
+    class = "bslib-grid bslib-mb-spacing",
     style = css(
       grid_template_columns = colspec,
       grid_auto_rows = if (heights_equal == "all") "1fr",
@@ -213,7 +213,7 @@ layout_columns <- function(
   )
 
   tag <- div(
-    class = "grid bslib-grid",
+    class = "bslib-grid grid bslib-mb-spacing",
     style = css(
       height = validateCssUnit(height),
       gap = validateCssUnit(gap),

R/sidebar.R

@@ -54,6 +54,17 @@
 #'   viewed on mobile devices. The default is `250px` unless the sidebar is
 #'   included in a [layout_sidebar()] with a specified height, in which case
 #'   the default is to take up no more than 50% of the layout container.
+#' @param gap A [CSS length unit][htmltools::validateCssUnit()] defining the
+#'   vertical `gap` (i.e., spacing) between adjacent elements provided to `...`.
+#' @param padding Padding within the sidebar itself. This can be a numeric
+#'   vector (which will be interpreted as pixels) or a character vector with
+#'   valid CSS lengths. `padding` may be one to four values. If one, then
+#'   that value will be used for all four sides. If two, then the first value
+#'   will be used for the top and bottom, while the second value will be used
+#'   for left and right. If three, then the first will be used for top, the
+#'   second will be left and right, and the third will be bottom. If four, then
+#'   the values will be interpreted as top, right, bottom, and left
+#'   respectively.
 #'
 #' @export
 sidebar <- function(
@@ -66,7 +77,9 @@ sidebar <- function(
   bg = NULL,
   fg = NULL,
   class = NULL,
-  max_height_mobile = NULL
+  max_height_mobile = NULL,
+  gap = NULL,
+  padding = NULL
 ) {
   if (isTRUE(open)) {
     open <- "open"
@@ -122,8 +135,12 @@ sidebar <- function(
       class = c("sidebar", class),
       hidden = if (open == "closed") NA,
       tags$div(
-        class = "sidebar-content",
+        class = "sidebar-content bslib-gap-spacing",
         title,
+        style = css(
+          gap = validateCssUnit(gap),
+          padding = validateCssPadding(padding)
+        ),
         ...
       )
     ),
@@ -213,7 +230,7 @@ layout_sidebar <- function(
   sidebar_init <- if (!identical(sidebar$open, "always")) TRUE
 
   res <- div(
-    class = "bslib-sidebar-layout",
+    class = "bslib-sidebar-layout bslib-mb-spacing",
     class = if (right) "sidebar-right",
     class = if (identical(sidebar$open, "closed")) "sidebar-collapsed",
     `data-bslib-sidebar-init` = sidebar_init,

inst/bslib-scss/spacer.scss

@@ -13,14 +13,14 @@ $spacer: 1rem !default;
 // 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 {
+.bslib-mb-spacing {
   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 {
+  > .bslib-mb-spacing, > .form-group, > p, > pre {
     margin-bottom: 0;
   }
 }

inst/components/scss/sidebar.scss

@@ -16,7 +16,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)),
   --bslib-collapse-toggle-transform: 90deg;
   --bslib-collapse-toggle-right-transform: -90deg;
   --bslib-sidebar-column-main: minmax(0, 1fr);
-  
+
 
   display: grid !important;
   grid-template-columns: $bslib-sidebar-column-sidebar var(--bslib-sidebar-column-main);
@@ -60,6 +60,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)),
     > .sidebar-content {
       display: flex;
       flex-direction: column;
+      gap: var(--bslib-spacer, 1rem);
       padding: var(--bslib-sidebar-padding);
 
       > :last-child:not(.sidebar-title) {

tests/testthat/_snaps/page.md

@@ -34,10 +34,10 @@
     Output
       <body class="bslib-page-fill bslib-gap-spacing html-fill-container" style="padding:0px;gap:0px;--bslib-page-fill-mobile-height:auto;">
         <h1 class="bslib-page-title">Title</h1>
-        <div class="bslib-sidebar-layout html-fill-item" data-bslib-sidebar-border="false" data-bslib-sidebar-border-radius="false" data-bslib-sidebar-open="always" data-require-bs-caller="layout_sidebar()" data-require-bs-version="5" style="--bslib-sidebar-width:250px;--bslib-sidebar-max-height-mobile:250px;">
+        <div class="bslib-sidebar-layout bslib-mb-spacing html-fill-item" data-bslib-sidebar-border="false" data-bslib-sidebar-border-radius="false" data-bslib-sidebar-open="always" data-require-bs-caller="layout_sidebar()" data-require-bs-version="5" style="--bslib-sidebar-width:250px;--bslib-sidebar-max-height-mobile:250px;">
           <div class="main bslib-gap-spacing html-fill-container" role="main">main</div>
           <div role="complementary" class="sidebar">
-            <div class="sidebar-content"></div>
+            <div class="sidebar-content bslib-gap-spacing"></div>
           </div>
           <script data-bslib-sidebar-init>bslib.Sidebar.initCollapsibleAll()</script>
         </div>
@@ -50,10 +50,10 @@
     Output
       <body class="bslib-page-fill bslib-gap-spacing html-fill-container" style="padding:0px;gap:0px;--bslib-page-fill-mobile-height:auto;">
         <h1 class="bslib-page-title">Title</h1>
-        <div class="bslib-sidebar-layout html-fill-item" data-bslib-sidebar-border="false" data-bslib-sidebar-border-radius="false" data-bslib-sidebar-init="TRUE" data-bslib-sidebar-open="desktop" data-require-bs-caller="layout_sidebar()" data-require-bs-version="5" style="--bslib-sidebar-width:250px;--bslib-sidebar-max-height-mobile:250px;">
+        <div class="bslib-sidebar-layout bslib-mb-spacing html-fill-item" data-bslib-sidebar-border="false" data-bslib-sidebar-border-radius="false" data-bslib-sidebar-init="TRUE" data-bslib-sidebar-open="desktop" data-require-bs-caller="layout_sidebar()" data-require-bs-version="5" style="--bslib-sidebar-width:250px;--bslib-sidebar-max-height-mobile:250px;">
           <div class="main bslib-gap-spacing html-fill-container" role="main">main</div>
           <div id="bslib-sidebar-4785" role="complementary" class="sidebar">
-            <div class="sidebar-content">side</div>
+            <div class="sidebar-content bslib-gap-spacing">side</div>
           </div>
           <button class="collapse-toggle" type="button" title="Toggle sidebar" aria-expanded="true" aria-controls="bslib-sidebar-4785"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="bi bi-chevron-down collapse-icon" style="height:;width:;fill:currentColor;" aria-hidden="true" role="img" ><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg></button>
           <script data-bslib-sidebar-init>bslib.Sidebar.initCollapsibleAll()</script>

vignettes/_variables-template.Rmd

@@ -7,7 +7,7 @@ output: html_document
 
 ```{r setup, include = FALSE}
 source(
-  rprojroot::find_package_root_file("vignettes/variables-table/variables-table.R")
+  rprojroot::find_package_root_file("vignettes/_variables-table/variables-table.R")
 )
 knitr::opts_chunk$set(
   collapse = TRUE,