feat: Add toolbar input select

NAMESPACE

@@ -163,6 +163,7 @@ export(toggle_sidebar)
 export(toggle_switch)
 export(toggle_tooltip)
 export(toolbar)
+export(toolbar_input_select)
 export(tooltip)
 export(update_popover)
 export(update_submit_textarea)

NEWS.md

@@ -7,6 +7,7 @@
 * Added toast notifications based on [Bootstrap's Toast component](https://getbootstrap.com/docs/5.3/components/toasts/): Use `toast()` to create customizable toast objects, `show_toast()` to display a toast message, `hide_toast()` for manual dismissal, and `toast_header()` for structured headers with icons and status indicators. (#1246)
 
 * Added a new `toolbar()` component for creating Bootstrap toolbars that can contain buttons, text, and other elements. (#1247)
+  * Added `toolbar_input_select()`, a select input designed for use within a `toolbar()`. (#1249)
 
 ## Improvements and bug fixes
 

R/toolbar.R

@@ -26,3 +26,57 @@ toolbar <- function(
   tag_require(tag, version = 5, caller = "toolbar()")
   as_fragment(tag)
 }
+
+#' Toolbar Input Select
+#'
+#' @description
+#' Create a select list input control that can be used to choose a single item
+#' from a list of values, suitable for use within a [toolbar()]. This is a
+#' wrapper around [shiny::selectInput()] with `selectize = FALSE` and
+#' appropriate styling for toolbar usage.
+#'
+#' @examplesIf rlang::is_interactive()
+#' toolbar(
+#'   align = "right",
+#'   toolbar_input_select(
+#'     id = "select",
+#'     choices = c("Option 1", "Option 2", "Option 3"),
+#'     selected = "Option 2"
+#'   )
+#' )
+#'
+#' @param id The input ID.
+#' @param choices List of values to select from. If elements of the list are
+#'   named, then that name - rather than the value - is displayed to the user.
+#'   It's also possible to group related inputs by providing a named list whose
+#'   elements are (either named or unnamed) lists, vectors, or factors. In this
+#'   case, the outermost names will be used as the group labels (leveraging the
+#'   `<optgroup>` HTML tag) for the elements in the respective sublist.
+#' @param selected The initially selected value. If not specified then defaults
+#'   to the first value.
+#' @param width The width of the input, e.g. '400px', or '100%'; see
+#'   [validateCssUnit()].
+#'
+#' @return Returns a select input control suitable for use in a toolbar.
+#'
+#' @family Toolbar components
+#' @export
+toolbar_input_select <- function(
+  id,
+  choices,
+  selected = NULL,
+  width = NULL
+) {
+  htmltools::div(
+    class = "bslib-toolbar-input-select form-select-sm",
+    shiny::selectInput(
+      id,
+      label = NULL, # Removed for slimline input component
+      choices = choices,
+      selected = selected,
+      multiple = FALSE,
+      selectize = FALSE,
+      width = width
+    )
+  )
+}

inst/components/scss/card.scss

@@ -31,6 +31,8 @@
     flex-direction: row;
     align-items: center;
     align-self: stretch;
+    min-height: 2.5rem;
+    padding-block: 4px;
     gap: 0.25rem;
 
     // Give the nav flex: 1 so that if the card header contains a nav, it will take all the available space

inst/components/scss/toolbar.scss

@@ -2,35 +2,84 @@
 .bslib-toolbar {
   display: flex;
   align-items: center;
+  gap: 0;
 
   /* ---- Toolbar options ---- */
 
   &[data-align="left"] {
     margin-right: auto;
+    justify-content: start;
   }
 
   &[data-align="right"] {
     margin-left: auto;
+    justify-content: end;
   }
 
   /* ---- Adjustments to other elements ---- */
 
   // Ensures uniformity of font sizing in elements and sub-elements (e.g., input select)    
   &,
   & * {
-    font-size: 0.8rem;
+    font-size: 0.9rem;
   }
 
   &>* {
     margin-bottom: 0 !important;
     width: auto;
     align-self: center;
   }
+}
+
+/* Toolbar Select Input */
+.bslib-toolbar-input-select {
+  // Decrease this to keep header slim and leave a margin between select & border
+  padding-block: 2px; 
+
+  .form-group.shiny-input-container {
+    width: auto;
+
+    select {
+      width: auto;
+    }
+  }
+
+  /* Remove the select label visually */
+  #select-label {
+    display: none;
+  }
+
+  /* Make children take width=auto to size to content */
+  &>* {
+    width: auto;
+  }
+
+  select {
+    appearance: auto;
+    padding-block: 3px; // Decreased to slim down select to fit in header
+    /* .form-controls takes away the drop-down arrow, this ensures it shows up */
+    border: none;
+    transition: background-color 120ms ease, color 120ms ease;
+  }
+
+  // Hover, active, and focus styling to highlight the select and options on interaction
+  // because default styles are disabled to make the input slimmer
+  & select:hover {
+    background-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.08);
+  }
+
+  & select:active {
+    background-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.16);
+  }
+
+  & select:focus,
+  select:focus-visible {
+    background-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.12);
+  }
 
-  // Card header is flex by default, but card footer is not and must be in order for
-  // toolbar alignment to work
-  .card-footer:has(> &) {
-    display: flex;
-    align-items: center;
+  & select option:hover,
+  & select option:focus,
+  & select option:checked {
+    background-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.12) !important;
   }
 }

tests/testthat/_snaps/toolbar.md

@@ -8,6 +8,16 @@
         Item 2
       </div>
 
+---
+
+    Code
+      show_raw_html(toolbar("Item 1", "Item 2", gap = "10px"))
+    Output
+      <div class="bslib-toolbar bslib-gap-spacing" data-align="right" gap="10px">
+        Item 1
+        Item 2
+      </div>
+
 # toolbar() aligns correctly
 
     Code
@@ -28,3 +38,20 @@
         Item 2
       </div>
 
+# toolbar_input_select() basic attributes and defaults
+
+    Code
+      show_raw_html(toolbar_input_select(id = "select", choices = c("Option 1",
+        "Option 2", "Option 3"), selected = "Option 2"))
+    Output
+      <div class="bslib-toolbar-input-select form-select-sm">
+        <div class="form-group shiny-input-container">
+          <label class="control-label shiny-label-null" for="select" id="select-label"></label>
+          <div>
+            <select class="shiny-input-select form-control" id="select"><option value="Option 1">Option 1</option>
+      <option value="Option 2" selected>Option 2</option>
+      <option value="Option 3">Option 3</option></select>
+          </div>
+        </div>
+      </div>
+

tests/testthat/helper-html.R

@@ -3,7 +3,7 @@ show_raw_html <- function(x) {
 }
 
 expect_snapshot_html <- function(x, .envir = parent.frame()) {
-  x_str <- deparse(substitute(x))
+  x_str <- deparse1(substitute(x))
   code <- parse(text = sprintf("expect_snapshot(show_raw_html(%s))", x_str))
   eval(code, envir = .envir)
 }

tests/testthat/test-toolbar.R

@@ -1,10 +1,14 @@
+# Tests for toolbar container #
 test_that("toolbar() basic attributes and defaults", {
   tb <- as.tags(toolbar(htmltools::span("Test")))
   expect_match(htmltools::tagGetAttribute(tb, "class"), "bslib-toolbar")
   expect_match(htmltools::tagGetAttribute(tb, "data-align"), "right")
   expect_snapshot_html(
     toolbar("Item 1", "Item 2")
   )
+  expect_snapshot_html(
+    toolbar("Item 1", "Item 2", gap = "10px")
+  )
 })
 
 test_that("toolbar() aligns correctly", {
@@ -18,3 +22,27 @@ test_that("toolbar() aligns correctly", {
   )
   expect_error(toolbar("x", align = "center"))
 })
+
+
+# Toolbar Input Select Tests #
+
+test_that("toolbar_input_select() basic attributes and defaults", {
+  tis <- as.tags(
+    toolbar_input_select(
+      id = "select",
+      choices = c("Option 1", "Option 2", "Option 3"),
+      selected = "Option 2"
+    )
+  )
+  expect_match(
+    htmltools::tagGetAttribute(tis, "class"),
+    "bslib-toolbar-input-select"
+  )
+  expect_snapshot_html(
+    toolbar_input_select(
+      id = "select",
+      choices = c("Option 1", "Option 2", "Option 3"),
+      selected = "Option 2"
+    )
+  )
+})