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

Author: gadenbuie

CHANGELOG.md

@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### New features
 
+* `ui.card()` and `ui.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 `ui.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"]`. (#1215)
+
 ### Bug fixes
 
 ### Other changes

scripts/htmlDependencies.R

@@ -20,6 +20,7 @@ ignore <- capture.output({
   pak::pkg_install(c(
     "rstudio/bslib@main",
     "rstudio/shiny@main",
+    "rstudio/sass@main",
     "cran::htmltools"
   ))
   #pak::pkg_install(c("rstudio/bslib@main", "rstudio/shiny@main", "rstudio/htmltools@main"))

shiny/experimental/ui/_card.py

@@ -104,6 +104,7 @@ def card(
         fill=fill,
         class_=class_,
         wrapper=wrapper,
+        id=None,
         **kwargs,
     )
 

shiny/experimental/ui/_deprecated.py

@@ -1134,6 +1134,7 @@ def value_box(
         max_height=max_height,
         fill=fill,
         class_=class_,
+        id=None,
         **kwargs,
     )
 

shiny/ui/_card.py

@@ -16,6 +16,7 @@
 )
 
 from .._docstring import add_example
+from .._namespaces import resolve_id_or_none
 from .._utils import private_random_id
 from ..types import MISSING, MISSING_TYPE
 from ._html_deps_shinyverse import components_dependencies
@@ -54,6 +55,7 @@ def card(
     min_height: Optional[CssUnit] = None,
     fill: bool = True,
     class_: Optional[str] = None,
+    id: Optional[str] = None,
     # wrapper: WrapperCallable | None | MISSING_TYPE = MISSING,
     **kwargs: TagAttrValue,
 ) -> Tag:
@@ -79,6 +81,10 @@ def card(
         an opinionated height (e.g., :func:`~shiny.ui.page_fillable`).
     class_
         Additional CSS classes for the returned Tag.
+    id
+        Provide a unique identifier for the :func:`~shiny.ui.card` or 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"]`.
     **kwargs
         HTML attributes on the returned Tag.
 
@@ -102,6 +108,7 @@ def card(
         min_height=min_height,
         fill=fill,
         class_=class_,
+        id=id,
         wrapper=MISSING,
         **kwargs,
     )
@@ -115,6 +122,7 @@ def _card_impl(
     min_height: Optional[CssUnit] = None,
     fill: bool = True,
     class_: Optional[str] = None,
+    id: Optional[str] = None,
     wrapper: WrapperCallable | None | MISSING_TYPE = MISSING,
     **kwargs: TagAttrValue,
 ) -> Tag:
@@ -131,11 +139,15 @@ def _card_impl(
     attrs, children = consolidate_attrs(*args, class_=class_, **kwargs)
     children = _wrap_children_in_card(*children, wrapper=wrapper)
 
-    if full_screen and "id" not in attrs:
-        attrs["id"] = private_random_id("bslib_card")
+    id = resolve_id_or_none(id)
+    is_shiny_input = id is not None
+
+    if full_screen and id is None:
+        id = private_random_id("bslib_card")
 
     tag = div(
         {
+            "id": id,
             "class": "card bslib-card bslib-mb-spacing",
             "style": css(
                 height=as_css_unit(height),
@@ -145,9 +157,10 @@ def _card_impl(
             "data-bslib-card-init": True,
             "data-full-screen": "false" if full_screen else None,
         },
+        {"class": "bslib-card-input"} if is_shiny_input else None,
         *children,
         attrs,
-        _full_screen_toggle(attrs["id"]) if full_screen else None,
+        _full_screen_toggle(id) if full_screen else None,
         components_dependencies(),
         _card_js_init(),
     )

shiny/ui/_valuebox.py

@@ -309,6 +309,7 @@ def value_box(
     max_height: Optional[CssUnit] = None,
     fill: bool = True,
     class_: Optional[str] = None,
+    id: Optional[str] = None,
     **kwargs: TagAttrValue,
 ) -> Tag:
     """
@@ -367,6 +368,10 @@ def value_box(
         Utility classes for customizing the appearance of the summary card. Use `bg-*`
         and `text-*` classes (e.g, `"bg-danger"` and `"text-light"`) to customize the
         background/foreground colors.
+    id
+        Provide a unique identifier for the :func:`~shiny.ui.value_box()` to report its
+        state to Shiny. For example, using `id="my_value_box"`, you can observe the
+        value box's full screen state with `input.my_value_box()["full_screen"]`.
     **kwargs
         Additional attributes to pass to :func:`~shiny.ui.card`.
 
@@ -459,6 +464,7 @@ def value_box(
         height=height,
         max_height=max_height,
         fill=fill,
+        id=id,
     )
 
 

shiny/www/shared/_version.json

@@ -1,5 +1,5 @@
 {
   "note!": "This file is auto-generated by scripts/htmlDependencies.R",
   "package": "shiny",
-  "version": "Github (rstudio/shiny@6760c318184535185e5050aefe29e658e8710ef0)"
+  "version": "Github (rstudio/shiny@e2b7f9113866a2f0a98b0cac240320116c5ff56a)"
 }

shiny/www/shared/bootstrap/_version.json

@@ -1,7 +1,7 @@
 {
   "note!": "This file is auto-generated by scripts/htmlDependencies.R",
-  "shiny_version": "Github (rstudio/shiny@6760c318184535185e5050aefe29e658e8710ef0)",
-  "bslib_version": "Github (rstudio/bslib@1929f7e63197f6073085a03f926f11829b7292ea)",
+  "shiny_version": "Github (rstudio/shiny@e2b7f9113866a2f0a98b0cac240320116c5ff56a)",
+  "bslib_version": "Github (rstudio/bslib@8751c7cc1d883f3d04c727e7f0eab89a34f1404c)",
   "htmltools_version": "CRAN (R 4.3.1)",
   "bootstrap_version": "5.3.1"
 }