rstudio / rstudio/bslib

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

Open
#1,099 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
SCSS
Stars
569
Forks
72
Avg merge
1d 2h
Merged PRs (30d)
5

Description

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: https://github.com/rstudio/bslib/blob/b2ecc63f1b70a6d3dda43430161bc7eb28c30752/inst/builtin/bs5/shiny/_rules.scss#L325

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.
https://github.com/rstudio/bslib/blob/b2ecc63f1b70a6d3dda43430161bc7eb28c30752/inst/builtin/bs5/shiny/_rules.scss#L319

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)

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Read inst/builtin/bs5/shiny/_rules.scss at the referenced lines and reproduce the supplied showNotification() example. Done means toast_border_radius controls the toast border radius instead of card_border_radius; separately check whether the duplicated .shiny-notification selector is intentional.

Written by the indexing model from the issue text.

Assessment

Tech stack
scss
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.