fix(card header): Make card header flex by default (#1253)

[elnelson575]

This PR makes card headers flex by default, with equivalent settings to .hstack.

This makes it much easier to organize complex inputs in headers with vanilla formatting or using other spacing utils to control how the items are spaced within the header.

We are not adding this to footers because it seems like footers are more likely to be longer blocks of text, like figure captions, footnotes, etc.

Minor breakage is possible for people currently expecting vertically stacked inputs in headers, however based on a quick survey of publicly available code on GitHub, this seems to be a very, very small population.

An example with a few inputs in a header:

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",
            actionButton("go", "Go", class = "btn-sm"),
            actionButton("edit", "Edit", class = "btn-sm"),
            checkboxInput("checkbox", "Checkbox", value = FALSE),
        ),
        p("Card 1 body"),
        sliderInput("slider", "Slider", 0, 10, 5),
        max_height = "500px",
        card_footer(
            p(
                "lots of text here, texting text, real text that makes you think, text that texts, but doesn't text
            because it does not possess fingers, text that sits on the page and doesn't really do more than that,
            text that thwarts autocomplete because it is unexpected. Text."
            )
        ),
    )
)

server <- function(input, output) {}


shinyApp(ui = ui, server = server)

An example with ms-auto pushing the second part of the header to the far right:

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",
            actionButton("go", "Go", class = "ms-auto btn-sm border-0"),
        ),
        p("Card 1 body"),
        sliderInput("slider", "Slider", 0, 10, 5),
        max_height = "500px",
        card_footer(
            p(
                "lots of text here, texting text, real text that makes you think, text that texts, but doesn't text
            because it does not possess fingers, text that sits on the page and doesn't really do more than that,
            text that thwarts autocomplete because it is unexpected. Text."
            )
        ),
    )
)

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

[gadenbuie]

.bslib-gap-spacing primarily serves to remove margin-bottom as the primary way to space out elements, i.e. we're in a context where gap controls spacing.

bslib/inst/bslib-scss/spacer.scss

Lines 22 to 32 in 07552c8

	.bslib-gap-spacing {
	gap: var(--bslib-mb-spacer);
	&,
	& > .shiny-html-output,
	& > .shiny-panel-conditional {
	> .bslib-mb-spacing, > .form-group, > p, > pre {
	margin-bottom: 0;
	}
	}
	}

[gadenbuie]

All good to merge once the last couple details are handled

[gadenbuie]

Oh this is interesting! These snapshots are generated in the navset docs, specifically in man/fragments/ex-navset_tab.Rmd which end up at https://rstudio.github.io/bslib/reference/navset.html#navset-card-tab-

This change indicates that we'll need to review navset_card_tab() and we will likely end up needing to adjust the CSS rules for navset cards. Can you look into this?