feat: Add toolbar buttons

DESCRIPTION

@@ -115,6 +115,7 @@ Collate:
     'shiny-devmode.R'
     'sidebar.R'
     'staticimports.R'
+    'toolbar.R'
     'tooltip.R'
     'utils-deps.R'
     'utils-shiny.R'

NAMESPACE

@@ -152,6 +152,8 @@ export(toggle_popover)
 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

@@ -4,6 +4,9 @@
 
 * Added a new `input_submit_textarea()` input element, which is similar to `shiny::textAreaInput()`, but includes a submit button to only submit the text changes to the server on click. This is especially useful when the input text change triggers a long-running operation and/or the user wants to type longer-form input and review it before submitting it.
 
+* 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
 
 * `bs_theme_dependencies()` now avoids unnecessarily copying internal package files to R's temporary directory more than once when preparing precompiled theme dependencies (e.g. for a standard `bs_theme()` theme). (#1184)

R/toolbar.R

@@ -0,0 +1,77 @@
+#' Add a toolbar to a UI element
+#'
+#' @description
+#' 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.
+#'
+#' @param ... UI elements for the toolbar.
+#' @param align Determines if toolbar should be aligned to the right or left.
+#' Must be one of "right" or "left".
+#' @param size The size of the toolbar. Must be one of "sm", "md", or "lg".
+#'
+#' @return Returns a toolbar.
+#'
+#' @export
+toolbar <- function(
+  ...,
+  align = c("right", "left"),
+  size = c("sm", "md", "lg")
+) {
+  align <- rlang::arg_match(align)
+  size <- rlang::arg_match(size)
+
+  tag <- div(
+    class = "bslib-toolbar",
+    "data-align" = align,
+    "data-size" = size,
+    ...,
+    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 ... UI elements for the button.
+#' @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 border Whether to show a border around the button.
+#' @param disabled If `TRUE`, the button will not be clickable. Use `updateActionButton()` to dynamically enable/disable the button.
+#'
+#' @return Returns a button suitable for use in a toolbar.
+#'
+#' @export
+toolbar_input_button <- function(
+  id,
+  ...,
+  icon = NULL,
+  label = NULL,
+  border = FALSE,
+  disabled = FALSE
+) {
+  if (is.null(icon) && is.null(label)) {
+    stop(
+      "At least one of 'icon' or 'label' must be provided.",
+      call. = TRUE
+    )
+  }
+
+  shiny::actionButton(
+    id,
+    label = label,
+    icon = icon,
+    disabled = disabled,
+    class = "bslib-toolbar-input-button btn-sm",
+    class = if (!border) "border-0" else NULL,
+    ...
+  )
+}

inst/components/scss/toolbar.scss

@@ -0,0 +1,67 @@
+/* Toolbar */
+.bslib-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    /* Toolbar options */
+
+    &[data-align="left"] {
+        margin-right: auto;
+        align-items: flex-start;
+    }
+
+    &[data-align="right"] {
+        margin-left: auto;
+        align-items: flex-end;
+    }
+
+    &[data-size="sm"] {
+        font-size: 0.8rem;
+
+        & > * {
+            font-size: 0.8rem;
+        }
+    }
+
+    &[data-size="md"] {
+        font-size: 1rem;
+
+        & > * {
+            font-size: 1rem;
+        }
+    }
+
+    &[data-size="lg"] {
+        font-size: 1.25rem;
+
+        & > * {
+            font-size: 1.25rem;
+        }
+    }
+
+    /* Adjustments to other elements */
+
+    &,
+    &>* {
+        margin-bottom: 0 !important;
+        width: auto;
+    }
+
+    /* Ensures that inputs inherit the formatting of the toolbar and align correctly */
+    >.form-group.shiny-input-container, .form-group.shiny-input-container>* {
+        width: auto;
+        margin-bottom: 0;
+        min-width: 0;
+    }
+
+    /* Ensure card headers with toolbars use flexbox for alignment */
+    .card-header:has(> &) {
+        display: flex;
+        align-items: center;
+    }
+    .card-footer:has(> &) {
+        display: flex;
+        align-items: center;
+    }
+}

tests/testthat/_snaps/toolbar.md

@@ -0,0 +1,64 @@
+# toolbar() markup snapshots
+
+    Code
+      show_raw_html(toolbar("Item 1", "Item 2"))
+    Output
+      <div class="bslib-toolbar" data-align="right" data-size="sm">
+        Item 1
+        Item 2
+      </div>
+
+---
+
+    Code
+      show_raw_html(toolbar("Item 1", "Item 2", align = "left"))
+    Output
+      <div class="bslib-toolbar" data-align="left" data-size="sm">
+        Item 1
+        Item 2
+      </div>
+
+---
+
+    Code
+      show_raw_html(toolbar("Item 1", "Item 2", size = "md"))
+    Output
+      <div class="bslib-toolbar" data-align="right" data-size="md">
+        Item 1
+        Item 2
+      </div>
+
+# toolbar_input_button() markup snapshots
+
+    Code
+      show_raw_html(toolbar_input_button(id = "btn1", label = "Click me"))
+    Output
+      <button class="btn btn-default action-button bslib-toolbar-input-button btn-sm border-0" id="btn1" type="button">Click me</button>
+
+---
+
+    Code
+      show_raw_html(toolbar_input_button(id = "btn2", icon = shiny::icon("star")))
+    Output
+      <button class="btn btn-default action-button bslib-toolbar-input-button btn-sm border-0" id="btn2" type="button">
+        <i class="far fa-star" role="presentation" aria-label="star icon"></i>
+      </button>
+
+---
+
+    Code
+      show_raw_html(toolbar_input_button(id = "btn3", label = "Save", icon = shiny::icon(
+        "save")))
+    Output
+      <button class="btn btn-default action-button bslib-toolbar-input-button btn-sm border-0" id="btn3" type="button">
+        <i class="far fa-floppy-disk" role="presentation" aria-label="floppy-disk icon"></i>
+        Save
+      </button>
+
+---
+
+    Code
+      show_raw_html(toolbar_input_button(id = "btn4", label = "Delete", class = "btn-danger"))
+    Output
+      <button class="btn btn-default action-button bslib-toolbar-input-button btn-sm border-0 btn-danger" id="btn4" type="button">Delete</button>
+