feat(card): Report full screen state as a Shiny input (#1006)

* refactor(card): style

* feat(card): Report full screen state to Shiny

* feat(value_box): Add `id` parameter

* feat(card): Report state on page load, too

* chore: Add a comment about recursive calls in _setShinyInput()

* chore: yarn build

* refactor(card.ts): Simplify recursive setShinyInput

* docs(news): Add item

Author: gadenbuie

NEWS.md

@@ -12,6 +12,8 @@
 
 * 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.
 
+* Both `card()` and `value_box()` now take an `id` argument that, when provided, is used to report the full screen state of the card or value box to the server. For example, when using `card(id = "my_card", full_screen = TRUE)` you can determine if the card is currently in full screen mode by reading the boolean value of `input$my_card$full_screen`. (#1006)
+
 ## Improvements
 
 * `layout_columns()` was rewritten in Typescript as a custom element to improve the portability of the component. (#931)

R/card.R

@@ -28,6 +28,9 @@
 #'   together into one `wrapper` call (e.g. given `card("a", "b",
 #'   card_body("c"), "d")`, `wrapper` would be called twice, once with `"a"` and
 #'   `"b"` and once with `"d"`).
+#' @param id Provide a unique identifier for the `card()` or `value_box()` to
+#'   report its state to Shiny. For example, using `id = "my_card"`, you can
+#'   observe the card's full screen state with `input$my_card$full_screen`.
 #'
 #' @return A [htmltools::div()] tag.
 #'
@@ -70,21 +73,34 @@
 #'   )
 #' )
 #'
-card <- function(..., full_screen = FALSE, height = NULL, max_height = NULL, min_height = NULL, fill = TRUE, class = NULL, wrapper = card_body) {
-
+card <- function(
+  ...,
+  full_screen = FALSE,
+  height = NULL,
+  max_height = NULL,
+  min_height = NULL,
+  fill = TRUE,
+  class = NULL,
+  wrapper = card_body,
+  id = NULL
+) {
   args <- rlang::list2(...)
   argnames <- rlang::names2(args)
 
   attribs <- args[nzchar(argnames)]
   children <- as_card_items(args[!nzchar(argnames)], wrapper = wrapper)
 
-  if (full_screen && is.null(attribs$id)) {
+  is_shiny_input <- !is.null(id)
+
+  if (full_screen && is.null(id)) {
     # a11y: full screen cards need an ID for aria-controls on the toggle button
-    attribs$id <- paste0("bslib-card-", p_randomInt(1000, 10000))
+    id <- paste0("bslib-card-", p_randomInt(1000, 10000))
   }
 
   tag <- div(
+    id = id,
     class = "card bslib-card bslib-mb-spacing",
+    class = if (is_shiny_input) "bslib-card-input",
     style = css(
       height = validateCssUnit(height),
       max_height = validateCssUnit(max_height),

R/value-box.R

@@ -99,6 +99,7 @@ value_box <- function(
   max_height = NULL,
   fill = TRUE,
   class = NULL,
+  id = NULL,
   theme_color = deprecated()
 ) {
   dots <- separate_arguments(...)
@@ -158,6 +159,7 @@ value_box <- function(
       class,
       if (!is.null(showcase)) showcase_layout$class
     ),
+    id = id,
     full_screen = full_screen,
     height = height,
     max_height = max_height,