fix(nav_panel): Add .bslib-gap-spacing if nav panel is fillable (#1154)

Author: gadenbuie

CHANGELOG.md

@@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * Fixed `input_task_button` not working in a Shiny module. (#1108)
 * Fixed several issues with `page_navbar()` styling. (#1124)
 * Fixed `Renderer.output_id` to not contain the module namespace prefix, only the output id. (#1130)
+* Fixed gap-driven spacing between children in fillable `nav_panel()` containers. (#1152)
 
 ### Other changes
 

shiny/ui/_navs.py

@@ -1140,8 +1140,9 @@ def _make_tabs_fillable(
             padding=as_css_padding(padding),
             __bslib_navbar_margin="0;" if navbar else None,
         )
-        child.add_style(cast(str, styles))
         child = as_fillable_container(as_fill_item(child))
+        child.add_style(cast(str, styles))
+        child.add_class("bslib-gap-spacing")
 
         content.children[i] = child
 

tests/pytest/test_navs.py

@@ -19,19 +19,20 @@ def private_seed_n(n: int = 0) -> Generator[None, None, None]:
         yield
 
 
-def test_nav_markup():
-    a = ui.nav_panel("a", "a")
-    b = ui.nav_panel("b", "b")
-    c = ui.nav_panel("c", "c")
-    menu = ui.nav_menu(
-        "Menu",
-        c,
-        "----",
-        "Plain text",
-        "----",
-        ui.nav_control("Other item"),
-    )
+a = ui.nav_panel("a", "a")
+b = ui.nav_panel("b", "b")
+c = ui.nav_panel("c", "c")
+menu = ui.nav_menu(
+    "Menu",
+    c,
+    "----",
+    "Plain text",
+    "----",
+    ui.nav_control("Other item"),
+)
+
 
+def test_navset_tab_markup():
     with private_seed_n():
         x = ui.navset_tab(a, b, ui.nav_control("Some item"), menu)
 
@@ -65,6 +66,8 @@ def test_nav_markup():
         </div>"""
     )
 
+
+def test_navset_pill_markup():
     with private_seed_n():
         x = ui.navset_pill(menu, a, id="navset_pill_id")
 
@@ -93,6 +96,8 @@ def test_nav_markup():
         </div>"""
     )
 
+
+def test_navset_card_pill_markup():
     with private_seed_n():
         x = ui.navset_card_pill(
             a,
@@ -124,15 +129,17 @@ def test_nav_markup():
           </div>
           <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">
             <div class="tab-content html-fill-item html-fill-container" data-tabsetid="7311">
-              <div class="tab-pane html-fill-item html-fill-container" role="tabpanel" data-value="a" id="tab-7311-0" style="gap:0;padding:0;">a</div>
-              <div class="tab-pane active html-fill-item html-fill-container" role="tabpanel" data-value="c" id="tab-7890-0" style="gap:0;padding:0;">c</div>
-              <div class="tab-pane html-fill-item html-fill-container" role="tabpanel" data-value="b" id="tab-7311-2" style="gap:0;padding:0;">b</div>
+              <div class="tab-pane html-fill-item html-fill-container bslib-gap-spacing" role="tabpanel" data-value="a" id="tab-7311-0" style="gap:0;padding:0;">a</div>
+              <div class="tab-pane active html-fill-item html-fill-container bslib-gap-spacing" role="tabpanel" data-value="c" id="tab-7890-0" style="gap:0;padding:0;">c</div>
+              <div class="tab-pane html-fill-item html-fill-container bslib-gap-spacing" role="tabpanel" data-value="b" id="tab-7311-2" style="gap:0;padding:0;">b</div>
             </div>
           </div>
           <script data-bslib-card-init="">window.bslib.Card.initializeAllCards();</script>
         </div>"""
     )
 
+
+def test_navset_bar_markup():
     with private_seed_n():
         x = ui.navset_bar(
             ui.nav_menu("Menu", "Plain text", c),
@@ -164,7 +171,7 @@ def test_nav_markup():
         <div class="container-fluid html-fill-item html-fill-container">
           Page header
           <div class="tab-content html-fill-item html-fill-container" data-tabsetid="7311">
-            <div class="tab-pane active html-fill-item html-fill-container" role="tabpanel" data-value="c" id="tab-7890-1" style="--bslib-navbar-margin:0;;">c</div>
+            <div class="tab-pane active html-fill-item html-fill-container bslib-gap-spacing" role="tabpanel" data-value="c" id="tab-7890-1" style="--bslib-navbar-margin:0;;">c</div>
           </div>
           Page footer
         </div>"""