compatibility of prompter with bootstrap version 4

[mhanf]

Hello Etienne thank you very much for your package ! i just tested it and its simplicity is very much appreciable. However if you also use bslib package to create your shiny app, info/warning/danger/success type does not adapt to associated colors in the newly define boostrap theme. Do you think that in a next version of your package this functionnality could be implemented ? Again thank you very much best regards matthieu

[etiennebacher]

Hello Matthieu, thanks for your interest in this package.

I don't use bslib in my shiny apps (for now) so I'm not sure I understand correctly the issue. Could you provide a reproducible example and detail the output you would expect?

FYI, it's possible to change the style for info/danger, etc. with CSS rules, see #3 for an example.

[mhanf]

hello Etienne really sorry for the unclearness of my question. bslib is a package developped by rstudio which allow to use bootstrap 4 (3 is the default in shiny) and easily personnalize the bootstrap theme of shiny apps. (https://rstudio.github.io/bslib/) In the example below i apply a predefined theme ("darkly") and add a button with the "btn-warning" bootstrap class . You can see that the warning color of the plot tip is not the same as the warning color of the button . To understand well you can for example replace the theme "darkly" by "flatly" . The two warning colors are again not the same.

The output i would expect is, whatever the theme i use (or define), that the warning color of the tip is the same as the warning color of my button

i am a data scientist and not a web developper but i know that these boostrap colors (warning danger, success info primary secondary ...) are accessible in css by using as color name "var(--danger)" or "var(--primary)" or .... Maybe it could help.

again thank you very much to take the time to develop such useful and simple package.

Best regards Matthieu

library(prompter)
library(shiny)
library(ggplot2)
library(bslib)

ui <- fluidPage(
  theme = bslib::bs_theme(version = 4,bootswatch = "darkly"),
  use_prompt(),
  br(),
  actionButton("bs4_color_warning","bs4_color_warning",class="btn-warning"),
  column(
    9,
    br(),
    plotOutput("plot") %>% 
      add_prompt(
        message = "The color is different of bs4_color_warning button",
        position = "right", 
        type = "warning", 
        size = "medium", 
        rounded = TRUE
      )
  )
)

server <- function(input, output, session) {
  output$plot <- renderPlot(ggplot(mtcars, aes(wt, mpg))+ geom_point())
}

shinyApp(ui, server)

[etiennebacher]

Thank you for the very detailed explanation, it is much clearer!

You were actually very close with the var(--danger) idea. Now you only need to apply this in the CSS rules as in #3:

library(prompter)
library(shiny)
library(ggplot2)
library(magrittr)
library(bslib)

ui <- fluidPage(
  theme = bslib::bs_theme(version = 4, bootswatch = "darkly"),
  use_prompt(),
  tags$head(
    tags$style(
      HTML(
        ".hint--info:after {
          background-color: var(--info);
          text-shadow: 0 -1px 0px var(--info);
        }
        .hint--info.hint--bottom:before {
          border-bottom-color: var(--info)
        }
        .hint--info.hint--left:before {
          border-left-color: var(--info)
        }
        .hint--info.hint--top:before {
          border-top-color: var(--info)
        }
        .hint--info.hint--right:before {
          border-right-color: var(--info)
        }"
      )
    )
  ),
  br(),
  actionButton(
    "bs4_color_info",
    "bs4_color_info",
    class="btn-info",
    style = "color: white"
  ),
  column(
    9,
    br(),
    plotOutput("plot") %>% 
      add_prompt(
        message = "The color is different of bs4_color_info button",
        position = "top", 
        type = "info", 
        size = "medium", 
        rounded = TRUE
      )
  )
)

server <- function(input, output, session) {
  output$plot <- renderPlot(ggplot(mtcars, aes(wt, mpg))+ geom_point())
}

shinyApp(ui, server)

I just changed the tooltip position and the text color of the button to make it easier to compare.

I should create more complete docs with the ideas developed in the issues. I am very happy that you like the package, don't hesitate if you have other ideas / requests ;)

[etiennebacher]

Hello Matthieu, in case you want to use bootstrap 5, you need to replace var(--info) by var(--bs-info).

And just so you know, there's now a website for this package: https://prompter.etiennebacher.com/

[mhanf]

hello Etienne Thanks for the info ! to avoid problems linked to bootstrap version i think that i will instead use bslib function bs_get_variables() which extracts whatever the BS version the desired variable from the theme used in the shiny apps. I will visit as soon as possible the prompter website ! thanks again