feat: Add toolbar buttons

[elnelson575]

Fixes #1248

Adds buttons suitable for inclusion in toolbars.

Buttons:

• Inherit font sizing from their toolbar parent element
• Can have icons, text, or both
• Default to no border, but can have a border
• Can be deactivated or active

• Check & format toolbar.R
• Scss changes
• Add tests
• Example app
• Regenerate docs + check

To-do:

• Ensure that the toolbar doesn't change height based on button sizes, but that the buttons have a good default, legible size
• Make sure there's no awkward gap between icon and label
• Verify spacing between buttons is good
• Fix footer

Example with active/disabled button

Before click activate button:

library(shiny)
library(bslib)

ui <- page_fillable(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")
  ),
  card(
    card_header(
      icon("star"),
      "Card 1 header",
      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")),
        toolbar_input_button(
          id = "calendar",
          label = "Schedule",
          icon = icon("calendar"),
          disabled = TRUE
        )
      )
    ),
    p("Card 1 body"),
    actionButton("activate_schedule", "Activate Schedule"),
    max_height = "500px",
    card_footer(
      toolbar(
        align = "left",
        toolbar_input_button(id = "go", label = "Go"),
        toolbar_input_button(id = "Exit", label = "Exit")
      )
    )
  ),
  toolbar(
    align = "left",
    toolbar_input_button(
      id = "test2",
      icon = icon("star"),
      tooltip = "Favorite"
    ),
    toolbar_input_button(id = "love2", icon = icon("heart"), tooltip = "Like"),
    toolbar_input_button(
      id = "comment2",
      icon = icon("comment"),
      tooltip = "Comment"
    )
  ),
  card(
    card_header(
      "Card 2 header",
      toolbar(
        align = "right",
        downloadLink(
          "download2",
          "Download",
        )
      ),
    ),
    p("Card 2 body"),
    actionButton("activate_schedule2", "Activate Schedule"),
    max_height = "500px",
    card_footer(
      toolbar(
        align = "right",
        toolbar_input_button(
          id = "paragraph2",
          icon = icon("paragraph")
        )
      )
    )
  ),
  toolbar(
    align = "left",
    gap = "10",
    toolbar_input_button(id = "test", icon = icon("star")),
    toolbar_input_button(id = "love", icon = icon("heart")),
    toolbar_input_button(id = "comment", icon = icon("comment"))
  )
)

server <- function(input, output) {
  observeEvent(input$activate_schedule, {
    updateActionButton(
      inputId = "calendar",
      disabled = FALSE
    )
  })
}


shinyApp(ui = ui, server = server)

[gadenbuie]

Alternative, maybe we should put the icon in a <span class="toolbar-icon"> and then use this?

Suggested change

	>.fa,
	>.bi,
	>.glyphicon {
	> .toolbar-icon > * {

[gadenbuie]

Or if we require shiny (>= 1.11.1.9000) we could use .action-icon

https://github.com/rstudio/shiny/blob/e3cf4fb0892e091689f07fcf35b16da27e363f20/R/input-action.R#L61-L67

[gadenbuie]

The way to get there is roughly:

# In this PR
usethis::use_dev_package("shiny")

This adds a Remotes field to DESCRIPTION so that dev bslib uses dev shiny, plus a min version requirement on shiny.

Then after shiny v1.12.0 release, we'll update the record here in bslib.