Panel() PanelType argument does not act as expected

[marcusyoung]

Code example

Panel(
    headerText = "header",
    hasCloseButton = TRUE,
    type = "PanelType.medium"
    isOpen = isPanelOpen(),
    "content",
    onDismiss = JS(paste0(
      "function() {",
      "  Shiny.setInputValue('", hidePanelId, "', Math.random());",
      "}"
    ))
  )

OR

Panel(
    headerText = "header",
    hasCloseButton = TRUE,
    type = "medium"
    isOpen = isPanelOpen(),
    "content",
    onDismiss = JS(paste0(
      "function() {",
      "  Shiny.setInputValue('", hidePanelId, "', Math.random());",
      "}"
    ))
  )

Bug description

By default, Panel() gives a "small" panel, 340px wide.

If the type argument is passed to Panel() it is not respected, instead the panel always fills the entire window.

Expected behavior

Panel size should match the type specified (https://developer.microsoft.com/en-us/fluentui#/controls/web/panel#PanelType).

Comments

As a workaround, you can apply a class using ClassName, for example:

Panel(
    headerText = header,
    hasCloseButton = TRUE,
    className = "medium",
    isOpen = isPanelOpen(),
    content,
    onDismiss = JS(paste0(
      "function() {",
      "  Shiny.setInputValue('", hidePanelId, "', Math.random());",
      "}"
    ))
  )

And then use the following CSS (for small or medium examples). Note that the class from ClassName is applied to a div above the required target div.

.small .ms-Panel-main {
    width: 340px ;  /* Set the desired width */
    max-width: 340px ;  /* Ensure it doesn't exceed this width */
    right: 0 ;  /* Align the panel to the right edge */
    left: auto ;  /* Disable left positioning */
}

.medium .ms-Panel-main {
    width: 500px ;  /* Set the desired width */
    max-width: 500px ;  /* Ensure it doesn't exceed this width */
    right: 0 ;  /* Align the panel to the right edge */
    left: auto ;  /* Disable left positioning */
}