Skip to content

Adding full as a valid parameter for the size arg in modalD… #4298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+13 −9
Open

Adding full as a valid parameter for the size arg in modalD… #4298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion NEWS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

* The `icon` argument of `updateActionButton()`/`updateActionLink()` nows allows values other than `shiny::icon()` (e.g., `fontawesome::fa()`, `bsicons::bs_icon()`, etc). (#4249)

* The `size` argument of `modalDialog` now supports `full` to create full-screen modals. (#4297)

## Bug fixes

* `updateActionButton()`/`updateActionLink()` now correctly renders HTML content passed to the `label` argument. (#4249)
Expand All @@ -12,7 +14,7 @@

## Changes

* The return value of `actionButton()`/`actionLink()` changed slightly: `label` and `icon` are wrapped in an additional HTML container element. This allows for: 1. `updateActionButton()`/`updateActionLink()` to distinguish between the `label` and `icon` when making updates and 2. spacing between `label` and `icon` to be more easily customized via CSS.
* The return value of `actionButton()`/`actionLink()` changed slightly: `label` and `icon` are wrapped in an additional HTML container element. This allows for: 1. `updateActionButton()`/`updateActionLink()` to distinguish between the `label` and `icon` when making updates and 2. spacing between `label` and `icon` to be more easily customized via CSS.

# shiny 1.11.1

Expand Down
11 changes: 6 additions & 5 deletions R/modal.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,10 @@ removeModal <- function(session = getDefaultReactiveDomain()) {
#' @param title An optional title for the dialog.
#' @param footer UI for footer. Use `NULL` for no footer.
#' @param size One of `"s"` for small, `"m"` (the default) for medium,
#' `"l"` for large, or `"xl"` for extra large. Note that `"xl"` only
#' works with Bootstrap 4 and above (to opt-in to Bootstrap 4+,
#' pass [bslib::bs_theme()] to the `theme` argument of a page container
#' `"l"` for large, `"xl"` for extra large, or `"full"` for full screen.
#' Note that `"xl"` only works with Bootstrap >=4 and `"full"`
#' only works with Bootstrap >=5.(to opt-in to Bootstrap 4+ or Bootstrap 5+,
#' pass [bslib::bs_theme()] to the `theme` argument of a page container
#' like [fluidPage()]).
#' @param easyClose If `TRUE`, the modal dialog can be dismissed by
#' clicking outside the dialog box, or be pressing the Escape key. If
Expand Down Expand Up @@ -154,7 +155,7 @@ removeModal <- function(session = getDefaultReactiveDomain()) {
#' }
#' @export
modalDialog <- function(..., title = NULL, footer = modalButton("Dismiss"),
size = c("m", "s", "l", "xl"), easyClose = FALSE, fade = TRUE) {
size = c("m", "s", "l", "xl", "full"), easyClose = FALSE, fade = TRUE) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fullscreen modal sizes have a few flavors

Class Availability
.modal-fullscreen Always
.modal-fullscreen-sm-down 576px
.modal-fullscreen-md-down 768px
.modal-fullscreen-lg-down 992px
.modal-fullscreen-xl-down 1200px
.modal-fullscreen-xxl-down 1400px

I like that modalDialog() helps you find the appropriate value, but more and more I feel like throwing an error for invalid value unnecessarily breaks future-compatibility with changing sizes.

I think the behavior I'd prefer here in this case is:

  1. If size is a known alias value, map to a specific class, e.g. "s" → modal-sm or "full" → modal-fullscreen.
  2. If size doesn't already have the modal- prefix, prepend it, e.g. "sm" → modal-sm or "fullscreen-lg-down" → modal-fullscreen-lg-down

I'm going to bring this up internally to see what the rest of the Shiny team thinks before we move forward.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Primarily to support Bootstrap size aliases (they use sm, md, lg, etc. instead of the s, m, l used here in size). If they know about the full class and use modal-fullscreen-lg-down we wouldn't prepend modal- to the class.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that! 🙂


size <- match.arg(size)

Expand All @@ -172,7 +173,7 @@ modalDialog <- function(..., title = NULL, footer = modalButton("Dismiss"),

div(
class = "modal-dialog",
class = switch(size, s = "modal-sm", m = NULL, l = "modal-lg", xl = "modal-xl"),
class = switch(size, s = "modal-sm", m = NULL, l = "modal-lg", xl = "modal-xl", full = "modal-fullscreen"),
div(class = "modal-content",
if (!is.null(title)) div(class = "modal-header",
tags$h4(class = "modal-title", title)
Expand Down
7 changes: 4 additions & 3 deletions man/modalDialog.Rd
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.