Skip to content

Conversation

federiva
Copy link

@federiva federiva commented Oct 7, 2025

Closes #4297
Hey! thank you for this awesome package. Adding a small feature for modals here.

How to test

library(shiny)
library(bslib)

shinyApp(
  ui = bslib::page_fillable(
    actionButton("open", "open modal")
  ),
  server = function(input, output, session) {
    observe(
      showModal(
        modalDialog("fullscreen!", size = "full")
      )
    ) |> 
      bindEvent(input$open)
  }
)

@CLAassistant
Copy link

CLAassistant commented Oct 7, 2025

CLA assistant check
All committers have signed the CLA.

#' @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! 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Allow fullscreen modal as a valid size for modalDialog when using Bootstrap 5
3 participants