Update version selector (#1394)

* Use page-level version selector

* Style fixes

* Color, radius, spacing consistency

* Design review

* Small padding tweak

* Engineering review

* Refactor the Z-index to have just one place to modify all the components and layers (#1401)

* Update z-indices to semantic use

* Match existing focus highlight

---------

Co-authored-by: Andres Ramirez Fuentes <a.ramirezfuentes@snowflake.com>

Author: sfc-gh-dmatthews

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;
@@ -121,56 +115,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 = [];
@@ -201,31 +145,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{" "}
@@ -280,18 +218,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 }} />
@@ -565,4 +492,4 @@ const Autofunction = ({
   );
 };
 
-export default withRouter(Autofunction);
+export default Autofunction;

components/blocks/autofunction.module.css

@@ -10,54 +10,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 bg-gray-90 rounded-xl;
 }
@@ -88,12 +44,12 @@
 
 /* Keep in sync with components/blocks/autofunction.module.css */
 .CodeBlockContainer pre code {
-  @apply z-10 relative;
+  @apply z-elevated relative;
 }
 
 /* Keep in sync with components/blocks/code.module.css */
 .LineHighlight {
-  @apply bg-gray-80 opacity-30 z-0;
+  @apply bg-gray-80 opacity-30 z-base;
 }
 
 /* Keep in sync with components/blocks/code.module.css */
@@ -155,7 +111,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/code.module.css

@@ -34,12 +34,12 @@
 
 /* Keep in sync with components/blocks/autofunction.module.css */
 .Pre code {
-  @apply z-10 relative;
+  @apply z-elevated relative;
 }
 
 /* Keep in sync with components/blocks/autofunction.module.css */
 .LineHighlight {
-  @apply bg-gray-80 opacity-30 z-0;
+  @apply bg-gray-80 opacity-30 z-base;
 }
 
 /* Keep in sync with components/blocks/autofunction.module.css */

components/blocks/componentSlider.module.css

@@ -13,7 +13,7 @@
 
 /* Hover styles for cards. Need to be done here to prevent the card overflow */
 .Container :global(.slick-slide) > div {
-  @apply transition-all duration-75 z-10;
+  @apply transition-all duration-75 z-elevated;
 }
 
 .Container :global(.slick-slide) > div:hover {
@@ -45,12 +45,12 @@
 }
 
 .Tooltip {
-  @apply p-3 bg-gray-90 absolute rounded-md transition delay-100 ease-in-out opacity-0 w-full w-64 z-10;
+  @apply p-3 bg-gray-90 absolute rounded-md transition delay-100 ease-in-out opacity-0 w-full w-64 z-elevated;
   bottom: 100%;
 }
 
 .TooltipArrow {
-  @apply h-3 w-3 p-0 absolute opacity-0 -bottom-[2px] right-9 transition ease-in-out delay-100 bg-gray-90 z-10;
+  @apply h-3 w-3 p-0 absolute opacity-0 -bottom-[2px] right-9 transition ease-in-out delay-100 bg-gray-90 z-elevated;
 }
 
 .Open {

components/blocks/image.module.css

@@ -31,7 +31,7 @@
 }
 
 .LightBox {
-  @apply fixed z-30 top-0 left-0 w-full h-full flex justify-center items-center overscroll-contain bg-gray-20;
+  @apply fixed z-header top-0 left-0 w-full h-full flex justify-center items-center overscroll-contain bg-gray-20;
 }
 
 :global(.dark) .LightBox {
@@ -48,7 +48,7 @@
 
 .CloseButton {
   font-family: "Material Icons";
-  @apply font-normal text-5xl absolute right-0 md:right-8 top-12 cursor-pointer bg-gray-20 z-20 text-gray-90 hover:shadow-none hover:opacity-60 mb-0 px-2 lg:p-4;
+  @apply font-normal text-5xl absolute right-0 md:right-8 top-12 cursor-pointer bg-gray-20 z-sidebar text-gray-90 hover:shadow-none hover:opacity-60 mb-0 px-2 lg:p-4;
 }
 
 :global(.dark) .CloseButton {

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/blocks/refCard.module.css

@@ -1,5 +1,5 @@
 .Container {
-  @apply relative rounded-md overflow-hidden border border-gray-30 text-base cursor-pointer transition-all duration-75 flex flex-col z-20;
+  @apply relative rounded-md overflow-hidden border border-gray-30 text-base cursor-pointer transition-all duration-75 flex flex-col z-sidebar;
 }
 
 .Container:hover {

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;
 }