feat(layout_columns): Use sm as the default col_widths breakpoint (#1014)

* feat(layout_columns): Make `sm` the default breakpoint

* fix(layout_columns): `--sm` css variable is needed, actually

* refactor(layout_columns): set base row heights css var if xs is only breakpoint

* tests: Update snapshots

* docs(news): Add news items

* docs(news): Fix typo

Co-authored-by: Carson Sievert <[email protected]>

Author: gadenbuie

NEWS.md

@@ -8,6 +8,8 @@
 
 * `page_sidebar()` now places the `title` element in a `.navbar` container that matches the structure of `page_navbar()`. This ensures that the title elements of `page_sidebar()` and `page_navbar()` have consistent appearance. (#998)
 
+* The `col_widths` argument of `layout_columns()` now sets the `sm` breakpoint by default, rather than the `md` breakpoint. For example, `col_widths = c(12, 6, 6)` is now equivalent to `breakpoints(sm = c(12, 6, 6))` rather than `breakpoints(md = c(12, 6, 6))`. (#1014)
+
 ## New features
 
 * Added `input_task_button()`, a replacement for `shiny::actionButton()` that automatically prevents an operation from being submitted multiple times. It does this by, upon click, immediately transitioning to a "Processing..." visual state that does not let the button be clicked again. The button resets to its clickable state automatically after the reactive flush it causes is complete; or, for advanced scenarios, `update_task_button()` can be used to manually control when the button resets.
@@ -50,6 +52,8 @@
 
 * Fixed an issue that could happen with a `card()` or `value_box()` that is rendered entirely via `renderUI()` when it is replaced by an updated card but the user had expanded the original card into full screen mode. Now the full screen state is reset for the new card or value box. If you want to update a card without potentially exiting the full-screen mode, update specific parts of the card using `uiOutput()` or `textOutput()`. (#1005)
 
+* Fixed an issue where the `xs` breakpoint in a `breakpoints()` object used for `row_heights` in `layout_columns()` would override all other breakpoints. (#1014)
+
 # bslib 0.6.1
 
 ## Bug fixes

R/layout.R

@@ -311,7 +311,7 @@ as_col_spec <- function(col_widths, n_kids) {
   if (is.null(col_widths) || rlang::is_na(col_widths)) return(NULL)
 
   if (!is_breakpoints(col_widths)) {
-    col_widths <- breakpoints(md = col_widths)
+    col_widths <- breakpoints(sm = col_widths)
   }
 
   for (break_name in names(col_widths)) {
@@ -367,23 +367,19 @@ row_heights_css_vars <- function(x) {
     x <- breakpoints(xs = x)
   }
 
-  idx_sm <- match("xs", names(x))
-
   # creates classes that pair with CSS variables when set
   classes <- paste0("bslib-grid--row-heights--", names(x))
 
   css_vars <- setNames(x, paste0("--", classes))
 
-  if (!is.na(idx_sm)) {
-    # xs doesn't need a specific breakpoint var, we just set the base CSS var
-    names(css_vars)[idx_sm] <- "--bslib-grid--row-heights"
-    # and as result we don't need a class to activate it.
-    classes <- classes[-idx_sm]
-  }
-
   # Treat numeric values as fractional units
   css_vars <- rapply(css_vars, how = "replace", maybe_fr_unit)
 
+  if (identical(names(css_vars), "--bslib-grid--row-heights--xs")) {
+    names(css_vars) <- "--bslib-grid--row-heights"
+    classes <- character()
+  }
+
   list(
     style = css(!!!css_vars),
     class = classes

tests/testthat/_snaps/layout.md

@@ -4,7 +4,7 @@
       layout_columns(col_widths = 6, !!!children)
     Output
       <div class="container-fluid">
-        <bslib-layout-columns class="bslib-grid grid bslib-mb-spacing html-fill-item" col-widths-md="6" data-require-bs-caller="layout_columns()" data-require-bs-version="5">
+        <bslib-layout-columns class="bslib-grid grid bslib-mb-spacing html-fill-item" col-widths-sm="6" data-require-bs-caller="layout_columns()" data-require-bs-version="5">
           <div class="bslib-grid-item bslib-gap-spacing html-fill-container">
             <div class="layout-column-child-element"></div>
           </div>
@@ -20,7 +20,7 @@
       layout_columns(col_widths = c(4, 8), !!!children)
     Output
       <div class="container-fluid">
-        <bslib-layout-columns class="bslib-grid grid bslib-mb-spacing html-fill-item" col-widths-md="4,8" data-require-bs-caller="layout_columns()" data-require-bs-version="5">
+        <bslib-layout-columns class="bslib-grid grid bslib-mb-spacing html-fill-item" col-widths-sm="4,8" data-require-bs-caller="layout_columns()" data-require-bs-version="5">
           <div class="bslib-grid-item bslib-gap-spacing html-fill-container">
             <div class="layout-column-child-element"></div>
           </div>