rstudio / rstudio/bslib

Nested sidebar collapse icons do not show up in Safari

Open
#648 2 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

Nested sidebar collapse icons do not show up in Safari, but they do show up in Chrome

Expected / Chrome:
Screenshot 2023-06-22 at 5 10 01 PM

Missing inner sidebar icons to collapse the sidebar / Safari:
Screenshot 2023-06-22 at 5 09 47 PM

Reprex
library(bslib)
library(shiny)
library(rlang)

my_sidebar = bslib::sidebar("My sidebar!!", open = "open", title = "Barret")

nav_with_content = function(letter, prefix) {
  bslib::nav_panel(
    letter,
    shiny::markdown(paste0("`", prefix, "`: tab ", letter, " content"))
  )
}

nav_items = function(prefix) {
  a <- nav_with_content("a", prefix)
  b <- nav_with_content("b", prefix)
  github <- bslib::nav_item(
    tags$a(
      # icon("github"),
      "Shiny",
      href="https://github.com/rstudio/shiny",
      target="_blank"
    )
  )
  space <- bslib::nav_spacer()
  other <- bslib::nav_menu(
    "Other links",
    nav_with_content("c", prefix),
    bslib::nav_item(
      tags$a(
        # icon("r-project"),
        "RStudio",
        href="https://rstudio.com",
        target="_blank"
      )
    ),
    align = "right"
  )
  list(
    a,
    b,
    github,
    space,
    other
  )
}


shiny::shinyApp(
  ui = bslib::page_navbar(
      !!!nav_items("navbar()"),
      sidebar = my_sidebar,
      title = "navbar()",
      bg = "#0062cc",
      inverse = TRUE,
      fillable = FALSE,
      header = shiny::markdown(
        "Testing app for `bslib::nav_spacer()` and `bslib::nav_item()` [#319](https://github.com/rstudio/bslib/pull/319)."
      ),
      footer = shiny::div(
        style = "width:80%; margin: 0 auto",
        shiny::h4("navset_card_tab()"),
        bslib::navset_card_tab(
          !!!nav_items("navset_card_tab()"),
          sidebar = my_sidebar
        ),
        shiny::h4("navset_card_pill()"),
        bslib::navset_card_pill(
          !!!nav_items("navset_card_pill()"),
          sidebar = my_sidebar
        ),
        # Do not include `navset_bar()` in example. Ok for testing only
        shiny::h4("navset_bar()"),
        bslib::navset_bar(
          !!!nav_items("navset_bar()"),
          sidebar = my_sidebar,
          title = "Test!"
        )
      )

  ),
  server = function(...) {}
)
Session Info

─ Session info ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 setting  value
 version  R version 4.3.0 (2023-04-21)
 os       macOS Ventura 13.3.1
 system   aarch64, darwin20
 ui       X11
 language (EN)
 collate  en_US.UTF-8
 ctype    en_US.UTF-8
 tz       America/New_York
 date     2023-06-22
 pandoc   3.1 @ /opt/homebrew/bin/pandoc

─ Packages ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
package * version date (UTC) lib source
bslib * 0.5.0.9000 2023-06-22 [1] Github (rstudio/bslib@a13f49e)
cachem 1.0.8 2023-05-01 [1] CRAN (R 4.3.0)
callr 3.7.3 2022-11-02 [1] CRAN (R 4.3.0)
cli 3.6.1 2023-03-23 [1] CRAN (R 4.3.0)
clisymbols 1.2.0 2017-05-21 [1] CRAN (R 4.3.0)
colorout 1.2-2 2023-05-16 [1] Github (jalvesaq/colorout@79931fd)
crayon 1.5.2 2022-09-29 [1] CRAN (R 4.3.0)
desc 1.4.2 2022-09-08 [1] CRAN (R 4.3.0)
devtools 2.4.5 2022-10-11 [1] CRAN (R 4.3.0)
digest 0.6.31 2022-12-11 [1] CRAN (R 4.3.0)
ellipsis 0.3.2 2021-04-29 [1] CRAN (R 4.3.0)
fastmap 1.1.1 2023-02-24 [1] CRAN (R 4.3.0)
fs 1.6.2 2023-04-25 [1] CRAN (R 4.3.0)
git2r 0.32.0 2023-04-12 [1] CRAN (R 4.3.0)
glue 1.6.2 2022-02-24 [1] CRAN (R 4.3.0)
htmltools 0.5.5 2023-03-23 [1] CRAN (R 4.3.0)
htmlwidgets 1.6.2 2023-03-17 [1] CRAN (R 4.3.0)
httpuv 1.6.11 2023-05-11 [1] CRAN (R 4.3.0)
jquerylib 0.1.4 2021-04-26 [1] CRAN (R 4.3.0)
jsonlite 1.8.5 2023-06-05 [1] CRAN (R 4.3.0)
later 1.3.1 2023-05-02 [1] CRAN (R 4.3.0)
lifecycle 1.0.3 2022-10-07 [1] CRAN (R 4.3.0)
magrittr 2.0.3 2022-03-30 [1] CRAN (R 4.3.0)
memoise 2.0.1 2021-11-26 [1] CRAN (R 4.3.0)
memuse 4.2-3 2023-01-24 [1] CRAN (R 4.3.0)
mime 0.12 2021-09-28 [1] CRAN (R 4.3.0)
miniUI 0.1.1.1 2018-05-18 [1] CRAN (R 4.3.0)
pkgbuild 1.4.0 2022-11-27 [1] CRAN (R 4.3.0)
pkgload 1.3.2 2022-11-16 [1] CRAN (R 4.3.0)
prettyunits 1.1.1 2020-01-24 [1] CRAN (R 4.3.0)
processx 3.8.1 2023-04-18 [1] CRAN (R 4.3.0)
profvis 0.3.8 2023-05-02 [1] CRAN (R 4.3.0)
promises 1.2.0.1 2021-02-11 [1] CRAN (R 4.3.0)
prompt 1.0.1 2023-05-16 [1] Github (gaborcsardi/prompt@7ef0f2e)
ps 1.7.5 2023-04-18 [1] CRAN (R 4.3.0)
purrr 1.0.1 2023-01-10 [1] CRAN (R 4.3.0)
R6 2.5.1 2021-08-19 [1] CRAN (R 4.3.0)
Rcpp 1.0.10 2023-01-22 [1] CRAN (R 4.3.0)
remotes 2.4.2 2021-11-30 [1] CRAN (R 4.3.0)
rlang 1.1.1 2023-04-28 [1] CRAN (R 4.3.0)
rprojroot 2.0.3 2022-04-02 [1] CRAN (R 4.3.0)
sass 0.4.6 2023-05-03 [1] CRAN (R 4.3.0)
sessioninfo 1.2.2 2021-12-06 [1] CRAN (R 4.3.0)
shiny 1.7.4.9002 2023-06-20 [1] Github (rstudio/shiny@1b77094)
stringi 1.7.12 2023-01-11 [1] CRAN (R 4.3.0)
stringr 1.5.0 2022-12-02 [1] CRAN (R 4.3.0)
urlchecker 1.0.1 2021-11-30 [1] CRAN (R 4.3.0)
usethis 2.1.6 2022-05-25 [1] CRAN (R 4.3.0)
vctrs 0.6.2 2023-04-19 [1] CRAN (R 4.3.0)
xtable 1.8-4 2019-04-21 [1] CRAN (R 4.3.0)

[1] /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library

cc @karangattu

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

Start by running the supplied R reprex with bslib and shiny in Safari, then compare the nested sidebar collapse icons with Chrome. Trace the generated sidebar styles and check the SCSS or Bootstrap rules affecting those icons. Done means the inner collapse icons render in Safari as they do in Chrome.

Written by the indexing model from the issue text.

Assessment

Tech stack
bootstrap, css, r, sass
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.