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

NEWS.md

@@ -6,6 +6,8 @@
 
 ## Improvements and bug fixes
 
+* `card_header()` is now flex by default and gains a `gap` argument to better support complex header layouts. (#1253)
+
 * `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)
 
 * Fixed an issue where the `<main>` areas of `page_sidebar()` and `page_navbar()` (with a `sidebar`) were made to be a fillable containers even when `fillable = FALSE`. (#1188)

R/card.R

@@ -244,9 +244,19 @@ card_title <- function(..., container = htmltools::h5) {
 #' @describeIn card_body A header (with border and background color) for the `card()`. Typically appears before a `card_body()`.
 #' @param container a function that generates an [htmltools tag][htmltools::tags].
 #' @export
-card_header <- function(..., class = NULL, container = htmltools::div) {
+card_header <- function(
+  ...,
+  gap = NULL,
+  class = NULL,
+  container = htmltools::div
+) {
   as.card_item(
-    container(class = "card-header", class = class, ...)
+    container(
+      class = "card-header bslib-gap-spacing",
+      class = class,
+      style = css(gap = validateCssUnit(gap)),
+      ...
+    )
   )
 }
 

inst/components/scss/card.scss

@@ -27,6 +27,20 @@
   }
 
   .card-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: stretch;
+    gap: 0.25rem;
+
+    // Only give the nav flex: 1 if it contains a nav_spacer so that it properly pushes items
+    // to the right. If there is no nav_spacer, we want it the nav to flex with other items
+    // in the header naturally.
+    > .nav:has(.bslib-nav-spacer) {
+      flex: 1;
+      min-width: 0; // Prevent flex item from overflowing
+    }
+
     .form-group {
       margin-bottom: 0;
     }

inst/components/scss/nav_spacer.scss

@@ -1,6 +1,9 @@
 /* CSS behind nav_spacer() */
+
 @mixin nav-spacer() {
-  .nav:not(.nav-hidden) {
+
+  .nav:not(.nav-hidden),
+  .card-header {
     /* Make sure nav container is flexbox (they aren't in BS3) */
     display: flex !important;
     display: -webkit-flex !important;
@@ -28,6 +31,7 @@
   }
 }
 
+
 /* BS4+ uses this mixin for configurable breakpoints */
 @if mixin-exists("media-breakpoint-up") {
   @include media-breakpoint-up(sm) {

tests/testthat/_snaps/card.md

@@ -29,7 +29,7 @@
         "https://example.com/image.jpg"), card_body("image not a cap")))
     Output
       <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-require-bs-caller="card()" data-require-bs-version="5">
-        <div class="card-header">header</div>
+        <div class="card-header bslib-gap-spacing">header</div>
         <img src="https://example.com/image.jpg" alt="" class="img-fluid"/>
         <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">image not a cap</div>
         <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>