feat: Add toolbar spacer

[elnelson575]

Fixes #1259

Goal:
Give users control over spacing in toolbars.
Enable both:

• Dividers with lines
• Spacers that are blank

Allow users to:

• Change width of blank spacer
• Change width of spacer with divider (via the spacing around the line)
• Change width of divider line (via function arg)
• Change color of divider line (via bootstrap var, defaults to the border color)

Additional Considerations:

• Should not read anything in VoiceOver (verified)
• Should work if switched to dark mode

Dark Mode Verification

Decision Log:
How to we want to make a toolbar like this particular (split) case?

This can be accomplished right now via creating two toolbars, one with align = "left" and one with align = "right".
Question: Should we make it possible such that you have ONE toolbar (vs two with different alignments) and put a spacer in the middle to split half of it to the left and half of it to the right?
No. In the future, we could consider creating an align="stretch" if we wanted to enable this, but for now, let's just go with the two toolbars.

Example App:

Code

library(shiny)
library(bslib)

ui <- page_fillable(
  h2("Toolbar Divider Examples"),

  layout_columns(
    # Example 1: Divider and gap widths
    card(
      card_header(
        "Dividers (Default and Custom Width)",
        toolbar(
          toolbar_input_button(
            id = "btn1",
            label = "Home",
            icon = icon("home")
          ),
          toolbar_divider(), # Default divider
          toolbar_input_button(
            id = "btn2",
            label = "Settings",
            icon = icon("gear")
          ),
          toolbar_divider(gap = "4rem"), # Custom gap
          toolbar_input_button(
            id = "btn3",
            label = "Notifications",
            icon = icon("bell"),
          ),
          toolbar_divider(width = "4px"), # Custom divider width
          toolbar_input_button(
            id = "btn4",
            label = "Profile",
            icon = icon("user")
          ),
          # Custom divider width and gap
          toolbar_divider(width = "4px", gap = "4rem")
        )
      ),
      pre(code(
        "toolbar(
          toolbar_input_button('btn1', 'Home', icon('home')),
          toolbar_divider(), # Default divider
          toolbar_input_button('btn2', 'Settings', icon('gear')),
          toolbar_divider(gap = '4rem'), # Custom gap
          toolbar_input_button('btn3', 'Notifications', icon('bell')),
          toolbar_divider(width = '4px'), # Custom divider width
          toolbar_input_button('btn4', 'Profile', icon('user')),
          # Custom divider width and gap
          toolbar_divider(width = '4px', gap = '4rem')
        )"
      )),
    ),

    # Example 2: And now in a footer
    card(
      card_header(
        "All the excitement is in the footer",
      ),
      pre(code(
        "toolbar(
          toolbar_input_button('btn1f', 'Home', icon('home')),
          toolbar_divider(),
          toolbar_input_button('btn2f', 'Settings', icon('gear')),
          toolbar_divider(gap = '4rem'),
          toolbar_input_button('btn3f', 'Notifications', icon('bell')),
          toolbar_divider(width = '4px'),
          toolbar_input_button('btn4f', 'Profile', icon('user')),
          toolbar_divider(width = '4px', gap = '4rem')
)"
      )),
      card_footer(
        toolbar(
          toolbar_input_button(
            id = "btn1f",
            label = "Home",
            icon = icon("home")
          ),
          toolbar_divider(), # Default divider
          toolbar_input_button(
            id = "btn2f",
            label = "Settings",
            icon = icon("gear")
          ),
          toolbar_divider(gap = "4rem"), # Custom gap
          toolbar_input_button(
            id = "btn3f",
            label = "Notifications",
            icon = icon("bell")
          ),
          toolbar_divider(width = "4px"), # Custom divider width
          toolbar_input_button(
            id = "btn4f",
            label = "Profile",
            icon = icon("user")
          ),
          # Custom divider width and gap
          toolbar_divider(width = "4px", gap = "4rem")
        )
      )
    ),
  ),

  # Example 3: Split toolbars and gap spacing
  card(
    card_header(
      toolbar(
        align = "left",
        toolbar_input_button(
          id = "add",
          label = "Add",
          icon = icon("plus"),
        ),
        toolbar_divider(),
        toolbar_input_button(
          id = "remove",
          label = "Remove",
          icon = icon("minus"),
        )
      ),
      toolbar(
        align = "right",
        toolbar_input_button(id = "save", label = "Save", icon = icon("save")),
        toolbar_divider(width = "0px", gap = "2rem"),
        toolbar_input_button(
          id = "edit",
          label = "Edit",
          icon = icon("pencil")
        ),
        toolbar_divider(width = "0px", gap = "2rem"),
        toolbar_input_button(
          id = "delete",
          label = "Delete",
          icon = icon("trash")
        )
      )
    ),
    p("This example shows split toolbars with gap spacing between buttons."),
    pre(code(
      "toolbar(
        align = 'right',
        gap = '0.5rem',
        toolbar_input_button(id = 'save', label = 'Save', icon = icon('save')),
        toolbar_divider(width = '0px', gap = '2rem'),
        toolbar_input_button(id = 'edit', label = 'Edit', icon = icon('pencil')),
        toolbar_divider(width = '0px', gap = '2rem'),
        toolbar_input_button(id = 'delete', label = 'Delete', icon = icon('trash'))
      )"
    ))
  )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

Remaining To-Do:

• Check unit test coverage
• Add an entry to NEWS.md concisely describing what you changed.

[gadenbuie]

Looking good! A few minor comments about CSS variables and how we can use them, plus one big "maybe we should rename this function" style question to consider.

[gadenbuie]

Looks great, just one more tiny update to use the same pattern for the divider color that we're already using for height and width.

I could see an argument for letting users set the divider color in toolbar_divider() -- e.g. if you have a fixed header color and want a specific divider color to work with that color -- but I'll let you decide if it's worth adding.

Feel free to merge when you're ready!