Fixing tests and some CSS bugs

docs/_static/custom.css

@@ -1,13 +1,13 @@
 /* Background of stable should be green */
-#version_switcher a[data-version-name*="stable"] {
+.version-switcher__container a[data-version-name*="stable"] {
   position: relative;
 }
 
-#version_switcher a[data-version-name*="stable"] span {
+.version-switcher__container a[data-version-name*="stable"] span {
   color: var(--pst-color-success);
 }
 
-#version_switcher a[data-version-name*="stable"] span:before {
+.version-switcher__container a[data-version-name*="stable"] span:before {
   content: "";
   width: 100%;
   height: 100%;

docs/user_guide/version-dropdown.rst

@@ -195,12 +195,12 @@ You can create CSS rules that select this metadata like so:
 .. code-block:: scss
 
    // Style all links with a specific subset of versions
-   #version_switcher a[data-version="0.2"],
-   #version_switcher a[data-version="0.3"] {
+   .version-switcher__container a[data-version="0.2"],
+   .version-switcher__container a[data-version="0.3"] {
       background-color: red;
    }
    // Style all links with `stable` in the version name
-   #version_switcher a[data-version-name*="stable"] {
+   .version-switcher__container a[data-version-name*="stable"] {
       background-color: green;
    }
 
@@ -214,7 +214,7 @@ version, you could use the following CSS selector:
 .. code-block:: scss
 
    // If the active version has the name "dev", style it orange
-   #version_switcher_button[data-active-version-name*="dev"] {
+   .version-switcher__button[data-active-version-name*="dev"] {
       background-color: var(--pst-color-secondary);
    }
 

src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss

@@ -1,32 +1,38 @@
 // the icons for theme change
 .theme-switch-button {
-  // to overide bootstrap settings
+  // overide bootstrap settings
   border-color: var(--pst-color-on-background);
-  padding: 0.25rem 0.5rem;
   font-size: 1.1rem;
   margin: 0 -0.5rem;
 
   a {
-    color: var(--pst-color-text-muted);
     display: none;
+    color: var(--pst-color-text-muted);
+    padding: 0.25rem 0.12rem;
+    &:hover,
+    &:active,
+    &:focus {
+      text-decoration: none;
+    }
   }
 
-  &:hover {
-    background-color: var(--pst-color-on-surface);
-    border-color: var(--pst-color-on-background);
-
+  &:hover,
+  &:active {
+    // overide bootstrap settings
+    background-color: var(--pst-color-on-surface) !important;
+    border-color: var(--pst-color-on-background) !important;
     a {
-      color: var(--pst-color-text-base);
+      color: var(--pst-color-text-muted);
     }
   }
 }
 
 html[data-mode="auto"] .theme-switch-button a[data-mode="auto"] {
-  display: block;
+  display: flex;
 }
 html[data-mode="light"] .theme-switch-button a[data-mode="light"] {
-  display: block;
+  display: flex;
 }
 html[data-mode="dark"] .theme-switch-button a[data-mode="dark"] {
-  display: block;
+  display: flex;
 }

src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss

@@ -1,9 +1,13 @@
-#version_switcher_button {
+button.version-switcher__button {
   border-color: var(--pst-color-border);
   color: var(--pst-color-text-base);
+
+  &:hover {
+    color: var(--pst-color-text-base);
+  }
 }
 
-#version_switcher_menu {
+.version-switcher__menu {
   border-color: var(--pst-color-border);
 
   a.list-group-item {

src/pydata_sphinx_theme/assets/styles/sections/_header.scss

@@ -67,6 +67,7 @@
 
       .dropdown-menu {
         z-index: $zindex-popover;
+        border: 1px solid var(--pst-color-border);
         box-shadow: 0 0 0.3rem 0.1rem var(--pst-color-shadow);
         background-color: var(--pst-color-on-background);
         padding: 0.5rem 1rem;

src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss

@@ -31,6 +31,16 @@
     }
   }
 
+  .sidebar-primary__section {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .sidebar-start-items__item,
+  .sidebar-end-items__item {
+    padding: 0.25rem 0;
+  }
+
   // Hide the sidebar header items on widescreen since they are visible in the header
   .sidebar-header-items {
     display: flex;
@@ -74,7 +84,6 @@
   }
 
   .sidebar-start-items {
-    padding-top: 1rem;
     border-top: 1px solid var(--pst-color-border);
   }
 

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html

@@ -4,8 +4,7 @@
 <div class="tocsection onthispage">
     <i class="fas fa-list"></i> {{ _("On this page") }}
 </div>
-{%- endif %}
-
 <nav id="bd-toc-nav" class="page-toc">
     {{ page_toc }}
 </nav>
+{%- endif %}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html

@@ -1,9 +1,9 @@
-<div class="dropdown" id="version_switcher">
-    <button type="button" class="btn btn-sm navbar-btn dropdown-toggle" id="version_switcher_button" data-toggle="dropdown">
+<div class="version-switcher__container dropdown">
+    <button type="button" class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-toggle="dropdown">
         {{ theme_switcher.get('version_match') }}  <!-- this text may get changed later by javascript -->
         <span class="caret"></span>
     </button>
-    <div id="version_switcher_menu" class="dropdown-menu list-group-flush py-0" aria-labelledby="version_switcher_button">
+    <div class="version-switcher__menu dropdown-menu list-group-flush py-0" aria-labelledby="version-switcher__button">
     <!-- dropdown will be populated by javascript on page load -->
     </div>
 </div>
@@ -39,10 +39,12 @@
 (function () {
     $.getJSON("{{ theme_switcher.get('json_url') }}", function(data, textStatus, jqXHR) {
         const currentFilePath = "{{ pagename }}.html";
-        let btn = document.getElementById("version_switcher_button");
-        // Set empty strings by default so that these attributes exist and can be used in CSS selectors
-        btn.dataset["activeVersionName"] = "";
-        btn.dataset["activeVersion"] = "";
+        let btns = document.querySelectorAll("version-switcher__button");
+        btns.forEach((btn) => {
+            // Set empty strings by default so that these attributes exist and can be used in CSS selectors
+            btn.dataset["activeVersionName"] = "";
+            btn.dataset["activeVersion"] = "";
+        });
         // create links to the corresponding page in the other docs versions
         $.each(data, function(index, entry) {
             // if no custom name specified (e.g., "latest"), use version string
@@ -67,15 +69,17 @@
             node.dataset["versionName"] = entry.name;
             node.dataset["version"] = entry.version;
 
-            $("#version_switcher_menu").append(node);
+            $(".version-switcher__menu").append(node);
             // replace dropdown button text with the preferred display name of
             // this version, rather than using sphinx's {{ version }} variable.
             // also highlight the dropdown entry for the currently-viewed
             // version's entry
             if (entry.version == "{{ theme_switcher.get('version_match') }}") {
                 node.classList.add("active");
-                btn.innerText = btn.dataset["activeVersionName"] = entry.name;
-                btn.dataset["activeVersion"] = entry.version;
+                btns.forEach((btn) => {
+                    btn.innerText = btn.dataset["activeVersionName"] = entry.name;
+                    btn.dataset["activeVersion"] = entry.version;
+                });
             }
         });
     });

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/sidebar-primary.html

@@ -2,7 +2,7 @@
 
 <div class="bd-sidebar-primary bd-sidebar{% if not sidebars %} hide-on-wide{% endif %}">
   {# Header items that will be displayed in the sidebar on mobile #}
-  <div class="sidebar-header-items">
+  <div class="sidebar-header-items sidebar-primary__section">
     <p class="sidebar-header-items__title" role="heading" aria-label="{{ _('Navigation') }}">
       {{ _("Navigation") }}
     </p>
@@ -30,17 +30,21 @@
   </div>
 
   {% if sidebars %}
-  <div class="sidebar-start-items">
+  <div class="sidebar-start-items sidebar-primary__section">
     {%- for sidebartemplate in sidebars %}
+    <div class="sidebar-start-items__item"">
     {%- include sidebartemplate %}
+    </div>
     {%- endfor %}
   </div>
   {% endif %}
 
   {# Items that will snap to the bottom of the screen#}
-  <div class="sidebar-end-items">
-    {%- for leftsidebartemplate in theme_left_sidebar_end %}
-    {%- include leftsidebartemplate %}
+  <div class="sidebar-end-items sidebar-primary__section">
+    {%- for sidebartemplate in theme_left_sidebar_end %}
+    <div class="sidebar-end-items__item">
+    {%- include sidebartemplate %}
+    </div>
     {%- endfor %}
   </div>
 </div>

tests/test_build.py

@@ -68,9 +68,6 @@ def test_build_html(sphinx_build_factory, file_regression):
     navbar = index_html.select("div#navbar-center")[0]
     file_regression.check(navbar.prettify(), basename="navbar_ix", extension=".html")
 
-    # Sidebars should be hidden on index page because there is no sub-page
-    assert not index_html.select(".bd-sidebar-primary")
-
     # Sidebar subpage
     sidebar = subpage_html.select(".bd-sidebar")[0]
     file_regression.check(
@@ -271,7 +268,7 @@ def test_navbar_align_default(sphinx_build_factory):
     """The navbar items align with the proper part of the page."""
     sphinx_build = sphinx_build_factory("base").build()
     index_html = sphinx_build.html_tree("index.html")
-    assert "col-lg-9" in index_html.select("div#navbar-collapsible")[0].attrs["class"]
+    assert "col-lg-9" in index_html.select(".navbar-header-items")[0].attrs["class"]
 
 
 def test_navbar_align_right(sphinx_build_factory):
@@ -281,7 +278,7 @@ def test_navbar_align_right(sphinx_build_factory):
 
     # Both the column alignment and the margin should be changed
     index_html = sphinx_build.html_tree("index.html")
-    assert "col-lg-9" not in index_html.select("div#navbar-center")[0].attrs["class"]
+    assert "col-lg-9" not in index_html.select(".navbar-header-items")[0].attrs["class"]
     assert "ml-auto" in index_html.select("div#navbar-center")[0].attrs["class"]
 
 
@@ -599,7 +596,11 @@ def test_version_switcher(sphinx_build_factory, file_regression):
         }
     }
     sphinx_build = sphinx_build_factory("base", confoverrides=confoverrides).build()
-    switcher = sphinx_build.html_tree("index.html").select("#version_switcher")[0]
+    switcher = sphinx_build.html_tree("index.html").select(
+        ".version-switcher__container"
+    )[
+        0
+    ]  # noqa
     file_regression.check(
         switcher.prettify(), basename="navbar_switcher", extension=".html"
     )

tests/test_build/navbar_switcher.html

@@ -1,11 +1,11 @@
-<div class="dropdown" id="version_switcher">
- <button class="btn btn-sm navbar-btn dropdown-toggle" data-toggle="dropdown" id="version_switcher_button" type="button">
+<div class="version-switcher__container dropdown">
+ <button class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-toggle="dropdown" type="button">
   0.7.1
   <!-- this text may get changed later by javascript -->
   <span class="caret">
   </span>
  </button>
- <div aria-labelledby="version_switcher_button" class="dropdown-menu list-group-flush py-0" id="version_switcher_menu">
+ <div aria-labelledby="version-switcher__button" class="version-switcher__menu dropdown-menu list-group-flush py-0">
   <!-- dropdown will be populated by javascript on page load -->
  </div>
 </div>

tests/test_build/navbar_theme.html

@@ -1,4 +1,4 @@
-<span class="btn btn-sm btn-outline-primary navbar-btn rounded-circle" id="theme-switch">
+<span class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle">
  <a class="theme-switch" data-mode="light">
   <i class="fas fa-sun">
   </i>