Skip to content

Commit d3c3ad3

Browse files
gadenbuiecpsievert
gadenbuie
and
cpsievert
authored
Add Card class and migrate card JavaScript to TypeScript (#557)
Co-authored-by: Carson Sievert <cpsievert1@gmail.com>
1 parent 0cca4ce commit d3c3ad3

17 files changed

Lines changed: 513 additions & 87 deletions

File tree

‎NEWS.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,21 @@
22

33
This significant release adds [sidebar layouts](https://rstudio.github.io/bslib/articles/sidebars.html), [accordions](https://rstudio.github.io/bslib/articles/sidebars.html#sidebar-accordions), and makes many improvements to make dashboard-like filling layouts easier to create.
44

5-
Although `{bslib}` is still maturing, and will continue to receiving new UI features, we now see it as a viable replacement for `{shinydashboard}`.
5+
Although `{bslib}` is still maturing, and will continue to receiving new UI features, we now see it as a viable replacement for `{shinydashboard}`.
66

77
## Breaking changes
88

99
* `card_body()` now provides the same behavior as `card_body_fill()` (i.e., it is both a fillable container and fill item) by default. And, now, since `card_body()` can do everything `card_body_fill()` can do, `card_body_fill()` has been deprecated. The main benefit of this change is that `card(full_screen = TRUE, ...)` with output(s) passed to `...` "just works" in an intuitive way. To revert to the previous behavior, set `fillable = FALSE` and `fill = FALSE` in calls to `card_body()` and set `wrapper = function(x) card_body(x, fillable = FALSE, fill = FALSE)` in calls to `card()`. (#498)
1010
* Closed #375: `margin-top` is no longer included on header tags that aren't created via pandoc. If this negatively impacts spacing above headers, consider adding a suitable [utility class](https://rstudio.github.io/bslib/articles/utility-classes.html) (for example, change `shiny::titlePanel("My title")` to `tagAppendAttributes(titlePanel("My title"), class = "mt-3", .selector = "h2")`). (#396)
1111
* `layout_column_wrap()`'s `fill` argument now controls whether or not the _layout container_ is allowed to grow/shrink to fit a fillable container (e.g., `page_fillable()`). It also gains a new `fillable` argument for controlling whether _UI elements_ are allowed to fill their row height. This is more consistent with the meaning of `fill` in other functions, like `card()`, `card_body()`, `layout_sidebar()`, etc. (#498)
12-
* `page_fill()` (now called `page_fillable()`) had several breaking changes (listed below). If this breaks existing behavior, consider using `shiny::fillPage(theme = bslib::bs_theme(), ...)` instead of `page_fill()`.
12+
* `page_fill()` (now called `page_fillable()`) had several breaking changes (listed below). If this breaks existing behavior, consider using `shiny::fillPage(theme = bslib::bs_theme(), ...)` instead of `page_fill()`.
1313
* `page_fill()` now produces a `<body>` tag with `display:flex` (instead of `display:block`).
14-
* `page_fill()` no longer fills the windows height on mobile (i.e., narrow screens) by default (set `fill_mobile = TRUE` to restore the old behavior).
14+
* `page_fill()` no longer fills the windows height on mobile (i.e., narrow screens) by default (set `fill_mobile = TRUE` to restore the old behavior).
1515
* `page_fill()` now adds `padding` and `gap` by default, set `padding = 0` and `gap = 0` to restore the old behavior.
1616
* `page_navbar()` (and consequently `shiny::navbarPage()`) no longer implicitly wrap `header` and `footer` in an additional `shiny::fluidRow()` container for Bootstrap 5+ (i.e., `theme = bs_theme()`) usage. Similarly, `navs_bar()` no longer does this (for any version of Bootstrap). If this breaks existing behavior, consider wrapping the `header` and `footer` value(s) with `shiny::fluidRow()`). (#479)
1717
* Closed #510: `card()` no longer includes `margin-bottom`. To revert the old behavior, add `class = "mb-3` to `card()`. (#542)
1818
* Defaults for the following Bootstrap 5 Sass variables were changed to `null`: `$accordion-button-active-bg`, `$accordion-button-active-color`, and `$accordion-icon-active-color`. To restore the old behavior, do `bs_add_variables(theme, "accordion-button-active-bg" = "tint-color($component-active-bg, 90%)", "accordion-button-active-color" = "shade-color($primary, 10%)", "accordion-icon-active-color" = "$accordion-button-active-color", .where = "declarations")`. (#475)
19+
* Closed #558: nested cards with `fullscreen = TRUE` now correctly and individually expand to fill the window. Tab focus behavior while in full screen mode has also been improved. (#557)
1920

2021
## New features
2122

@@ -45,8 +46,8 @@ Although `{bslib}` is still maturing, and will continue to receiving new UI feat
4546

4647
* Adds a new `card()` API as well as `value_box()` and `layout_column_wrap()`. To learn more about this new functionality, refer to these new pkgdown articles:
4748

48-
* https://rstudio.github.io/bslib/articles/cards.html
49-
* https://rstudio.github.io/bslib/articles/value-boxes.html
49+
* https://rstudio.github.io/bslib/articles/cards.html
50+
* https://rstudio.github.io/bslib/articles/value-boxes.html
5051
* https://rstudio.github.io/bslib/articles/column-layout.html
5152

5253
# bslib 0.4.1
@@ -123,7 +124,7 @@ Small patch release to fix failing test on Solaris.
123124

124125
## Bug fixes
125126

126-
* Closed #236, #230, #242, #187, #215, #250: Addressed various cosmetic issues with CSS (#249).
127+
* Closed #236, #230, #242, #187, #215, #250: Addressed various cosmetic issues with CSS (#249).
127128
* Closed #289: collapsed navbar toggle now correctly floats to the right (#290).
128129
* Closed [rstudio/flexdashboard#316](https://github.com/rstudio/flexdashboard/issues/316): fixed an issue with navbar nav spacing/alignment (#286).
129130

‎R/card.R‎

Lines changed: 21 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,12 @@ card <- function(..., full_screen = FALSE, height = NULL, max_height = NULL, fil
6666
height = validateCssUnit(height),
6767
max_height = validateCssUnit(max_height)
6868
),
69+
"data-bslib-card-init" = NA,
6970
!!!attribs,
7071
!!!children,
7172
if (full_screen) full_screen_toggle(),
72-
card_js_init()
73+
card_dependency(),
74+
card_init_js()
7375
)
7476

7577
tag <- bindFillRole(tag, container = TRUE, item = fill)
@@ -271,64 +273,31 @@ full_screen_toggle <- function() {
271273
"data-bs-toggle" = "tooltip",
272274
"data-bs-placement" = "bottom",
273275
title = "Expand",
274-
full_screen_toggle_icon(),
275-
htmlDependency(
276-
name = "bslib-card-full-screen",
277-
version = get_package_version("bslib"),
278-
package = "bslib",
279-
src = "components",
280-
script = "card-full-screen.js"
281-
)
276+
full_screen_toggle_icon()
282277
)
283278
}
284279

280+
card_dependency <- function() {
281+
htmlDependency(
282+
name = "bslib-card",
283+
version = get_package_version("bslib"),
284+
package = "bslib",
285+
src = "components",
286+
script = "card.min.js"
287+
)
288+
}
285289

286-
card_js_init <- function() {
287-
tags$script("data-bslib-card-needs-init" = NA, HTML(
288-
"
289-
var thisScript = document.querySelector('script[data-bslib-card-needs-init]');
290-
if (!thisScript) throw new Error('Failed to register card() resize observer');
291-
292-
thisScript.removeAttribute('data-bslib-card-needs-init');
293-
294-
var card = $(thisScript).parents('.card').last();
295-
if (!card) throw new Error('Failed to register card() resize observer');
296-
297-
// Let Shiny know to trigger resize when the card size changes
298-
// TODO: shiny could/should do this itself (rstudio/shiny#3682)
299-
var resizeEvent = window.document.createEvent('UIEvents');
300-
resizeEvent.initUIEvent('resize', true, false, window, 0);
301-
var ro = new ResizeObserver(() => { window.dispatchEvent(resizeEvent); });
302-
ro.observe(card[0]);
303-
304-
// Enable tooltips (for the expand icon)
305-
var tooltipList = card[0].querySelectorAll('[data-bs-toggle=\"tooltip\"]');
306-
tooltipList.forEach(function(x) { new bootstrap.Tooltip(x); });
307-
308-
// In some complex fill-based layouts with multiple outputs (e.g., plotly),
309-
// shiny initializes with the correct sizing, but in-between the 1st and last
310-
// renderValue(), the size of the output containers can change, meaning every
311-
// output but the 1st gets initialized with the wrong size during their
312-
// renderValue(); and then after the render phase, shiny won't know trigger a
313-
// resize since all the widgets will return to their original size
314-
// (and thus, Shiny thinks there isn't any resizing to do).
315-
// We workaround that situation by manually triggering a resize on the binding
316-
// when the output container changes (this way, if the size is different during
317-
// the render phase, Shiny will know about it)
318-
$(document).on('shiny:value', function(x) {
319-
var el = x.binding.el;
320-
if (card[0].contains(el) && !$(el).data('bslib-output-observer')) {
321-
var roo = new ResizeObserver(x.binding.onResize);
322-
roo.observe(el);
323-
$(el).data('bslib-output-observer', true);
324-
}
325-
});
326-
"
327-
))
290+
card_init_js <- function() {
291+
tags$script(
292+
`data-bslib-card-init` = NA,
293+
HTML("bslib.Card.initializeAllCards();")
294+
)
328295
}
329296

330-
# via bsicons::bs_icon("arrows-fullscreen")
331297
full_screen_toggle_icon <- function() {
298+
if (is_installed("bsicons")) {
299+
return(bsicons::bs_icon("arrows-fullscreen"))
300+
}
332301
HTML('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="bi bi-arrows-fullscreen " style="height:1em;width:1em;fill:currentColor;" aria-hidden="true" role="img" ><path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707zm4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707zm0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707zm-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707z"></path></svg>')
333302
}
334303

‎inst/components/accordion.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)