Issue updating bs4Cards

[Shelmith-Kariuki]

Dear @DivadNojnarg and everyone who contributed to this package, thank you for your hard work.

My colleague and I are building an app that uses the bs4Card() function, and our app looks great. However, we have encountered two issues that we would like to raise:

1. We have built our app to collapse a card and update the card title with an emoji (preferably a checkmark) when the user completes filling in details on that card. However, this causes the icon to disappear. Can you suggest a fix for this issue?
2. We have also noticed that when we update the title of a "mother" card that contains nested cards, all of the nested card titles are updated to the same name, which we believe is a bug. Can you suggest a solution for this problem?

Please find the following code, which reproduces both issues:

library(shiny)
library(bs4Dash)
#devtools::install_github("hadley/emo")
library(emo)

# Define UI for application that draws a histogram
ui <- fluidPage(

  shinyWidgets::useBs4Dash(),

    bs4Dash::bs4Card(
      title = "First Card",
      width = 8,
      collapsed = FALSE,
      icon = icon("list"),
      solidHeader = TRUE,
      status = "primary",
      id = "card1"
    ),

    actionButton('submit1', 'Submit'),

    shiny::hr(),
    bs4Dash::bs4Card(
      title = "Second Card",
      width = 8,
      collapsed = FALSE,
      icon = icon("table"),
      solidHeader = TRUE,
      status = "primary",
      id = "card2",

      bs4Dash::bs4Card(
        title = "First Nested",
        width = 8,
        collapsed = FALSE,
        icon = icon("file"),
        solidHeader = TRUE,
        status = "info",
        id = "card2_child1"
        ),
      bs4Dash::bs4Card(
        title = "Second Nested",
        width = 8,
        collapsed = FALSE,
        icon = icon("rocket"),
        solidHeader = TRUE,
        status = "info",
        id = "card2_child2"
      )

    ),
  actionButton('submit2', 'Submit')
)

# Define server logic required to draw a histogram
server <- function(input, output) {

shiny::observeEvent(input$submit1, {

  ## Issue 1: The icon disappears when the title of First Card is updated.
  bs4Dash::updatebs4Card(
    id = "card1",
    action = "update",
    options = list(
      title = paste0("First Card ", emo::ji("banana")),
      icon = icon("list"),
      status = "primary"
    )
  )

})

  ## Issue 2: Updating the title of a card that has nested cards results into the nested
  ## cards being updated to the "mother" title as well.

  ## updating Second Card
  shiny::observeEvent(input$submit2, {
    bs4Dash::updatebs4Card(
      id = "card2",
      action = "update",
      options = list(
        title = paste0("Second Card ", emo::ji("banana")),
        icon = icon("table"),
        status = "primary"
      )
    )

    ## updating first nested card of Second Card
    bs4Dash::updatebs4Card(
      id = "card2_child1",
      action = "update",
      options = list(
        title = paste0("First Nested ", emo::ji("banana")),
        icon = icon("file"),
        status = "info"
      )
    )

    ## updating second nested card of Second Card
    bs4Dash::updatebs4Card(
      id = "card2_child2",
      action = "update",
      options = list(
        title = paste0("Second Nested ", emo::ji("banana")),
        icon = icon("rocket"),
        status = "info"
      )
    )

  })

}

# Run the application
shinyApp(ui = ui, server = server)

Thank you for your help!

cc @arthur-shaw

[DivadNojnarg]

Hi @Shelmith-Kariuki,

Thanks for using bs4Dash! I can certainly look at 1 and try a fix.

However for 2, I think this is a wrong pattern to have nested cards. From a UX/UI point of view this is not a good experience for the end user. I can definitely add it in the documentation.

[Shelmith-Kariuki]

@DivadNojnarg , thanks for the reply. We look forward to the fix.

Our app requires users to provide data for several sections, each of which is presented as a card. However, one of the sections contains a large amount of information. To make it more manageable, we've divided that section into four separate cards. How would you approach this differently?

[DivadNojnarg]

What kind of information would you like to see in 2)? Could you provide me a quick example?

[DivadNojnarg]

For 1, you could put the icon under the title element:

bs4Dash::updatebs4Card(
      id = "card1",
      action = "update",
      options = list(
        title = h1(
          icon("table"),
          paste0("First Card ", emo::ji("banana"))
        ),
        status = "primary"
      )
    )