From 9a6d3c0eacde48988b76a3947c0a1c4cbc5c5460 Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Mon, 18 Mar 2024 09:03:03 -0400 Subject: [PATCH 1/5] feat(value_box): Add `min_height` --- R/value-box.R | 10 +++++++--- man/value_box.Rd | 8 +++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/R/value-box.R b/R/value-box.R index edc8238f8..5bfa61331 100644 --- a/R/value-box.R +++ b/R/value-box.R @@ -55,9 +55,11 @@ #' `"text-light"`) to customize the background/foreground colors. #' @param fill Whether to allow the value box to grow/shrink to fit a fillable #' container with an opinionated height (e.g., `page_fillable()`). -#' @param max_height The maximum height of the value box or the showcase area. -#' Can be any valid [CSS unit][htmltools::validateCssUnit] (e.g., -#' `max_height="200px"`). +#' @param max_height The maximum height of the `value_box()` or the showcase +#' area when used in a `showcase_layout_*()` function. Can be any valid [CSS +#' unit][htmltools::validateCssUnit] (e.g., `max_height="200px"`). +#' @param min_height The minimum height of the values box. Can be any valid [CSS +#' unit][htmltools::validateCssUnit] (e.g., `min_height="200px"`). #' @inheritParams card #' @param theme_color `r lifecycle::badge("deprecated")` Use `theme` instead. #' @@ -97,6 +99,7 @@ value_box <- function( theme = NULL, height = NULL, max_height = NULL, + min_height = NULL, fill = TRUE, class = NULL, id = NULL, @@ -163,6 +166,7 @@ value_box <- function( full_screen = full_screen, height = height, max_height = max_height, + min_height = min_height, fill = fill, style = css( color = theme$fg, diff --git a/man/value_box.Rd b/man/value_box.Rd index c8f8633db..b404b2bb5 100644 --- a/man/value_box.Rd +++ b/man/value_box.Rd @@ -18,6 +18,7 @@ value_box( theme = NULL, height = NULL, max_height = NULL, + min_height = NULL, fill = TRUE, class = NULL, id = NULL, @@ -77,9 +78,10 @@ control, you can create your own theme with \code{value_box_theme()} where you can pass foreground and background colors directly. See the \strong{Themes} section for more details.} -\item{max_height}{The maximum height of the value box or the showcase area. -Can be any valid \link[htmltools:validateCssUnit]{CSS unit} (e.g., -\code{max_height="200px"}).} +\item{max_height}{The maximum height of the \code{value_box()} or the showcase +area when used in a \verb{showcase_layout_*()} function. Can be any valid \link[htmltools:validateCssUnit]{CSS unit} (e.g., \code{max_height="200px"}).} + +\item{min_height}{The minimum height of the values box. Can be any valid \link[htmltools:validateCssUnit]{CSS unit} (e.g., \code{min_height="200px"}).} \item{fill}{Whether to allow the value box to grow/shrink to fit a fillable container with an opinionated height (e.g., \code{page_fillable()}).} From cf8e976615e63c363fe34fee1bfb97f0ed7ffae0 Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Mon, 18 Mar 2024 09:09:33 -0400 Subject: [PATCH 2/5] feat(layout-columns): Add `min_height` and `max_height` args --- R/layout.R | 15 +++++++++++++-- man/layout_column_wrap.Rd | 6 ++++++ man/layout_columns.Rd | 8 +++++++- 3 files changed, 26 insertions(+), 3 deletions(-) diff --git a/R/layout.R b/R/layout.R index 6a8527095..5f82f7899 100644 --- a/R/layout.R +++ b/R/layout.R @@ -37,6 +37,9 @@ #' @param fillable Whether or not each element is wrapped in a fillable container. #' @param height_mobile Any valid CSS unit to use for the height when on mobile #' devices (or narrow windows). +#' @param max_height,min_height The maximum or minimum height of the layout container. +#' Can be any valid [CSS unit][htmltools::validateCssUnit] (e.g., +#' `max_height="200px"`). #' @inheritParams card #' @inheritParams card_body #' @@ -74,6 +77,8 @@ layout_column_wrap <- function( fillable = TRUE, height = NULL, height_mobile = NULL, + min_height = NULL, + max_height = NULL, gap = NULL, class = NULL ) { @@ -137,7 +142,9 @@ layout_column_wrap <- function( # doesn't get inherited in a scenario like layout_column_wrap(height=200, ..., layout_column_wrap(...)) "--bslib-grid-height" = validateCssUnit(height %||% "auto"), "--bslib-grid-height-mobile" = validateCssUnit(height_mobile %||% "auto"), - gap = validateCssUnit(gap) + gap = validateCssUnit(gap), + min_height = validateCssUnit(min_height), + max_height = validateCssUnit(max_height) ), !!!attribs, children, @@ -252,7 +259,9 @@ layout_columns <- function( fillable = TRUE, gap = NULL, class = NULL, - height = NULL + height = NULL, + min_height = NULL, + max_height = NULL ) { args <- separate_arguments(...) attribs <- args$attribs @@ -274,6 +283,8 @@ layout_columns <- function( style = css( height = validateCssUnit(height), gap = validateCssUnit(gap), + min_height = validateCssUnit(min_height), + max_height = validateCssUnit(max_height) ), # We don't enable the next option by default, but users could add this # attribute to hide the internal elements until after the custom element diff --git a/man/layout_column_wrap.Rd b/man/layout_column_wrap.Rd index aca7d4227..789cc192a 100644 --- a/man/layout_column_wrap.Rd +++ b/man/layout_column_wrap.Rd @@ -13,6 +13,8 @@ layout_column_wrap( fillable = TRUE, height = NULL, height_mobile = NULL, + min_height = NULL, + max_height = NULL, gap = NULL, class = NULL ) @@ -66,6 +68,10 @@ fillable container with an opinionated height (e.g., \code{page_fillable()}).} \item{height_mobile}{Any valid CSS unit to use for the height when on mobile devices (or narrow windows).} +\item{max_height, min_height}{The maximum or minimum height of the layout container. +Can be any valid \link[htmltools:validateCssUnit]{CSS unit} (e.g., +\code{max_height="200px"}).} + \item{gap}{A \link[htmltools:validateCssUnit]{CSS length unit} defining the \code{gap} (i.e., spacing) between elements provided to \code{...}. This argument is only applicable when \code{fillable = TRUE}} diff --git a/man/layout_columns.Rd b/man/layout_columns.Rd index e9f9a3bda..29080eb8f 100644 --- a/man/layout_columns.Rd +++ b/man/layout_columns.Rd @@ -12,7 +12,9 @@ layout_columns( fillable = TRUE, gap = NULL, class = NULL, - height = NULL + height = NULL, + min_height = NULL, + max_height = NULL ) } \arguments{ @@ -66,6 +68,10 @@ fillable container with an opinionated height (e.g., \code{page_fillable()}).} \item{height}{Any valid \link[htmltools:validateCssUnit]{CSS unit} (e.g., \code{height="200px"}). Doesn't apply when a card is made \code{full_screen} (in this case, consider setting a \code{height} in \code{\link[=card_body]{card_body()}}).} + +\item{max_height, min_height}{The maximum or minimum height of the layout container. +Can be any valid \link[htmltools:validateCssUnit]{CSS unit} (e.g., +\code{max_height="200px"}).} } \description{ Create responsive, column-based grid layouts, based on a 12-column grid. From 81adadba9fcbfb2795ca0ccb69b9ef29008acb8a Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Mon, 18 Mar 2024 09:26:50 -0400 Subject: [PATCH 3/5] docs: Add NEWS item --- NEWS.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/NEWS.md b/NEWS.md index 3b61f9ab4..ac43ba178 100644 --- a/NEWS.md +++ b/NEWS.md @@ -34,6 +34,8 @@ * We increased the spacing between elements just slightly in the Shiny preset. This change is most noticeable in the `layout_columns()` or `layout_column_wrap()` component. In these and other components, you can use `gap` and `padding` arguments to choose your own values, or you can set the `$bslib-spacer` (Sass) or `--bslib-spacer` (CSS) variable. (#998) +* `value_box()`, `layout_columns()` and `layout_column_wrap()` now all have `min_height` and `max_height` arguments. These are useful in filling layouts, like `page_fillable()`, `page_sidebar(fillable = TRUE)` or `page_navbar(fillable = TRUE)`. For example, you can use `layout_columns(min_height = 300)` to ensure that a set of items (likely arranged in a row of columns) don't shrink to less than 300 pixels in height. (#1016) + ## Bug fixes * `layout_columns()` now always uses a 12-unit grid when the user provides an integer value to `col_widths` for any breakpoint. For example, `breakpoints(md = 3, lg = NA)` will pick a best-fitting layout for large screen sizes using the 12-column grid. Previously, the best fit algorithm might adjust the number of columns as a shortcut to an easy solution. That shortcut is only taken when an auto-fit layout is requested for every breakpoint, e.g. `col_widths = breakpoints(md = NA, lg = NA)` or `col_widths = NA`. (#928) From c0ff02df3639360536d44977b35f9c678f3190ce Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Mon, 18 Mar 2024 09:50:35 -0400 Subject: [PATCH 4/5] docs(layout-columns): Give a hint about how to use min/max height --- R/layout.R | 5 +++-- man/layout_column_wrap.Rd | 5 +++-- man/layout_columns.Rd | 5 +++-- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/R/layout.R b/R/layout.R index 5f82f7899..3a6978b8c 100644 --- a/R/layout.R +++ b/R/layout.R @@ -37,9 +37,10 @@ #' @param fillable Whether or not each element is wrapped in a fillable container. #' @param height_mobile Any valid CSS unit to use for the height when on mobile #' devices (or narrow windows). -#' @param max_height,min_height The maximum or minimum height of the layout container. +#' @param min_height,max_height The maximum or minimum height of the layout container. #' Can be any valid [CSS unit][htmltools::validateCssUnit] (e.g., -#' `max_height="200px"`). +#' `max_height="200px"`). Use these arguments in filling layouts to ensure that a +#' layout container doesn't shrink below `min_height` or grow beyond `max_height`. #' @inheritParams card #' @inheritParams card_body #' diff --git a/man/layout_column_wrap.Rd b/man/layout_column_wrap.Rd index 789cc192a..693895738 100644 --- a/man/layout_column_wrap.Rd +++ b/man/layout_column_wrap.Rd @@ -68,9 +68,10 @@ fillable container with an opinionated height (e.g., \code{page_fillable()}).} \item{height_mobile}{Any valid CSS unit to use for the height when on mobile devices (or narrow windows).} -\item{max_height, min_height}{The maximum or minimum height of the layout container. +\item{min_height, max_height}{The maximum or minimum height of the layout container. Can be any valid \link[htmltools:validateCssUnit]{CSS unit} (e.g., -\code{max_height="200px"}).} +\code{max_height="200px"}). Use these arguments in filling layouts to ensure that a +layout container doesn't shrink below \code{min_height} or grow beyond \code{max_height}.} \item{gap}{A \link[htmltools:validateCssUnit]{CSS length unit} defining the \code{gap} (i.e., spacing) between elements provided to \code{...}. This argument is only applicable when \code{fillable = TRUE}} diff --git a/man/layout_columns.Rd b/man/layout_columns.Rd index 29080eb8f..94a97951f 100644 --- a/man/layout_columns.Rd +++ b/man/layout_columns.Rd @@ -69,9 +69,10 @@ fillable container with an opinionated height (e.g., \code{page_fillable()}).} \code{height="200px"}). Doesn't apply when a card is made \code{full_screen} (in this case, consider setting a \code{height} in \code{\link[=card_body]{card_body()}}).} -\item{max_height, min_height}{The maximum or minimum height of the layout container. +\item{min_height, max_height}{The maximum or minimum height of the layout container. Can be any valid \link[htmltools:validateCssUnit]{CSS unit} (e.g., -\code{max_height="200px"}).} +\code{max_height="200px"}). Use these arguments in filling layouts to ensure that a +layout container doesn't shrink below \code{min_height} or grow beyond \code{max_height}.} } \description{ Create responsive, column-based grid layouts, based on a 12-column grid. From 1e25423f53aea3331b24a1abdd6a4b161836a672 Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Mon, 18 Mar 2024 10:00:58 -0400 Subject: [PATCH 5/5] docs(news): tweak news entry --- NEWS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/NEWS.md b/NEWS.md index ac43ba178..c8e4c1350 100644 --- a/NEWS.md +++ b/NEWS.md @@ -34,7 +34,7 @@ * We increased the spacing between elements just slightly in the Shiny preset. This change is most noticeable in the `layout_columns()` or `layout_column_wrap()` component. In these and other components, you can use `gap` and `padding` arguments to choose your own values, or you can set the `$bslib-spacer` (Sass) or `--bslib-spacer` (CSS) variable. (#998) -* `value_box()`, `layout_columns()` and `layout_column_wrap()` now all have `min_height` and `max_height` arguments. These are useful in filling layouts, like `page_fillable()`, `page_sidebar(fillable = TRUE)` or `page_navbar(fillable = TRUE)`. For example, you can use `layout_columns(min_height = 300)` to ensure that a set of items (likely arranged in a row of columns) don't shrink to less than 300 pixels in height. (#1016) +* `value_box()`, `layout_columns()` and `layout_column_wrap()` now all have `min_height` and `max_height` arguments. These are useful in filling layouts, like `page_fillable()`, `page_sidebar(fillable = TRUE)` or `page_navbar(fillable = TRUE)`. For example, you can use `layout_columns(min_height = 300, max_height = 500)` to ensure that a set of items (likely arranged in a row of columns) are always between 300 and 500 pixels tall. (#1016) ## Bug fixes