Skip to content

Conversation

@elnelson575
Copy link
Contributor

@elnelson575 elnelson575 commented Nov 17, 2025

Fixes #1249

Toolbar Input Selects should:

  • Be single select with selectize=False
  • Be slim enough to fit in a card header without altering the height
  • Use the default behavior for dropdowns
  • Have hover and select highlighting in light mode and in dark mode
  • Accomodate all methods of specifying choices
Screenshot 2025-11-24 at 4 54 04 PM Screenshot 2025-11-24 at 4 53 36 PM
library(shiny)
library(bslib)

ui <- page_fillable(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")
  ),
  card(
    card_header(
      "Card 1 header",
      toolbar(
        align = "right",
        shiny::downloadLink("download", "Download"),
        toolbar_input_select(
          id = "select",
          choices = c("Option 1", "Option 2", "Option 3"),
          selected = "Option 2"
        ),
        toolbar_input_select(
          id = "select_state",
          choices = list(
            `East Coast` = list("NY", "NJ", "CT"),
            `West Coast` = list("WA", "OR", "CA"),
            `Midwest` = list("MN", "WI", "IA")
          ),
          selected = "NY"
        ),
        input_dark_mode(id = "togglesm", class = "btn-xs border-0")
      )
    ),
    p("Card 1 body"),
    sliderInput("slider", "Slider", 0, 10, 5),
    max_height = "500px",
    card_footer(
      toolbar(
        align = "left",
        toolbar_input_select(
          id = "select_footer",
          choices = c("A" = "a", "B" = "b", "C" = "c"),
          selected = "B"
        )
      )
    )
  ),
  toolbar(
    align = "right",
    actionButton("test", NULL, icon = icon("calendar"), class = "btn-sm"),
    actionButton("test2", NULL, icon = icon("pencil"), class = "btn-sm")
  )
)

server <- function(input, output) {}


shinyApp(ui = ui, server = server)

elnelson575 and others added 30 commits November 3, 2025 11:02
Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>
Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>
Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>
Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>
Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>
@elnelson575 elnelson575 changed the title Feat/toolbar input select feat: Add toolbar input select Nov 24, 2025
@elnelson575 elnelson575 marked this pull request as ready for review November 24, 2025 21:57
flex-direction: row;
align-items: center;
align-self: stretch;
min-height: 2.5rem;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is only to match what we currently have in the buttons PR

.bslib-toolbar {
display: flex;
align-items: center;
gap: 0;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same with these changes to toolbar.scss for the .bslib-toolbar (Also just to match what's in buttons)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants