Updated comments and added transition

deephaven#1543

packages/code-studio/src/styleguide/GotoTopButton.css

@@ -0,0 +1,19 @@
+/* 
+ * GotoTopButton is only visible if user has scrolled down. Visibility attribute
+ * can't really make use of CSS transitions, so we use opacity instead. Including
+ * visibility for accessibility reasons.
+ */
+.goto-top-button {
+  visibility: visible;
+  opacity: 1;
+  transition:
+    opacity 300ms,
+    visibility 0s linear 0s;
+}
+html:not([data-scroll='true']) .goto-top-button {
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity 300ms,
+    visibility 0s linear 300ms;
+}

packages/code-studio/src/styleguide/GotoTopButton.tsx

@@ -1,10 +1,11 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Button, Icon } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { vsChevronUp } from '@deephaven/icons';
+import './GotoTopButton.css';
 
 /**
- * Button that scrolls to top of page and clears location hash.
+ * Button that scrolls to top of styleguide and clears location hash.
  */
 export function GotoTopButton(): JSX.Element {
   const gotoTop = useCallback(() => {
@@ -19,8 +20,24 @@ export function GotoTopButton(): JSX.Element {
     }, 500);
   }, []);
 
+  // Set data-scroll="true" on the html element when the user scrolls down below
+  // 120px. CSS uses this to only show the button when the user has scrolled.
+  useEffect(() => {
+    function onScroll() {
+      document.documentElement.dataset.scroll = String(window.scrollY > 120);
+    }
+    document.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      document.removeEventListener('scroll', onScroll);
+    };
+  }, []);
+
   return (
-    <Button variant="accent" onPress={gotoTop}>
+    <Button
+      UNSAFE_className="goto-top-button"
+      variant="accent"
+      onPress={gotoTop}
+    >
       <Icon>
         <FontAwesomeIcon icon={vsChevronUp} />
       </Icon>

packages/code-studio/src/styleguide/SamplesMenu.tsx

@@ -43,11 +43,11 @@ export function SamplesMenu(): JSX.Element {
   const [links, setLinks] = useState<LinkCategory[]>([]);
 
   useEffect(() => {
-    let currentSection: LinkCategory = {
+    let currentCategory: LinkCategory = {
       category: '',
       items: [],
     };
-    const categories: LinkCategory[] = [currentSection];
+    const categories: LinkCategory[] = [currentCategory];
 
     const spectrumComponentsSamples = document.querySelector(
       `#${SPECTRUM_COMPONENT_SAMPLES_ID}`
@@ -60,12 +60,13 @@ export function SamplesMenu(): JSX.Element {
           return;
         }
 
+        // Create a new category section
         if (el.hasAttribute(MENU_CATEGORY_DATA_ATTRIBUTE)) {
-          currentSection = {
+          currentCategory = {
             category: el.getAttribute(MENU_CATEGORY_DATA_ATTRIBUTE) ?? '',
             items: [],
           };
-          categories.push(currentSection);
+          categories.push(currentCategory);
 
           return;
         }
@@ -79,7 +80,7 @@ export function SamplesMenu(): JSX.Element {
         // eslint-disable-next-line no-param-reassign
         el.id = id;
 
-        currentSection.items.push({ id, label: el.textContent });
+        currentCategory.items.push({ id, label: el.textContent });
 
         if (`#${id}` === window.location.hash) {
           el.scrollIntoView();

packages/code-studio/src/styleguide/StyleGuide.tsx

@@ -37,21 +37,19 @@ const stickyProps = {
 function StyleGuide(): React.ReactElement {
   return (
     <div className="container style-guide-container">
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginTop: '2rem',
-          paddingBottom: '1rem',
-        }}
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        marginTop="2rem"
+        marginBottom="1rem"
       >
         <h1 style={{ paddingTop: '2rem' }}>Deephaven UI Components</h1>
-      </div>
+      </Flex>
+
       <Flex {...stickyProps} marginTop={-56} top={20}>
         <SamplesMenu />
       </Flex>
-      <Flex {...stickyProps} top="calc(100vh - 40px)">
+      <Flex {...stickyProps} top="calc(100vh - 40px)" marginTop={-32}>
         <GotoTopButton />
       </Flex>
 

packages/components/src/theme/SpectrumThemeProvider.tsx

@@ -11,6 +11,13 @@ export interface SpectrumThemeProviderProps {
   colorScheme?: 'light' | 'dark';
 }
 
+/**
+ * Wrapper around React Spectrum's theme Provider that provides DH mappings of
+ * Spectrum's theme variables to DH's theme variables. Also exposes an optional
+ * `isPortal` prop that if provided, adds a unique `data-unique-id` attribute to
+ * the Provider. This is needed to force the Provider to render the theme wrapper
+ * inside of portals.
+ */
 export function SpectrumThemeProvider({
   children,
   isPortal = false,

packages/components/src/theme/theme-dark/index.ts

@@ -5,7 +5,28 @@ import themeDarkSemanticGrid from './theme-dark-semantic-grid.css?inline';
 import themeDarkComponents from './theme-dark-components.css?inline';
 
 /**
- * Theme is exported as a string containing css variable definitions.
+ * DH theme variables are imported via Vite `?inline` query which provides the
+ * text content of the variable files as a string. The exported theme is just a
+ * concatenation of the contents of all of these imports.
+ *
+ * e.g.
+ *
+ * :root {
+ *   --dh-color-from-dark-palette: #fff;
+ *   --dh-color-from-dark-palette2: #ccc;
+ * }
+ * :root {
+ *   --dh-color-from-dark-semantic: #000;
+ * }
+ * :root {
+ *   --dh-color-from-dark-semantic-editor: #000;
+ * }
+ * :root {
+ *   --dh-color-from-dark-semantic-grid: #000;
+ * }
+ * :root {
+ *   --dh-color-from-dark-components: #000;
+ * }
  */
 export const themeDark = [
   themeDarkPalette,