Add missing sidebar stylesheet dep (#667)

Author: schloerke

CHANGELOG.md

@@ -12,6 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+* Fixed #666: Added missing sidebar stylesheet dependency. (#667)
+
 ### Other changes
 
 

e2e/bugs/0666-sidebar/app.py

@@ -0,0 +1,32 @@
+from colors import bg_color, fg_color
+
+from shiny import App, ui
+
+app_ui = ui.page_fluid(
+    ui.tags.style(
+        f"""
+        :root .bslib-sidebar-layout {{
+            --bslib-sidebar-bg: {bg_color};
+            --bslib-sidebar-fg: {fg_color};
+        }}
+        """
+    ),
+    ui.layout_sidebar(
+        ui.panel_sidebar("`main` - Sidebar content", id="main-sidebar"),
+        ui.panel_main("`main` - Main content", id="main-content"),
+    ),
+    # # Can not use X sidebar as only one htmldependency wins.
+    # import shiny.experimental as x
+    # x.ui.layout_sidebar(
+    #     x.ui.sidebar(
+    #         "`x` - Sidebar content",
+    #         open="always",
+    #         width=f"{int(4 / 12 * 100)}%",
+    #         id="x-sidebar",
+    #     ),
+    #     "`x` - Main content",
+    #     id="x-content",
+    # ),
+)
+
+app = App(app_ui, None)

e2e/bugs/0666-sidebar/colors.py

@@ -0,0 +1,4 @@
+# Must use resolved rgb colors
+
+bg_color: str = "rgb(0, 100, 0)"  # `darkgreen`
+fg_color: str = "rgb(254, 254, 254)"  # ~`white` - 1

e2e/bugs/0666-sidebar/test_sidebar_colors.py

@@ -0,0 +1,36 @@
+from __future__ import annotations
+
+from colors import bg_color, fg_color
+from conftest import ShinyAppProc
+from playwright.sync_api import Page, expect
+
+
+def test_colors_are_rgb() -> None:
+    assert bg_color.startswith("rgb(")
+    assert fg_color.startswith("rgb(")
+
+
+def test_sidebar_bg_colors(page: Page, local_app: ShinyAppProc) -> None:
+    page.goto(local_app.url)
+
+    main_content = page.locator("#main-content")
+    main_sidebar = page.locator("#main-sidebar")
+    main_layout = main_sidebar.locator("..")
+
+    # x_content = page.locator("#x-content")
+    # x_sidebar = page.locator("#x-sidebar")
+    # x_layout = x_sidebar.locator("..")
+
+    expect(main_layout).to_have_attribute("data-bslib-sidebar-open", "always")
+    # expect(x_layout).to_have_attribute("data-bslib-sidebar-open", "always")
+
+    expect(main_content).to_have_text("`main` - Main content")
+    # expect(x_content).to_have_text("`x` - Main content")
+    expect(main_sidebar).to_have_text("`main` - Sidebar content")
+    # expect(x_sidebar).to_have_text("`x` - Sidebar content")
+
+    # Only works if css file is loaded
+    expect(main_sidebar).to_have_css("background-color", bg_color)
+    # expect(x_sidebar).to_have_css("background-color", bg_color)
+    expect(main_sidebar).to_have_css("color", fg_color)
+    # expect(x_sidebar).to_have_css("color", fg_color)

shiny/ui/_x/_htmldeps.py

@@ -34,6 +34,7 @@ def sidebar_dependency() -> HTMLDependency:
             "subdir": _x_sidebar_path,
         },
         script={"src": "sidebar.min.js"},
+        stylesheet={"href": "sidebar.css"},
         all_files=True,
     )