posit-dev / py-shinyswatch

Bootswatch themes for py-shiny
https://posit-dev.github.io/py-shinyswatch/
MIT License
27 stars 3 forks source link

Shinyswatch doesn't play nice with new sidebar #15

Closed gshotwell closed 1 year ago

gshotwell commented 1 year ago

This doesn't change the styles of the sidebar:

from shiny import App, render, ui
import shinyswatch

app_ui = ui.page_fluid(
    ui.panel_title(window_title="Jags App Title", title="App Front-End Interface"),
    ui.layout_sidebar(
        ui.panel_sidebar(
            ui.h1("User Inputs Pane"),
            ui.input_select(
                "state",
                "Select State",
                [None, "AL", "AZ", "CA", "GA", "IL"],
            ),
            width=2,
        ),
        ui.panel_main(
            ui.h5("Selections"),
            ui.output_text("state_selection"),
        ),
    ),
)

def server(input, output, session):
    @output
    @render.text
    def state_selection():
        return input.state()

app = App(app_ui, server)
gadenbuie commented 1 year ago

It looks like there are three issues at play here. The first two are probably solved by a dependency update pass and the third might require a little bit of work in py-shinyswatch.

  1. Currently, py-shinyswatch includes the sidebar CSS in the bootstrap bundle. bslib recently moved to component-specific dependencies, and there may be potential for the bundled rules to be in conflict with the latest sidebar CSS rules (unfortunately this doesn't fully explain the weirdness, hence the may).

  2. The recently added --bslib-spacer variables and utility classes are important to the style and spacing of the sidebar and aren't currently included (although they're in the pipeline). Some details in https://github.com/rstudio/bslib/pull/725

  3. The default sidebar colors should probably be set for each Bootswatch theme, if possible. Use ---bslib-sidebar-bg and --bslib-sidebar-fg to set the default colors, scoped to .bslib-sidebar-layout. If scoping these properties is an issue we can consider moving them to :root.

schloerke commented 1 year ago

Reprex app with updated h levels, superhero theme, and expected screenshots:

from shiny import App, render, ui

import shinyswatch

app_ui = ui.page_fluid(
    shinyswatch.theme.superhero(),
    ui.panel_title(window_title="Jags App Title", title="App Front-End Interface"),
    ui.layout_sidebar(
        ui.panel_sidebar(
            ui.h2("User Inputs Pane", class_="sidebar-title"),
            ui.input_select(
                "state",
                "Select State",
                [None, "AL", "AZ", "CA", "GA", "IL"],
            ),
            width=6,
        ),
        ui.panel_main(
            ui.h2("Selections"),
            ui.output_text("state_selection"),
        ),
    ),
)

def server(input, output, session):
    @output
    @render.text
    def state_selection():
        return input.state()

app = App(app_ui, server)

Before: Screenshot 2023-08-18 at 11 27 27 AM

After: Screenshot 2023-08-18 at 11 19 02 AM