feat(shiny-preset): Dashboard design in all page layouts #897

gadenbuie · 2023-11-06T15:30:33Z

This PR primarily brings the "dashboard" design look to all page_*() functions. Previously, these were limited to the main content areas of page_navbar() and page_sidebar(), but this led to inconsistent styles when using the other page functions.

The dashboard design is behind a $bslib-dashboard-design Sass variable in the preset="shiny" theme so that it could (in theory) be used to turn on and off the dashboard styles entirely. This might be relevant for matching Quarto's theme, or for using a more classic Bootstrap look with the rest of the shiny preset customizations.

The dashboard design brings:

Softer borders everywhere
Minimalistic cards where the card header and footer backgrounds match the body background color.
Box shadow on top-level cards by default, removed from nested cards.
Minimalistic sidebars that match the body background.
A light gray background in the main container, detected automatically in page_navbar() and page_sidebar().
Minimalistic title and nav elements in page_navbar() and page_sidebar().

When using other page functions, e.g. page_fillable() or page_fixed(), all cards are now styled consistently. In these functions, where the user has complete control over the elements on the page, a .bslib-page-dashboard class can be added. Ideally this class would be added at the <body> level, but that will require the work in #899 to be user-accessible. .bslib-page-dashboard can also be used on a region of the page, e.g. in an area containing a layout_sidebar().

Remaining tasks

Allow setting attributes at the page level, especiallyclass and style #899
- Setting page-level attributes is currently not easy, except for with page_fillable(). This will be handled in a follow-up PR.
Value boxes should inherit their border and shadow from generic card styles
- This will also be handled in a follow up PR. Currently value box shadows and borders are mutually exclusive by design (in the default case), but now that card borders and shadows are worked out consistently across all pages, we may be able to simplify the value box logic considerably prior to release (i.e. to avoid the border-auto class and logic).
Create a test app for screenshot testing of the many combinations of pages and layouts.

`$bslib-dashboard-design`

Dashboard style	Regular
`page_navbar( theme = bs_theme( "bslib–dashboard-design" = "true" ), ... )`	`page_navbar( theme = bs_theme( "bslib–dashboard-design" = "false" ), ... )`

`.bslib-page-dashboard`

I also added a .bslib-page-dashboard class that can be used in the other page_*() functions to recreate or re-use the dashboard styles. Ideally this class is added to the body element of the page, in which case the page receives the gray background. This class can also be used with page_fillable() and custom layouts that replicate the features of page_sidebar() or page_navbar().

In some page functions, like page_fluid(), the class attribute is applied to a container div and not <body>, so you may need to manually create the body tag, as below.

tags$body(
	class = "bslib-page-dashboard",
	page_fluid(
		h2("Fluid Dashboard Page", class = "my-4"),
		row_value_boxes,
		row_cards
	)
)

In a previous iteration of this PR, .bslib-page-dashboard would set the background color of the .main element, but I've simplified the logic. The class, like .bslib-page-navbar and .bslib-page-sidebar, now applies the background color to the container on which it is placed. Ideally that's the <body> element. It then finds the first sidebar layout and makes the background of its main content area transparent – unless the user has customized the sidebar layout with the bg argument. The explanation may sound complicated, but both the user interface and the CSS rules are simpler.

And attach lighter border colors to this variable

…shboard-cards`

inst/builtin/bs5/shiny/_rules.scss

If replicating navbar/sidebar, you can use the `.bslib-page-{navbar,sidebar}` classes instead. This makes `.bslib-page-dashboard` a way to access everything except the main content area background color.

…e in dark mode

…ound and border * sidebar layout is removed from shadow considerations * all cards get same color treatment * only top-level cards get shadows * sidebar/navbar pages detect their main content area * .bslib-page-dashboard can be used to replicate those layouts * or .bslib-page-dashboard in conjunction with `.main` class can be used to set where the main gray bg content area is

was `$bslib-enable-dashboard`

Also there shouldn't be a `main` within a `main` (only one main per page)

inst/builtin/bs5/shiny/_rules.scss

cpsievert

Awesome work, thank you! Feel free to merge once the last couple comments are addressed

…parate from dashboard design

* Put it on the container with the dashboard/sidebar/navbar class * Make first sidebar layout main area transparent * Make navbar and title backgrounds --body-bg

gadenbuie · 2023-11-10T14:06:49Z

@cpsievert I was nagged by a thought about the background color implementation and ended up changing it a bit last night. I thought you might want to take another look before we merge this.

The new strategy:

Sets the background color on the element with the .bslib-page-dashboard class (or sidebar/navbar)
Finds the first sidebar layout and makes its background transparent.
Ensures that page-level customizations pass through, so if the user says page_sidebar(bg = "blue") that's what they get^** instead of the gray (i.e. transparent) background.
Also ensures that root-scoped CSS defaults pass through, so --bslib-sidebar-main-bg: blue sets all sidebar main content areas to blue except for the first one.

^{^**There's a separate issue that page_navbar() passes bg to navset_bar() and changes the navbar background. But bg in page_sidebar() controls the main content area background.}

cpsievert · 2023-11-10T15:29:40Z

@gadenbuie LGTM 👍

gadenbuie and others added 3 commits November 6, 2023 10:27

feat(shiny-preset): Add bslib-enable-dashboard Sass variable

5883301

And attach lighter border colors to this variable

Resave distributed files (GitHub Action)

f50ba10

feat(dashboard): Add .bslib-page-dashboard class

6f4df26

gadenbuie requested a review from cpsievert November 6, 2023 15:57

gadenbuie added 2 commits November 6, 2023 15:57

devtools::document() (GitHub Actions)

9662636

Resave distributed files (GitHub Action)

e1242b2

gadenbuie self-assigned this Nov 6, 2023

gadenbuie added 2 commits November 6, 2023 11:13

fix(shiny-preset): Don't add shadows if dashboard enable but shadows off

1afdbfd

refactor(shiny-preset): Rename bslib-box-shadows mixin to `bslib-da…

f89f79e

…shboard-cards`