Skip to content
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.

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

Shiny notification (toast) border-radius is styled by Bootstrap variable card-border-radius instead of toast-border-radius #1099

Open
Teebusch opened this issue Aug 2, 2024 · 0 comments

Comments

@Teebusch
Copy link

Teebusch commented Aug 2, 2024

Describe the problem

The toast_border_radius Bootstrap variable documented here does not change the border radius of Toasts created with shiny::showNotification(). Instead, the card-border-radius is used. The problem originates here:

border-radius: $card-border-radius;

Reproducible Example

library(shiny)
library(bslib)

# Goal: change `border-radius` of Toasts created with `showNotification()`

theme1 = bslib::bs_theme(version = 5, border_radius = "10rem")        # ❌ nope
theme2 = bslib::bs_theme(version = 5, toast_border_radius = "10rem")  # ❌ nope
theme3 = bslib::bs_theme(version = 5, card_border_radius = "10rem")   # ✔   this works, but it shouldnt

server = \(input, output) { shiny::showNotification("Foo", duration = NULL) }

shinyApp(bslib::page_fluid("Foo", theme = theme1), server)
shinyApp(bslib::page_fluid("Foo", theme = theme2), server)
shinyApp(bslib::page_fluid("Foo", theme = theme3), server)  # works

related issue

On a related note: I'm also wondering whether the selector of that rule intentionally duplicates the classname.

.shiny-notification.shiny-notification {

It seems redundant but it does increase specificity, so that I cannot override the styling with, e.g.,

.shiny-notification {
    opacity: 0.5;
} 

i.e., this will make a blue box:

<div class="shiny-notification">This will be blue</div>

 // css:

.shiny-notification.shiny-notification { background-color: blue; }
.shiny-notification { background-color: green; }

I couldn't find anything about the specificity of duplicate class names in the CSS selector specs and I wonder if all user agents interpret it in this way.

Session Info


─ Session info ─────────────────────────────────────────────────────────────────────────────────
 setting  value
 version  R version 4.3.1 (2023-06-16 ucrt)
 os       Windows 10 x64 (build 19045)
 system   x86_64, mingw32
 ui       RStudio
 language (EN)
 collate  German_Germany.utf8
 ctype    German_Germany.utf8
 tz       Europe/Berlin
 date     2024-08-02
 rstudio  2023.12.1+402 Ocean Storm (desktop)
 pandoc   NA

─ Packages ─────────────────────────────────────────────────────────────────────────────────────
! package * version date (UTC) lib source
P cachem 1.1.0 2024-05-16 [?] CRAN (R 4.3.3)
P cli 3.6.3 2024-06-21 [?] CRAN (R 4.3.3)
P devtools 2.4.5 2022-10-11 [?] CRAN (R 4.3.1)
P digest 0.6.36 2024-06-23 [?] CRAN (R 4.3.3)
P ellipsis 0.3.2 2021-04-29 [?] CRAN (R 4.3.1)
P fastmap 1.2.0 2024-05-15 [?] CRAN (R 4.3.3)
P fs 1.6.4 2024-04-25 [?] CRAN (R 4.3.3)
P glue 1.7.0 2024-01-09 [?] CRAN (R 4.3.3)
P htmltools 0.5.8.1 2024-04-04 [?] CRAN (R 4.3.3)
P htmlwidgets 1.6.4 2023-12-06 [?] CRAN (R 4.3.3)
P httpuv 1.6.15 2024-03-26 [?] CRAN (R 4.3.3)
P later 1.3.2 2023-12-06 [?] CRAN (R 4.3.3)
P lifecycle 1.0.4 2023-11-07 [?] CRAN (R 4.3.3)
P magrittr 2.0.3 2022-03-30 [?] CRAN (R 4.3.1)
P memoise 2.0.1 2021-11-26 [?] CRAN (R 4.3.1)
P mime 0.12 2021-09-28 [?] CRAN (R 4.3.0)
P miniUI 0.1.1.1 2018-05-18 [?] CRAN (R 4.3.1)
P pkgbuild 1.4.4 2024-03-17 [?] CRAN (R 4.3.3)
P pkgload 1.4.0 2024-06-28 [?] CRAN (R 4.3.3)
P profvis 0.3.8 2023-05-02 [?] CRAN (R 4.3.1)
P promises 1.3.0 2024-04-05 [?] CRAN (R 4.3.3)
P purrr 1.0.2 2023-08-10 [?] CRAN (R 4.3.1)
P R6 2.5.1 2021-08-19 [?] CRAN (R 4.3.1)
P Rcpp 1.0.13 2024-07-17 [?] CRAN (R 4.3.3)
P remotes 2.5.0 2024-03-17 [?] CRAN (R 4.3.3)
renv 1.0.7 2024-04-11 [1] CRAN (R 4.3.3)
P rlang 1.1.4 2024-06-04 [?] CRAN (R 4.3.3)
P rstudioapi 0.16.0 2024-03-24 [?] CRAN (R 4.3.3)
P sessioninfo 1.2.2 2021-12-06 [?] CRAN (R 4.3.1)
P shiny 1.9.0 2024-07-29 [?] CRAN (R 4.3.1)
P stringi 1.8.4 2024-05-06 [?] CRAN (R 4.3.3)
P stringr 1.5.1 2023-11-14 [?] CRAN (R 4.3.3)
P urlchecker 1.0.1 2021-11-30 [?] CRAN (R 4.3.1)
P usethis 3.0.0 2024-07-29 [?] CRAN (R 4.3.3)
P vctrs 0.6.5 2023-12-01 [?] CRAN (R 4.3.3)
P xtable 1.8-4 2019-04-21 [?] CRAN (R 4.3.1)

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

No branches or pull requests

1 participant