Quick and dirty customizable collapse icon

rstudio · Oct 12, 2023 · 31cf806 · 31cf806
1 parent a595542
commit 31cf806
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/R/sidebar.R b/R/sidebar.R
@@ -45,6 +45,8 @@
 #'   wrapped in a `<header>` element with class `sidebar-title`. You can also
 #'   provide a custom [htmltools::tag()] for the title element, in which case
 #'   you'll likely want to give this element `class = "sidebar-title"`.
+#' @param collapse_icon A [htmltools::tag()] child to use for the collapse icon.
+#'   Consider using a \pkg{bsicons} icon like `bsicons::bs_icon("sliders")`.
 #' @param bg,fg A background or foreground color. If only one of either is
 #'   provided, an accessible contrasting color is provided for the opposite
 #'   color, e.g. setting `bg` chooses an appropriate `fg` color.
@@ -75,6 +77,7 @@ sidebar <- function(
   open = c("desktop", "open", "closed", "always"),
   id = NULL,
   title = NULL,
+  collapse_icon = NULL,
   bg = NULL,
   fg = NULL,
   class = NULL,
@@ -130,7 +133,7 @@ sidebar <- function(
         title = "Toggle sidebar",
         "aria-expanded" = if (open %in% c("open", "desktop")) "true" else "false",
         "aria-controls" = id,
-        collapse_icon()
+        collapse_icon %||% sidebar_collapse_icon()
       )
     }
 
@@ -293,12 +296,12 @@ toggle_sidebar <- function(id, open = NULL, session = get_current_session()) {
 #' @export
 sidebar_toggle <- toggle_sidebar
 
-collapse_icon <- function() {
+sidebar_collapse_icon <- function() {
   if (!is_installed("bsicons")) {
-    icon <- "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" class=\"bi bi-chevron-left collapse-icon\" style=\"fill:currentColor;\" aria-hidden=\"true\" role=\"img\" ><path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"></path></svg>"
+    icon <- "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" class=\"bi bi-chevron-left\" style=\"fill:currentColor;\" aria-hidden=\"true\" role=\"img\" ><path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"></path></svg>"
     return(HTML(icon))
   }
-  bsicons::bs_icon("chevron-left", class = "collapse-icon", size = NULL)
+  bsicons::bs_icon("chevron-left")
 }
 
 sidebar_init_js <- function() {

diff --git a/inst/components/scss/sidebar.scss b/inst/components/scss/sidebar.scss
@@ -158,7 +158,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)),
       background-color: var(--bslib-sidebar-toggle-bg);
     }
 
-    > .collapse-icon {
+    > * {
       opacity: 0.8;
       width: var(--bslib-sidebar-icon-size);
       height: var(--bslib-sidebar-icon-size);
@@ -168,7 +168,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)),
       transition: transform var(--bslib-sidebar-toggle-transition-easing) var(--bslib-sidebar-transition-duration);
     }
 
-    &:hover > .collapse-icon {
+    &:hover > * {
       opacity: 1;
     }
   }
@@ -206,7 +206,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)),
       left: var(--bslib-sidebar-icon-size);
       right: unset;
       border: var(--bslib-collapse-toggle-border);
-      > .collapse-icon {
+      > * {
         transform: rotateY(var(--bslib-collapse-toggle-right-transform));
       }
     }

diff --git a/srcts/src/components/sidebar.ts b/srcts/src/components/sidebar.ts
@@ -232,9 +232,9 @@ class Sidebar {
     // collapse toggle icon because it's guaranteed to transition, whereas the
     // sidebar doesn't animate on mobile (or in browsers where animating
     // grid-template-columns is not supported).
-    toggle
-      .querySelector(".collapse-icon")
-      ?.addEventListener("transitionend", () => this._finalizeState());
+    toggle.firstElementChild?.addEventListener("transitionend", () =>
+      this._finalizeState()
+    );
   }
 
   /**