refactor: bslib_page_main() instead of bslib_sidebar_main() (#1059)

* refactor: `bslib_page_main()` instead of `bslib_sidebar_main()`

* Creates `main.bslib-page-main` for the container
* Uses `.bslib-page-main` as the CSS class
* `bslib-page-main-min-{width,height}` for the Sass/CSS variables

NEWS.md

@@ -16,7 +16,7 @@
 
 * Improved the appearance of cards with sidebars and headers in the Shiny preset, especially when custom card color themes are used, e.g. with `text-bg-primary` or other Bootstrap utility classes. (#1056)
 
-* The main content area of `page_sidebar()` and `page_navbar()` with a `sidebar` now have a minimum height and width to avoid squashed content in fillable layouts. The minimum height and width are controllable via Sass and CSS variables (see the pull request for details). (#1057)
+* The main content area of `page_sidebar()` and `page_navbar()` with a `sidebar` now have a minimum height and width to avoid squashed content in fillable layouts. The minimum height and width are controllable via Sass and CSS variables (see the pull requests for details). (#1057, #1059)
 
 # bslib 0.7.0
 

R/navs-legacy.R

@@ -306,7 +306,7 @@ navbarPage_ <- function(title,
         fillable = !isFALSE(fillable),
         border_radius = FALSE,
         border = !fluid,
-        page_sidebar_main(contents)
+        page_main_container(contents)
       )
     )
 

R/page.R

@@ -292,15 +292,15 @@ page_sidebar <- function(
       border = FALSE,
       border_radius = FALSE,
       !!!dots$attribs,
-      page_sidebar_main(dots$children)
+      page_main_container(dots$children)
     )
   )
 }
 
-page_sidebar_main <- function(...) {
+page_main_container <- function(...) {
   as_fill_carrier(
-    div(
-      class = "bslib-page-sidebar-main bslib-gap-spacing",
+    tags$main(
+      class = "bslib-page-main bslib-gap-spacing",
       ...
     )
   )

inst/components/scss/page_sidebar.scss

@@ -1,7 +1,7 @@
 $bslib-page-sidebar-title-bg: if($navbar-bg, $navbar-bg, $dark) !default;
 $bslib-page-sidebar-title-color: color-contrast($bslib-page-sidebar-title-bg) !default;
-$bslib-page-sidebar-main-min-width: map_get($grid-breakpoints, sm) !default;
-$bslib-page-sidebar-main-min-height: map_get($grid-breakpoints, sm) !default;
+$bslib-page-main-min-width: map_get($grid-breakpoints, sm) !default;
+$bslib-page-main-min-height: map_get($grid-breakpoints, sm) !default;
 $bslib-sidebar-padding: $spacer * 1.5 !default;
 
 :root {
@@ -25,8 +25,8 @@ $bslib-sidebar-padding: $spacer * 1.5 !default;
 }
 
 @include media-breakpoint-up(sm) {
-  .bslib-page-sidebar-main {
-    min-width: var(--bslib-page-sidebar-main-min-width, #{$bslib-page-sidebar-main-min-width});
-    min-height: var(--bslib-page-sidebar-main-min-height, #{$bslib-page-sidebar-main-min-height});
+  .bslib-page-main {
+    min-width: var(--bslib-page-main-min-width, #{$bslib-page-main-min-width});
+    min-height: var(--bslib-page-main-min-height, #{$bslib-page-main-min-height});
   }
 }

tests/testthat/_snaps/page.md

@@ -44,7 +44,7 @@
         </div>
         <div class="bslib-sidebar-layout bslib-mb-spacing html-fill-item" data-bslib-sidebar-border="false" data-bslib-sidebar-border-radius="false" data-bslib-sidebar-init="TRUE" data-collapsible-desktop="false" data-collapsible-mobile="false" data-open-desktop="always" data-open-mobile="always" data-require-bs-caller="layout_sidebar()" data-require-bs-version="5" style="--_sidebar-width:250px;">
           <div class="main bslib-gap-spacing html-fill-container" data-attr="here">
-            <div class="bslib-page-sidebar-main bslib-gap-spacing html-fill-item html-fill-container">main</div>
+            <main class="bslib-page-main bslib-gap-spacing html-fill-item html-fill-container">main</main>
           </div>
           <aside class="sidebar">
             <div class="sidebar-content bslib-gap-spacing"></div>
@@ -69,7 +69,7 @@
         </div>
         <div class="bslib-sidebar-layout bslib-mb-spacing html-fill-item" data-bslib-sidebar-border="false" data-bslib-sidebar-border-radius="false" data-bslib-sidebar-init="TRUE" data-collapsible-desktop="true" data-collapsible-mobile="false" data-open-desktop="open" data-open-mobile="always" data-require-bs-caller="layout_sidebar()" data-require-bs-version="5" style="--_sidebar-width:250px;">
           <div class="main bslib-gap-spacing html-fill-container">
-            <div class="bslib-page-sidebar-main bslib-gap-spacing html-fill-item html-fill-container">main</div>
+            <main class="bslib-page-main bslib-gap-spacing html-fill-item html-fill-container">main</main>
           </div>
           <aside id="bslib-sidebar-4785" class="sidebar" hidden>
             <div class="sidebar-content bslib-gap-spacing">side</div>