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
federiva wants to merge 1 commit into
base: main
Choose a base branch
from
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

@gadenbuie gadenbuie Oct 7, 2025

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

@gadenbuie gadenbuie Oct 7, 2025

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

@federiva federiva Oct 7, 2025

Choose a reason for hiding this comment

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

I like that! 🙂

Copy link
Author

@federiva federiva Dec 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Hey! It's been ~2months, do you have any update, do you want me to put a draft PR for this?

I was thinking of two additional options.

Option 1

In order to keep the old implementation we probably could include full as it is right now (opinionated) but we could also add an additional optional parameter like size_class = NULL or something like that to override what size passes, or even passing it as part of ....
So then if it's not null then it will override the size parameter?

In that way we give control to the user but we don't lose the original implementation logic.

Option 2

  1. Implement a basic non-exported .base_modal_dialog that passes all of the parameters we can actually pass to BS5's modals.
  2. Rewrite modalDialog using the new interface of .base_modal_dialog keeping "hardcoded" some of the parameters that we currently we do not have a way to pass. No changes to the API
  3. Write custom_modal/modal_extended/modalDialogExtended, etc. that allows us to pass some of the new parameters handled by .base_modal_dialog. This will probably an exact copy of the base function, the different name is only to have a clear naming of what the base function is vs the exported one (the extended).

This last is more complex but gives us flexibility to update the base_modal_function as BS continues evolving without disrupting the old modalDialog one

I like more the 2 tho as I don't like the function overriding its own parameters, in fact I'd drop Option 1 😆

Copy link
Member

@gadenbuie gadenbuie Dec 4, 2025

Choose a reason for hiding this comment

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

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 like this approach best, which we could accomplish by adding a helper function that resolves the modal class from the size string. One small change: this new function would allow users to provide short forms for all currently known modal sizes, e.g. "sm", "lg", etc. but would otherwise throw if size doesn't include the modal- prefix:

modalDialog(size = "s") # -> modal-sm
modalDialog(size = "sm") # -> modal-sm
modalDialog(size = "modal-sm") # -> modal-sm
modalDialog(size = "small") # ❌ throws


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.