Update version selector

components/blocks/autofunction.js

@@ -1,10 +1,8 @@
 import React, { useEffect, useState, useRef } from "react";
-import classNames from "classnames";
 import Table from "./table";
 import { H2, H3 } from "./headers";
 import Warning from "./warning";
 import Deprecation from "./deprecation";
-import { withRouter, useRouter } from "next/router";
 import Prism from "prismjs";
 import "prismjs/components/prism-python";
 import "prismjs/plugins/line-numbers/prism-line-numbers";
@@ -17,12 +15,10 @@ import getConfig from "next/config";
 const { publicRuntimeConfig } = getConfig();
 
 import styles from "./autofunction.module.css";
-import { looksLikeVersionAndPlatformString } from "../../lib/next/utils";
 import { getThemedUrl, getThemeFromDOM } from "../../lib/next/ThemeContext";
 
 const LATEST_VERSION = publicRuntimeConfig.LATEST_VERSION;
 const DEFAULT_VERSION = publicRuntimeConfig.DEFAULT_VERSION;
-const VERSIONS_LIST = publicRuntimeConfig.VERSIONS_LIST;
 
 const cleanHref = (name) => {
   return String(name).replace(/\./g, "").replace(/\s+/g, "-");
@@ -37,10 +33,8 @@ const Autofunction = ({
   deprecated,
   deprecatedText,
   oldStreamlitFunction,
-  goToLatest,
 }) => {
   const blockRef = useRef();
-  const router = useRouter();
   const [isHighlighted, setIsHighlighted] = useState(false);
   const currentNumericVersion =
     version == DEFAULT_VERSION ? LATEST_VERSION : version;
@@ -104,56 +98,6 @@ const Autofunction = ({
     setIsHighlighted(true);
   };
 
-  const VersionSelector = ({ currentNumericVersion, handleSelectVersion }) => {
-    const selectClass =
-      currentNumericVersion != LATEST_VERSION
-        ? "version-select old-version"
-        : "version-select";
-
-    return (
-      <form className={classNames(selectClass, styles.Form)}>
-        <label>
-          <span className="sr-only">Streamlit Version</span>
-          <select
-            value={currentNumericVersion}
-            onChange={handleSelectVersion}
-            className={styles.Select}
-          >
-            {VERSIONS_LIST.map((version, index) => (
-              <option value={version} key={version}>
-                {"Version " + version}
-              </option>
-            ))}
-          </select>
-        </label>
-      </form>
-    );
-  };
-
-  const handleSelectVersion = (event) => {
-    const functionObject =
-      docstrings[streamlitFunction] ?? docstrings[oldStreamlitFunction];
-    const slicedSlug = slug.slice();
-
-    if (event.target.value !== currentNumericVersion) {
-      if (looksLikeVersionAndPlatformString(slicedSlug[0])) {
-        slicedSlug.shift();
-      }
-      if (event.target.value !== LATEST_VERSION) {
-        slicedSlug.unshift(event.target.value);
-      } else {
-        goToLatest();
-      }
-    }
-
-    if (!functionObject) {
-      router.push(`/${slicedSlug.join("/")}`);
-    } else {
-      const name = cleanHref(`st.${functionObject.name}`);
-      router.push(`/${slicedSlug.join("/")}#${name} `);
-    }
-  };
-
   const footers = [];
   const args = [];
   const returns = [];
@@ -184,31 +128,25 @@ const Autofunction = ({
     }
   } else {
     return (
-      <div className={styles.HeaderContainer}>
-        <div className={styles.TitleContainer} ref={blockRef} key={slug}>
-          <H2
-            className={`
-              ${styles.Title}
-              relative
-            `}
+      <div className={styles.HeaderContainer} ref={blockRef} key={slug}>
+        <H2
+          className={`
+            ${styles.Title}
+            relative
+          `}
+        >
+          <a
+            aria-hidden="true"
+            tabIndex="-1"
+            href={`#${cleanHref(
+              streamlitFunction.replace("streamlit", "st"),
+            )}`.toLowerCase()}
+            className="absolute"
           >
-            <a
-              aria-hidden="true"
-              tabIndex="-1"
-              href={`#${cleanHref(
-                streamlitFunction.replace("streamlit", "st"),
-              )}`.toLowerCase()}
-              className="absolute"
-            >
-              <span className="icon icon-link"></span>
-            </a>
-            {streamlitFunction.replace("streamlit", "st")}
-          </H2>
-          <VersionSelector
-            currentNumericVersion={currentNumericVersion}
-            handleSelectVersion={handleSelectVersion}
-          />
-        </div>
+            <span className="icon icon-link"></span>
+          </a>
+          {streamlitFunction.replace("streamlit", "st")}
+        </H2>
         <Warning>
           <p>
             This method does not exist in version{" "}
@@ -263,18 +201,7 @@ const Autofunction = ({
     );
     header = (
       <div className={styles.HeaderContainer}>
-        <div
-          className={`
-            ${styles.TitleContainer}
-            relative
-          `}
-        >
-          {headerTitle}
-          <VersionSelector
-            currentNumericVersion={currentNumericVersion}
-            handleSelectVersion={handleSelectVersion}
-          />
-        </div>
+        {headerTitle}
         {deprecated === true ? (
           <Deprecation>
             <p dangerouslySetInnerHTML={{ __html: deprecatedText }} />
@@ -543,4 +470,4 @@ const Autofunction = ({
   );
 };
 
-export default withRouter(Autofunction);
+export default Autofunction;

components/blocks/autofunction.module.css

@@ -6,54 +6,10 @@
   @apply mb-6;
 }
 
-.TitleContainer {
-  @apply flex flex-col items-start md:flex-row md:items-baseline mt-4 mb-2;
-}
-
 .Title {
   @apply mt-6 mb-2;
 }
 
-.Form {
-  @apply relative my-4 md:my-0 ml-0 md:ml-auto min-w-fit;
-}
-
-.Form::after {
-  @apply hidden md:block md:absolute md:bottom-1/4 md:right-0 md:opacity-70 md:pointer-events-none md:w-3 md:h-2;
-  content: "";
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23000000' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.8762017 L5.80707196,6.93171246 C5.72063689,7.01813145 5.61827957,7.06134094 5.5,7.06134094 C5.38172043,7.06134094 5.27936311,7.01813145 5.19292804,6.93171246 L0.129652605,1.8762017 C0.0432175352,1.78978271 0,1.68630735 0,1.5657756 C0,1.44524385 0.0432175352,1.34176849 0.129652605,1.2553495 L1.26240695,0.129628481 C1.34884202,0.0432094937 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432094937 1.87655087,0.129628481 L5.5,3.7524034 L9.12344913,0.129628481 C9.2098842,0.0432094937 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432094937 9.73759305,0.129628481 L10.8703474,1.2553495 C10.9567825,1.34176849 11,1.44524385 11,1.5657756 C11,1.68630735 10.9567825,1.78978271 10.8703474,1.8762017 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
-.Form::before {
-  @apply md:hidden block absolute bottom-1/4 left-0 opacity-70 pointer-events-none w-3 h-2;
-  content: "";
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23000000' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.8762017 L5.80707196,6.93171246 C5.72063689,7.01813145 5.61827957,7.06134094 5.5,7.06134094 C5.38172043,7.06134094 5.27936311,7.01813145 5.19292804,6.93171246 L0.129652605,1.8762017 C0.0432175352,1.78978271 0,1.68630735 0,1.5657756 C0,1.44524385 0.0432175352,1.34176849 0.129652605,1.2553495 L1.26240695,0.129628481 C1.34884202,0.0432094937 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432094937 1.87655087,0.129628481 L5.5,3.7524034 L9.12344913,0.129628481 C9.2098842,0.0432094937 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432094937 9.73759305,0.129628481 L10.8703474,1.2553495 C10.9567825,1.34176849 11,1.44524385 11,1.5657756 C11,1.68630735 10.9567825,1.78978271 10.8703474,1.8762017 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
-.Select {
-  @apply appearance-none bg-white border-none p-0 m-0 w-full font-mono text-lg font-bold leading-none md:text-right text-left md:pr-5 md:pl-0 pr-0 pl-5;
-}
-
-:global(.dark) .Select {
-  @apply bg-gray-100 text-gray-40;
-}
-
-:global(.old-version) .Select {
-  @apply text-red-70;
-}
-
-:global(.sis-version) .Select {
-  @apply text-lightBlue-70;
-}
-
-:global(.dark) .Form::after {
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.87655087 L5.80707196,6.93300248 C5.72063689,7.01943755 5.61827957,7.06265509 5.5,7.06265509 C5.38172043,7.06265509 5.27936311,7.01943755 5.19292804,6.93300248 L0.129652605,1.87655087 C0.0432175352,1.7901158 0,1.68662117 0,1.566067 C0,1.44551282 0.0432175352,1.3420182 0.129652605,1.25558313 L1.26240695,0.129652605 C1.34884202,0.0432175352 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432175352 1.87655087,0.129652605 L5.5,3.75310174 L9.12344913,0.129652605 C9.2098842,0.0432175352 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432175352 9.73759305,0.129652605 L10.8703474,1.25558313 C10.9567825,1.3420182 11,1.44551282 11,1.566067 C11,1.68662117 10.9567825,1.7901158 10.8703474,1.87655087 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
-:global(.dark) .Form::before {
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.87655087 L5.80707196,6.93300248 C5.72063689,7.01943755 5.61827957,7.06265509 5.5,7.06265509 C5.38172043,7.06265509 5.27936311,7.01943755 5.19292804,6.93300248 L0.129652605,1.87655087 C0.0432175352,1.7901158 0,1.68662117 0,1.566067 C0,1.44551282 0.0432175352,1.3420182 0.129652605,1.25558313 L1.26240695,0.129652605 C1.34884202,0.0432175352 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432175352 1.87655087,0.129652605 L5.5,3.75310174 L9.12344913,0.129652605 C9.2098842,0.0432175352 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432175352 9.73759305,0.129652605 L10.8703474,1.25558313 C10.9567825,1.3420182 11,1.44551282 11,1.566067 C11,1.68662117 10.9567825,1.7901158 10.8703474,1.87655087 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
 .CodeBlockContainer {
   @apply mb-7 relative;
 }
@@ -144,7 +100,7 @@
 
 /* Styles for deprecation notice in param */
 .DeprecatedContent {
-  @apply bg-orange-20 text-gray-90 px-2 py-1 rounded-md text-sm mb-2 flex items-center relative;
+  @apply bg-orange-10 text-gray-90 px-2 py-1 rounded-xl text-sm mb-2 flex items-center relative;
 }
 
 .DeprecatedContent i {

components/blocks/callout.module.css

@@ -1,5 +1,5 @@
 .Container {
-  @apply p-4 md:p-8 rounded-md mt-8 mb-12;
+  @apply p-4 md:p-8 rounded-xl mt-8 mb-12;
 }
 
 .Container p {

components/blocks/important.module.css

@@ -3,5 +3,5 @@
 }
 
 :global(.dark) .Important {
-  background-color: #481d00;
+  @apply bg-orange-100/30;
 }

components/blocks/note.module.css

@@ -3,5 +3,5 @@
 }
 
 :global(.dark) .Note {
-  background-color: #062633;
+  @apply bg-lightBlue-100/30;
 }

components/layouts/container.module.css

@@ -6,6 +6,11 @@
   @apply col-span-full lg:col-start-2 lg:col-end-5;
 }
 
+.StickyContext {
+  /* Container for sticky version selector - must have height */
+  @apply relative;
+}
+
 .ArticleContainer {
   @apply relative;
 }

components/layouts/globalTemplate.js

@@ -4,7 +4,7 @@ import ChatSticky from "../navigation/chatSticky";
 
 import styles from "./globalTemplate.module.css";
 
-const Layout = ({ children }) => {
+const Layout = ({ children, versionProps }) => {
   const [isSticky, setIsSticky] = useState(false);
 
   const handleScroll = () => {
@@ -22,7 +22,7 @@ const Layout = ({ children }) => {
 
   return (
     <main id="root" className="dark:bg-gray-100">
-      <Header isSticky={isSticky} />
+      <Header isSticky={isSticky} versionProps={versionProps} />
       <div className={isSticky ? styles.stickyPageWrapper : undefined}>
         {children}
       </div>

components/navigation/header.js

@@ -6,6 +6,7 @@ import dynamic from "next/dynamic";
 
 // import Navigation from
 import MobileNav from "./mobileNav";
+import VersionSelector from "../utilities/versionSelector";
 
 import styles from "./header.module.css";
 
@@ -14,7 +15,7 @@ const ThemeToggle = dynamic(() => import("../utilities/themeToggle"), {
 });
 import Search from "../utilities/search";
 
-const Header = ({ isSticky }) => {
+const Header = ({ isSticky, versionProps }) => {
   const [windowWidth, setWindowWidth] = useState();
 
   const handleResize = () => {
@@ -50,6 +51,7 @@ const Header = ({ isSticky }) => {
           <h4 className={styles.LogoText}>Documentation</h4>
         </Link>
         <section className={styles.NavigationContainer}>
+          {versionProps && <VersionSelector {...versionProps} isMobile />}
           <Search />
           <ThemeToggle />
           {mobileNav}

components/navigation/header.module.css

@@ -1,38 +1,42 @@
 .Container {
-  @apply relative w-full z-30 border-b;
+  @apply relative w-full z-30;
   @apply bg-white !important;
 }
 
 .stickyContainer {
-  @apply fixed h-12 border-b-gray-30 top-0;
+  @apply fixed h-12 top-0;
+}
+
+/* Fade effect using background color gradient */
+.stickyContainer::after {
+  content: "";
+  @apply absolute left-0 right-0 h-6 pointer-events-none;
+  top: 100%;
+  background: linear-gradient(to bottom, theme("colors.white"), transparent);
 }
 
 .standardContainer {
-  @apply border-b-white h-24;
+  @apply h-24;
 }
 
 :global(.dark) .Container {
   @apply bg-gray-100 !important;
 }
 
-:global(.dark) .stickyContainer {
-  @apply border-b-gray-80 !important;
-}
-
-:global(.dark) .standardContainer {
-  @apply border-b-gray-100 !important;
+:global(.dark) .stickyContainer::after {
+  background: linear-gradient(to bottom, theme("colors.gray.100"), transparent);
 }
 
 .Navigation {
   @apply container px-2 xl:px-4 flex items-center justify-between relative transition-all mx-auto h-full left-auto;
 }
 
 .LogoContainer {
-  @apply flex items-center m-0 text-base tracking-tight md:ml-0 lg:ml-2 xl:-ml-1 hover:opacity-70;
+  @apply flex items-center gap-4 m-0 text-base tracking-tight md:ml-0 lg:ml-2 xl:-ml-1 hover:opacity-70 mr-4;
 }
 
 .LogoText {
-  @apply hidden xl:block m-0 font-normal ml-4 relative top-px text-lg;
+  @apply hidden xl:block m-0 font-normal mr-4 relative top-px text-lg;
   @apply text-gray-90 !important;
 }
 

components/utilities/themeToggle.js

@@ -20,7 +20,7 @@ const ThemeToggle = () => {
   };
 
   return (
-    <React.Fragment>
+    <div className={styles.Wrapper}>
       <button
         type="button"
         onClick={toggleTheme}
@@ -34,7 +34,7 @@ const ThemeToggle = () => {
       <div className={styles.Tooltip}>
         <p>Change to {inactiveTheme} mode</p>
       </div>
-    </React.Fragment>
+    </div>
   );
 };
 

components/utilities/themeToggle.module.css

@@ -1,5 +1,9 @@
+.Wrapper {
+  @apply relative;
+}
+
 .Container {
-  @apply relative w-8 h-8 mb-0 rounded-md p-0 block cursor-pointer flex items-center justify-center hover:opacity-90 hover:shadow-sm;
+  @apply w-8 h-8 mb-0 rounded-md p-0 block cursor-pointer flex items-center justify-center hover:opacity-90 hover:shadow-sm;
   @apply bg-gray-20 !important;
 }
 
@@ -33,7 +37,7 @@
 }
 
 .Tooltip {
-  @apply hidden absolute top-20 right-4 h-8 px-2 pt-0.5 rounded-md bg-gray-20;
+  @apply hidden absolute top-10 right-0 px-3 py-1 rounded-md bg-gray-20 z-50 whitespace-nowrap;
 }
 
 .Tooltip p {