feat: Add toolbar buttons

NAMESPACE

@@ -163,6 +163,7 @@ export(toggle_sidebar)
 export(toggle_switch)
 export(toggle_tooltip)
 export(toolbar)
+export(toolbar_input_button)
 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_button()` for easily creating buttons to include in a `toolbar()`. (#1248)
 
 ## Improvements and bug fixes
 

R/toolbar.R

@@ -7,22 +7,82 @@
 #' @param ... UI elements for the toolbar.
 #' @param align Determines if toolbar should be aligned to the `"right"` or
 #'   `"left"`.
+#' @param gap A CSS length unit defining the gap (i.e., spacing) between
+#'   elements in the toolbar. Defaults to `0` (no gap).
 #' @return Returns a toolbar element.
 #'
 #' @export
 toolbar <- function(
   ...,
-  align = c("right", "left")
+  align = c("right", "left"),
+  gap = NULL
 ) {
   align <- rlang::arg_match(align)
+  gap <- validateCssUnit(gap)
 
   tag <- div(
     class = "bslib-toolbar bslib-gap-spacing",
     "data-align" = align,
+    style = css(gap = gap),
     ...,
     component_dependencies()
   )
 
   tag_require(tag, version = 5, caller = "toolbar()")
   as_fragment(tag)
 }
+
+#' Add toolbar button input
+#'
+#' @description
+#' A button designed to fit well in small places such as toolbars.
+#'
+#' @param id The `input` slot that will be used to access the value.
+#' @param icon An icon to display in the button.
+#' (One of icon or label must be supplied.)
+#' @param label The label to display in the button.
+#' (One of icon or label must be supplied.)
+#' @param tooltip An optional tooltip to display when hovering over the button.
+#' @param disabled If `TRUE`, the button will not be clickable.
+#' Use `updateActionButton()` to dynamically enable/disable the button.
+#' @param border Whether to show a border around the button.
+#' @param ... UI elements for the button.
+#'
+#' @return Returns a button suitable for use in a toolbar.
+#'
+#' @export
+toolbar_input_button <- function(
+  id,
+  icon = NULL,
+  label = NULL,
+  tooltip = NULL,
+  ...,
+  disabled = FALSE,
+  border = FALSE
+) {
+  if (is.null(icon) && is.null(label)) {
+    stop(
+      "At least one of 'icon' or 'label' must be provided.",
+      call. = TRUE
+    )
+  }
+
+  # Determine if this is an icon-only button
+  is_icon_only <- !is.null(icon) && is.null(label)
+
+  button <- shiny::actionButton(
+    id,
+    label = label,
+    icon = icon,
+    disabled = disabled,
+    class = "bslib-toolbar-input-button btn-sm",
+    class = if (!border) "border-0" else "border-1",
+    "data-type" = if (is_icon_only) "icon",
+    ...
+  )
+
+  if (!is.null(tooltip)) {
+    button <- tooltip(button, tooltip, placement = "bottom")
+  }
+  button
+}

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,59 @@
 .bslib-toolbar {
   display: flex;
   align-items: center;
+  gap: 0;
+  max-height: var(--_size); // Match approximate card header text height so it doesn't expand beyond normal
 
   /* ---- Toolbar options ---- */
 
   &[data-align="left"] {
     margin-right: auto;
+    justify-content: start;
   }
 
   &[data-align="right"] {
     margin-left: auto;
+    justify-content: end;
+  }
+
+  /* ---- Toolbar Input Buttons ---- */
+
+  // Keep labels and icons centered in the button
+  .bslib-toolbar-input-button {
+    align-items: center;
+    justify-content: center;
+    line-height: 1; // Override Bootstrap's line-height to avoid too much vertical space
+
+    // Ensure icon is centered
+    >.fa,
+    >.bi,
+    >.glyphicon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1; // Remove excess line-height
+      margin: 0; // Remove any default margins
+    }
+  }
+
+  // Square icon-only buttons
+  .bslib-toolbar-input-button[data-type="icon"] {
+    height: var(--_size);
+    aspect-ratio: 1;
+    line-height: 1 !important; // Ensure no line-height interference
   }
 
   /* ---- 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;
   }
-
-  // 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;
-  }
 }

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" style="gap:10px;">
+        Item 1
+        Item 2
+      </div>
+
 # toolbar() aligns correctly
 
     Code
@@ -28,3 +38,75 @@
         Item 2
       </div>
 
+# toolbar_input_button() has correct attributes
+
+    Code
+      show_raw_html(toolbar_input_button(id = "label_only", label = "Click me"))
+    Output
+      <button class="btn btn-default action-button bslib-toolbar-input-button btn-sm border-0" id="label_only" type="button">Click me</button>
+
+---
+
+    Code
+      show_raw_html(toolbar_input_button(id = "icon_only", icon = shiny::icon("star")))
+    Output
+      <button class="btn btn-default action-button bslib-toolbar-input-button btn-sm border-0" data-type="icon" id="icon_only" type="button">
+        <i class="far fa-star" role="presentation" aria-label="star icon"></i>
+      </button>
+
+---
+
+    Code
+      show_raw_html(toolbar_input_button(id = "both", label = "Save", icon = shiny::icon(
+        "save")))
+    Output
+      <button class="btn btn-default action-button bslib-toolbar-input-button btn-sm border-0" id="both" type="button">
+        <i class="far fa-floppy-disk" role="presentation" aria-label="floppy-disk icon"></i>
+        Save
+      </button>
+
+# toolbar_input_button() disabled parameter
+
+    Code
+      show_raw_html(toolbar_input_button(id = "disabled_btn", label = "Disabled",
+        disabled = TRUE))
+    Output
+      <button class="btn btn-default action-button bslib-toolbar-input-button btn-sm border-0" disabled id="disabled_btn" type="button">Disabled</button>
+
+---
+
+    Code
+      show_raw_html(toolbar_input_button(id = "enabled_btn", label = "Enabled",
+        disabled = FALSE))
+    Output
+      <button class="btn btn-default action-button bslib-toolbar-input-button btn-sm border-0" id="enabled_btn" type="button">Enabled</button>
+
+# toolbar_input_button() border parameter
+
+    Code
+      show_raw_html(toolbar_input_button(id = "no_border", label = "No Border",
+        border = FALSE))
+    Output
+      <button class="btn btn-default action-button bslib-toolbar-input-button btn-sm border-0" id="no_border" type="button">No Border</button>
+
+---
+
+    Code
+      show_raw_html(toolbar_input_button(id = "with_border", label = "With Border",
+        border = TRUE))
+    Output
+      <button class="btn btn-default action-button bslib-toolbar-input-button btn-sm border-1" id="with_border" type="button">With Border</button>
+
+# toolbar_input_button() tooltip parameter
+
+    Code
+      show_raw_html(toolbar_input_button(id = "tooltip_icon", icon = shiny::icon(
+        "question"), tooltip = "Help"))
+    Output
+      <bslib-tooltip placement="bottom" bsOptions="[]" data-require-bs-version="5" data-require-bs-caller="tooltip()">
+        <template>Help</template>
+        <button class="btn btn-default action-button bslib-toolbar-input-button btn-sm border-0" data-type="icon" id="tooltip_icon" type="button">
+          <i class="fas fa-question" role="presentation" aria-label="question icon"></i>
+        </button>
+      </bslib-tooltip>
+

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), collapse = " ")
   code <- parse(text = sprintf("expect_snapshot(show_raw_html(%s))", x_str))
   eval(code, envir = .envir)
 }