Fixed Popover corners and styleguide tweaks (deephaven#293)

bmingles · Mar 7, 2024 · b37cf3f · b37cf3f
1 parent cfade93
commit b37cf3f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/packages/code-studio/src/styleguide/SamplesMenu.tsx b/packages/code-studio/src/styleguide/SamplesMenu.tsx
@@ -56,7 +56,7 @@ export function SamplesMenu(): JSX.Element {
     );
 
     const spectrumComparisonSamples = document.querySelector(
-      `#${SPECTRUM_COMPARISON_SAMPLES_ID}`
+      `#sample-section-${SPECTRUM_COMPARISON_SAMPLES_ID}`
     );
 
     document

diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.tsx b/packages/code-studio/src/styleguide/SpectrumComponents.tsx
@@ -39,12 +39,22 @@ import {
 } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { dhTruck, vsEmptyWindow } from '@deephaven/icons';
-import { SPECTRUM_COMPONENT_SAMPLES_ID } from './constants';
-import { sampleSectionIdAndClassesSpectrum } from './utils';
+import {
+  SAMPLE_SECTION_E2E_IGNORE,
+  SPECTRUM_COMPONENT_SAMPLES_ID,
+} from './constants';
+import {
+  sampleSectionIdAndClasses,
+  sampleSectionIdAndClassesSpectrum,
+} from './utils';
 
 export function SpectrumComponents(): JSX.Element {
   return (
-    <div id={SPECTRUM_COMPONENT_SAMPLES_ID}>
+    <div
+      {...sampleSectionIdAndClasses(SPECTRUM_COMPONENT_SAMPLES_ID, [
+        SAMPLE_SECTION_E2E_IGNORE,
+      ])}
+    >
       <h2 className="ui-title" data-no-menu>
         Spectrum Components
       </h2>

diff --git a/packages/code-studio/src/styleguide/StyleGuide.tsx b/packages/code-studio/src/styleguide/StyleGuide.tsx
@@ -104,6 +104,7 @@ function StyleGuide(): React.ReactElement {
         <Buttons />
         <Progress />
         <Inputs />
+        <Pickers />
         <ItemListInputs />
         <DraggableLists />
         <TimeSliderInputs />
@@ -112,7 +113,6 @@ function StyleGuide(): React.ReactElement {
         <ContextMenus />
         <DropdownMenus />
         <Navigations />
-        <Pickers />
         <Tooltips />
         <Icons />
         <Editors />

diff --git a/packages/components/scss/BaseStyleSheet.scss b/packages/components/scss/BaseStyleSheet.scss
@@ -8,8 +8,12 @@
 
   color: var(--dh-color-text);
 
-  .spectrum-theme-provider,
-  [class*='_spectrum--'] {
+  .spectrum-theme-provider {
+    // This is important for portals with rounded corners (e.g. Popover) so that
+    // the underlying background color shows.
+    --dh-spectrum-theme-provider-bg: unset;
+
+    background-color: var(--dh-spectrum-theme-provider-bg);
     color: var(--dh-color-text);
   }
 }