feat: Add toolbar buttons

DESCRIPTION

@@ -40,7 +40,8 @@ Imports:
     memoise (>= 2.0.1),
     mime,
     rlang,
-    sass (>= 0.4.9)
+    sass (>= 0.4.9),
+    shiny (>= 1.11.1.9000)
 Suggests:
     bsicons,
     curl,
@@ -52,7 +53,6 @@ Suggests:
     magrittr,
     rappdirs,
     rmarkdown (>= 2.7),
-    shiny (>= 1.11.1),
     testthat,
     thematic,
     tools,

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

@@ -4,25 +4,114 @@
 #' A toolbar which can contain buttons, inputs, and other UI elements in a small
 #' form suitable for inclusion in card headers, footers, and other small places.
 #'
+#' @examplesIf rlang::is_interactive()
+#' toolbar(
+#'   align = "right",
+#'   toolbar_input_button(id = "see", icon = icon("eye")),
+#'   toolbar_input_button(id = "save", icon = icon("save")),
+#'   toolbar_input_button(id = "edit", icon = icon("pencil"))
+#' )
+#'
 #' @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.
 #'
+#' @family Toolbar components
 #' @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 in a [toolbar()].
+#'
+#' @examplesIf rlang::is_interactive()
+#' toolbar(
+#'   align = "right",
+#'   toolbar_input_button(id = "see", icon = icon("eye")),
+#'   toolbar_input_button(id = "save", label = "Save")),
+#'   toolbar_input_button(id = "edit", icon = icon("pencil"), label="Edit")
+#' )
+#'
+#' @param id The input ID.
+#' @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
+#'   [shiny::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.
+#'
+#' @family Toolbar components
+#' @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
+    )
+  }
+  has_icon <- !is.null(icon)
+  has_label <- !is.null(label)
+
+  btn_type <-
+    if (has_icon && !has_label) {
+      "icon"
+    } else if (has_label && !has_icon) {
+      "label"
+    } else {
+      # Can't both be missing (checked above)
+      "both"
+    }
+
+  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" = btn_type,
+    ...
+  )
+
+  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,56 @@
 .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;
+  }
+
+  /* ---- 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
+  }
+
+  // Square icon-only buttons
+  .bslib-toolbar-input-button[data-type="icon"] {
+    height: var(--_icon-size, 2rem);
+    aspect-ratio: 1;
+    line-height: 1 !important; // Ensure no line-height interference
+
+    // Ensure icon is centered
+    >.action-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1; // Remove excess line-height
+      margin: 0; // Remove any default margins
+    }
   }
 
   /* ---- 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,91 @@
         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" data-type="label" id="label_only" type="button">
+        <span class="action-label">Click me</span>
+      </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">
+        <span class="action-icon">
+          <i class="far fa-star" role="presentation" aria-label="star icon"></i>
+        </span>
+      </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" data-type="both" id="both" type="button">
+        <span class="action-icon">
+          <i class="far fa-floppy-disk" role="presentation" aria-label="floppy-disk icon"></i>
+        </span>
+        <span class="action-label">Save</span>
+      </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" data-type="label" disabled id="disabled_btn" type="button">
+        <span class="action-label">Disabled</span>
+      </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" data-type="label" id="enabled_btn" type="button">
+        <span class="action-label">Enabled</span>
+      </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" data-type="label" id="no_border" type="button">
+        <span class="action-label">No Border</span>
+      </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" data-type="label" id="with_border" type="button">
+        <span class="action-label">With Border</span>
+      </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">
+          <span class="action-icon">
+            <i class="fas fa-question" role="presentation" aria-label="question icon"></i>
+          </span>
+        </button>
+      </bslib-tooltip>
+