diff --git a/CHANGELOG.md b/CHANGELOG.md index c2780058c..1da38ae77 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/e2e/bugs/0666-sidebar/app.py b/e2e/bugs/0666-sidebar/app.py new file mode 100644 index 000000000..ee6e79d3a --- /dev/null +++ b/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) diff --git a/e2e/bugs/0666-sidebar/colors.py b/e2e/bugs/0666-sidebar/colors.py new file mode 100644 index 000000000..c7b803d10 --- /dev/null +++ b/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 diff --git a/e2e/bugs/0666-sidebar/test_sidebar_colors.py b/e2e/bugs/0666-sidebar/test_sidebar_colors.py new file mode 100644 index 000000000..286638ba7 --- /dev/null +++ b/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) diff --git a/shiny/ui/_x/_htmldeps.py b/shiny/ui/_x/_htmldeps.py index daa7efccb..30f6914df 100644 --- a/shiny/ui/_x/_htmldeps.py +++ b/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, )