feat: Theming - Spectrum variable mapping and light theme

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

@@ -5,6 +5,10 @@ import { Button, ButtonOld, SocketedButton } from '@deephaven/components';
 import { dhTruck } from '@deephaven/icons';
 import { sampleSectionIdAndClasses } from './utils';
 
+function noOp(): void {
+  return undefined;
+}
+
 interface ButtonsState {
   toggle: boolean;
 }
@@ -80,31 +84,38 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
     return (
       <div {...sampleSectionIdAndClasses('buttons-socketed')}>
         <h5>Socketed Buttons (for linker)</h5>
-        <SocketedButton style={{ marginBottom: '1rem', marginRight: '1rem' }}>
+        <SocketedButton
+          style={{ marginBottom: '1rem', marginRight: '1rem' }}
+          onClick={noOp}
+        >
           Unlinked
         </SocketedButton>
         <SocketedButton
           style={{ marginBottom: '1rem', marginRight: '1rem' }}
           isLinked
+          onClick={noOp}
         >
           Linked
         </SocketedButton>
         <SocketedButton
           style={{ marginBottom: '1rem', marginRight: '1rem' }}
           isLinkedSource
+          onClick={noOp}
         >
           Linked Source
         </SocketedButton>
         <SocketedButton
           style={{ marginBottom: '1rem', marginRight: '1rem' }}
           isLinked
           isInvalid
+          onClick={noOp}
         >
           Error
         </SocketedButton>
         <SocketedButton
           style={{ marginBottom: '1rem', marginRight: '1rem' }}
           disabled
+          onClick={noOp}
         >
           Disabled
         </SocketedButton>
@@ -130,7 +141,13 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
       >
         <h5>Inline Buttons</h5>
         Regular btn-inline:
-        <Button className="mx-2" kind="inline" icon={dhTruck} tooltip="test" />
+        <Button
+          className="mx-2"
+          kind="inline"
+          icon={dhTruck}
+          tooltip="test"
+          onClick={noOp}
+        />
         Toggle button (class active):
         <Button
           className="mx-2"
@@ -143,21 +160,23 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
           tooltip="test"
         />
         Disabled:
-        <Button className="mx-2" kind="inline" disabled>
+        <Button className="mx-2" kind="inline" disabled onClick={noOp}>
           Disabled
         </Button>
         With Text:
-        <Button className="mx-2" kind="inline" icon={dhTruck}>
+        <Button className="mx-2" kind="inline" icon={dhTruck} onClick={noOp}>
           <span>Text Button</span>
         </Button>
         <br />
         <br />
         <span>btn-link-icon (no text):</span>
-        <Button kind="ghost" icon={dhTruck} tooltip="test" />
+        <Button kind="ghost" icon={dhTruck} tooltip="test" onClick={noOp} />
         <span className="mx-2">btn-link:</span>
-        <Button kind="ghost">Text Button </Button>
+        <Button kind="ghost" onClick={noOp}>
+          Text Button
+        </Button>
         <span className="mx-2">btn-link (text w/ optional with icon):</span>
-        <Button kind="ghost" icon={dhTruck}>
+        <Button kind="ghost" icon={dhTruck} onClick={noOp}>
           Text Button
         </Button>
       </div>

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React, { Key, useCallback, useEffect, useState } from 'react';
 import {
   ActionButton,
@@ -12,6 +13,7 @@ import { vsMenu } from '@deephaven/icons';
 import {
   MENU_CATEGORY_DATA_ATTRIBUTE,
   NO_MENU_DATA_ATTRIBUTE,
+  SPECTRUM_COMPARISON_SAMPLES_ID,
   SPECTRUM_COMPONENT_SAMPLES_ID,
 } from './constants';
 
@@ -26,18 +28,18 @@ type LinkCategory = { category: string; items: Link[] };
  * menu category. These will be queried by the SamplesMenu component to build
  * up the menu sections.
  */
-export function SampleMenuCategory({
-  'data-menu-category': dataMenuCategory,
-}: Record<typeof MENU_CATEGORY_DATA_ATTRIBUTE, string>): JSX.Element {
-  return <div data-menu-category={dataMenuCategory} />;
+export function SampleMenuCategory(
+  props: Record<typeof MENU_CATEGORY_DATA_ATTRIBUTE, string>
+): JSX.Element {
+  return <div {...props} />;
 }
 
 /**
  * Creates a menu from h2, h3 elements on the page and assigns them each an id
  * for hash navigation purposes. If the current hash matches one of the ids, it
  * will scroll to that element. This handles the initial page load scenario.
- * Menu sections are identified by divs with MENU_CATEGORY_DATA_ATTRIBUTE
- * attributes.
+ * Menu categories are identified by divs with MENU_CATEGORY_DATA_ATTRIBUTE
+ * attributes originating from the <SampleMenuCategory> component.
  */
 export function SamplesMenu(): JSX.Element {
   const [links, setLinks] = useState<LinkCategory[]>([]);
@@ -53,34 +55,48 @@ export function SamplesMenu(): JSX.Element {
       `#${SPECTRUM_COMPONENT_SAMPLES_ID}`
     );
 
+    const spectrumComparisonSamples = document.querySelector(
+      `#${SPECTRUM_COMPARISON_SAMPLES_ID}`
+    );
+
     document
       .querySelectorAll(`h2,h3,[${MENU_CATEGORY_DATA_ATTRIBUTE}]`)
-      .forEach(el => {
-        if (el.textContent == null || el.hasAttribute(NO_MENU_DATA_ATTRIBUTE)) {
+      .forEach(headingEl => {
+        if (
+          headingEl.textContent == null ||
+          headingEl.hasAttribute(NO_MENU_DATA_ATTRIBUTE)
+        ) {
           return;
         }
 
         // Create a new category section
-        if (el.hasAttribute(MENU_CATEGORY_DATA_ATTRIBUTE)) {
+        if (headingEl.hasAttribute(MENU_CATEGORY_DATA_ATTRIBUTE)) {
           currentCategory = {
-            category: el.getAttribute(MENU_CATEGORY_DATA_ATTRIBUTE) ?? '',
+            category:
+              headingEl.getAttribute(MENU_CATEGORY_DATA_ATTRIBUTE) ?? '',
             items: [],
           };
           categories.push(currentCategory);
 
           return;
         }
 
-        const id = `${
-          spectrumComponentsSamples?.contains(el) === true ? 'spectrum-' : ''
-        }${el.textContent}`
+        const idPrefix =
+          // eslint-disable-next-line no-nested-ternary
+          spectrumComponentsSamples?.contains(headingEl) === true
+            ? 'spectrum-'
+            : spectrumComparisonSamples?.contains(headingEl) === true
+            ? 'spectrum-compare-'
+            : '';
+
+        const id = `${idPrefix}${headingEl.textContent}`
           .toLowerCase()
           .replace(/\s/g, '-');
 
         // eslint-disable-next-line no-param-reassign
-        el.id = id;
+        headingEl.id = id;
 
-        currentCategory.items.push({ id, label: el.textContent });
+        currentCategory.items.push({ id, label: headingEl.textContent });
       });
 
     setLinks(categories);