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

Fixes card headers so they are flex by default, ensures nav_spacer also works in card headers.
--------------------------------
Co-authored-by: Garrick Aden-Buie <[email protected]>
Co-authored-by: elnelson575 <[email protected]>

Author: elnelson575

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)),
+      ...
+    )
   )
 }
 

R/sysdata.rda

@@ -27,6 +27,24 @@
   }
 
   .card-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: stretch;
+    gap: 0.25rem;
+    
+    // Give the nav flex: 1 so that if the card header contains a nav, it will take all the available space
+    // and correctly push items to the right if `nav_spacer` is used
+    > .nav {
+      flex: 1;
+      min-width: 0; // Prevent flex item from overflowing
+    }
+    
+    // Ensures that nav_spacer() correctly pushes subsequent items to the right in card headers
+    > .bslib-nav-spacer {
+        margin-left: auto;
+    }
+
     .form-group {
       margin-bottom: 0;
     }

inst/components/dist/components.css

@@ -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>