Rename CSS vars following DomainWidget refactor

silx-kit · Jul 19, 2023 · 7cc9a8e · 7cc9a8e
1 parent f998946
commit 7cc9a8e
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 83 deletions.
diff --git a/apps/storybook/src/Customization.mdx b/apps/storybook/src/Customization.mdx
@@ -111,15 +111,16 @@ as you see fit. For instance, if you'd like to change the color of the curve of
 
 #### Toolbar
 
-| Name                                     | Default              | Description                              |
-| ---------------------------------------- | -------------------- | ---------------------------------------- |
-| `--h5w-toolbar--bgColor`                 | `aliceblue`          | Background color of toolbar              |
-| `--h5w-toolbar--height`                  | `2.5rem`             | Height of toolbar                        |
-| `--h5w-toolbar-separator--color`         | `rgba(0, 0, 0, 0.2)` | Color of separators                      |
-| `--h5w-toolbar-label--color`             | `royalblue`          | Text color of control labels             |
-| `--h5w-toolbar-input--shadowColor`       | `dimgray`            | Box shadow color of text inputs          |
-| `--h5w-toolbar-input-hover--shadowColor` | `gray`               | Box shadow color of text inputs on hover |
-| `--h5w-toolbar-input-focus--shadowColor` | `royalblue`          | Box shadow color of text inputs on focus |
+| Name                                     | Default                    | Description                              |
+| ---------------------------------------- | -------------------------- | ---------------------------------------- |
+| `--h5w-toolbar--bgColor`                 | `aliceblue`                | Background color of toolbar              |
+| `--h5w-toolbar--height`                  | `2.5rem`                   | Height of toolbar                        |
+| `--h5w-toolbar-separator--color`         | `rgba(0, 0, 0, 0.2)`       | Color of separators                      |
+| `--h5w-toolbar-label--color`             | `royalblue`                | Text color of control labels             |
+| `--h5w-toolbar-input--shadowColor`       | `dimgray`                  | Box shadow color of text inputs          |
+| `--h5w-toolbar-input-hover--shadowColor` | `gray`                     | Box shadow color of text inputs on hover |
+| `--h5w-toolbar-input-focus--shadowColor` | `royalblue`                | Box shadow color of text inputs on focus |
+| `--h5w-toolbar-popup--bgColor`           | `rgba(255, 255, 255, 0.9)` | Background color of popups               |
 
 ##### Buttons
 
@@ -148,25 +149,25 @@ as you see fit. For instance, if you'd like to change the color of the curve of
 
 ##### Domain widget
 
-| Name                                                 | Default                    | Description                                    |
-| ---------------------------------------------------- | -------------------------- | ---------------------------------------------- |
-| `--h5w-domainSlider-track--width`                    | `8rem`                     | Width of track                                 |
-| `--h5w-domainSlider-track--height`                   | `0.625rem`                 | Height of track                                |
-| `--h5w-domainSlider-track--bgColor`                  | `gray`                     | Background color of track                      |
-| `--h5w-domainSlider-track--shadowColor`              | `gray`                     | Box shadow color of track                      |
-| `--h5w-domainSlider-dataTrack--bgColor`              | `royalblue`                | Background color of data track                 |
-| `--h5w-domainSlider-dataTrack--shadowColor`          | `midnightblue`             | Box shadow color of data track                 |
-| `--h5w-domainSlider-thumb--bgColor`                  | `lightgray`                | Background color of thumbs                     |
-| `--h5w-domainSlider-thumb-auto--bgColor`             | `whitesmoke`               | Background color of auto-scaled thumbs         |
-| `--h5w-domainSlider-tooltip--bgColor`                | `rgba(255, 255, 255, 0.9)` | Background color of tooltip                    |
-| `--h5w-domainSlider-tooltip--colorAlt`               | `#333`                     | Text color of bounds and data range in tooltip |
-| `--h5w-domainSlider-boundInput--shadowColor`         | `dimgray`                  | Box shadow color of bound inputs               |
-| `--h5w-domainSlider-boundInput-focus--shadowColor`   | `royalblue`                | Box shadow color of bound inputs on focus      |
-| `--h5w-domainSlider-boundInput-editing--bgColor`     | `white`                    | Background color of bound inputs when editing  |
-| `--h5w-domainSlider-boundInput-editing--borderColor` | `royalblue`                | Border color of bound inputs when editing      |
-| `--h5w-domainSlider-histogram--color`                | `royalblue`                | Fill color of histogram bars                   |
-| `--h5w-domainSlider-histogram-marker--color`         | `midnightblue`             | Color of histogram markers                     |
-| `--h5w-domainSlider-histogram-bgColor`               | `white`                    | Background color of histogram                  |
+| Name                                                   | Default                                                       | Description                                   |
+| ------------------------------------------------------ | ------------------------------------------------------------- | --------------------------------------------- |
+| `--h5w-domainWidget-popup--bgColor`                    | `var(--h5w-toolbar-popup--bgColor, rgba(255, 255, 255, 0.9))` | Background color of popup                     |
+| `--h5w-domainSlider-track--width`                      | `8rem`                                                        | Width of track                                |
+| `--h5w-domainSlider-track--height`                     | `0.625rem`                                                    | Height of track                               |
+| `--h5w-domainSlider-track--bgColor`                    | `gray`                                                        | Background color of track                     |
+| `--h5w-domainSlider-track--shadowColor`                | `gray`                                                        | Box shadow color of track                     |
+| `--h5w-domainSlider-dataTrack--bgColor`                | `royalblue`                                                   | Background color of data track                |
+| `--h5w-domainSlider-dataTrack--shadowColor`            | `midnightblue`                                                | Box shadow color of data track                |
+| `--h5w-domainSlider-thumb--bgColor`                    | `lightgray`                                                   | Background color of thumbs                    |
+| `--h5w-domainSlider-thumb-auto--bgColor`               | `whitesmoke`                                                  | Background color of auto-scaled thumbs        |
+| `--h5w-domainControls--colorAlt`                       | `#333`                                                        | Text color of bounds and data range           |
+| `--h5w-domainControls-boundInput--shadowColor`         | `dimgray`                                                     | Box shadow color of bound inputs              |
+| `--h5w-domainControls-boundInput-focus--shadowColor`   | `royalblue`                                                   | Box shadow color of bound inputs on focus     |
+| `--h5w-domainControls-boundInput-editing--bgColor`     | `white`                                                       | Background color of bound inputs when editing |
+| `--h5w-domainControls-boundInput-editing--borderColor` | `royalblue`                                                   | Border color of bound inputs when editing     |
+| `--h5w-histogram--bgColor`                             | `white`                                                       | Background color of histogram                 |
+| `--h5w-histogram--color`                               | `royalblue`                                                   | Fill color of histogram bars                  |
+| `--h5w-histogram-marker--color`                        | `midnightblue`                                                | Color of histogram markers                    |
 
 ##### Interaction help
 

diff --git a/apps/storybook/src/styles.css b/apps/storybook/src/styles.css
@@ -48,10 +48,10 @@ body {
   --h5w-domainSlider-dataTrack--shadowColor: var(--secondary-darker);
   --h5w-domainSlider-thumb--bgColor: var(--secondary);
   --h5w-domainSlider-thumb-auto--bgColor: var(--secondary-light);
-  --h5w-domainSlider-boundInput-focus--shadowColor: var(--secondary-dark);
-  --h5w-domainSlider-boundInput-editing--borderColor: var(--secondary-dark);
+  --h5w-domainControls-boundInput-focus--shadowColor: var(--secondary-dark);
+  --h5w-domainControls-boundInput-editing--borderColor: var(--secondary-dark);
   --h5w-selector-option-hover--bgColor: var(--secondary-light-bg);
   --h5w-selector-option-selected--bgColor: var(--secondary-light);
-  --h5w-domainSlider-histogram--color: var(--secondary-dark);
-  --h5w-domainSlider-histogram-marker--color: var(--secondary-darker);
+  --h5w-histogram--color: var(--secondary-dark);
+  --h5w-histogram-marker--color: var(--secondary-darker);
 }
diff --git a/packages/app/src/App.module.css b/packages/app/src/App.module.css
@@ -49,12 +49,12 @@
   --h5w-domainSlider-dataTrack--shadowColor: var(--secondary-darker);
   --h5w-domainSlider-thumb--bgColor: var(--secondary);
   --h5w-domainSlider-thumb-auto--bgColor: var(--secondary-light);
-  --h5w-domainSlider-boundInput-focus--shadowColor: var(--secondary-dark);
-  --h5w-domainSlider-boundInput-editing--borderColor: var(--secondary-dark);
+  --h5w-domainControls-boundInput-focus--shadowColor: var(--secondary-dark);
+  --h5w-domainControls-boundInput-editing--borderColor: var(--secondary-dark);
   --h5w-selector-option-hover--bgColor: var(--secondary-light-bg);
   --h5w-selector-option-selected--bgColor: var(--secondary-light);
-  --h5w-domainSlider-histogram--color: var(--secondary-dark);
-  --h5w-domainSlider-histogram-marker--color: var(--secondary-darker);
+  --h5w-histogram--color: var(--secondary-dark);
+  --h5w-histogram-marker--color: var(--secondary-darker);
   --h5w-interactionHelp-shortcut--bgColor: var(--primary-light);
 
   --h5w-line--color: darkblue;

diff --git a/packages/app/src/__tests__/DomainWidget.test.tsx b/packages/app/src/__tests__/DomainWidget.test.tsx
@@ -2,7 +2,7 @@ import { screen, within } from '@testing-library/react';
 
 import { renderApp } from '../test-utils';
 
-test('show slider with two thumbs and reveal tooltip on hover', async () => {
+test('show slider with two thumbs and reveal popup on hover', async () => {
   const { user } = await renderApp('/nexus_entry/nx_process/nx_data');
 
   const thumbs = await screen.findAllByRole('slider');
@@ -11,31 +11,31 @@ test('show slider with two thumbs and reveal tooltip on hover', async () => {
   expect(thumbs[1]).toHaveAttribute('aria-valuenow', '81');
 
   const editBtn = await screen.findByRole('button', { name: 'Edit domain' });
-  const tooltip = screen.getByRole('dialog', { hidden: true });
+  const popup = screen.getByRole('dialog', { hidden: true });
 
   expect(editBtn).toHaveAttribute('aria-expanded', 'false');
-  expect(tooltip).not.toBeVisible();
+  expect(popup).not.toBeVisible();
 
-  // Hover to show tooltip
+  // Hover to show popup
   await user.hover(editBtn);
   expect(editBtn).toHaveAttribute('aria-expanded', 'true');
-  expect(tooltip).toBeVisible();
+  expect(popup).toBeVisible();
 
-  // Unhover to hide tooltip
+  // Unhover to hide popup
   await user.unhover(editBtn);
   expect(editBtn).toHaveAttribute('aria-expanded', 'false');
-  expect(tooltip).not.toBeVisible();
+  expect(popup).not.toBeVisible();
 
-  // Hover and press escape to hide tooltip
+  // Hover and press escape to hide popup
   await user.hover(editBtn);
   await user.keyboard('{Escape}');
-  expect(tooltip).not.toBeVisible();
+  expect(popup).not.toBeVisible();
 });
 
-test('show min/max and data range in tooltip', async () => {
+test('show min/max and data range in popup', async () => {
   const { user } = await renderApp('/nexus_entry/nx_process/nx_data');
 
-  // Hover edit button to reveal tooltip
+  // Hover edit button to reveal popup
   const editBtn = await screen.findByRole('button', { name: 'Edit domain' });
   await user.hover(editBtn);
 
@@ -55,7 +55,7 @@ test('show min/max and data range in tooltip', async () => {
 test('move thumbs with keyboard to update domain', async () => {
   const { user } = await renderApp('/nexus_entry/nx_process/nx_data');
 
-  // Hover min thumb to reveal tooltip
+  // Hover min thumb to reveal popup
   const minThumb = await screen.findByRole('slider', { name: /min/ });
   await user.hover(minThumb);
 
@@ -100,7 +100,7 @@ test('edit bounds manually', async () => {
   const editBtn = await screen.findByRole('button', { name: 'Edit domain' });
   expect(editBtn).toHaveAttribute('aria-pressed', 'false');
 
-  // Click on edit button to open tooltip with both min and max in edit mode
+  // Click on edit button to open popup with both min and max in edit mode
   await user.click(editBtn);
   expect(editBtn).toHaveAttribute('aria-pressed', 'true');
   expect(editBtn).toHaveAttribute('aria-expanded', 'true');

diff --git a/packages/lib/src/toolbar/Toolbar.module.css b/packages/lib/src/toolbar/Toolbar.module.css
@@ -134,10 +134,7 @@ a.btn {
 }
 
 .popupInner {
-  background-color: var(
-    --h5w-domainSlider-tooltip--bgColor,
-    rgba(255, 255, 255, 0.9)
-  );
+  background-color: var(--h5w-toolbar-popup--bgColor, rgba(255, 255, 255, 0.9));
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
     rgba(0, 0, 0, 0.1) 0px 4px 11px;
 }
diff --git a/packages/lib/src/toolbar/controls/DomainWidget/BoundEditor.module.css b/packages/lib/src/toolbar/controls/DomainWidget/BoundEditor.module.css
@@ -10,7 +10,7 @@
   margin: 0 1rem 0 0;
   text-transform: uppercase;
   font-size: inherit;
-  color: var(--h5w-domainSlider-tooltip--colorAlt, #333);
+  color: var(--h5w-domainControls--colorAlt, #333);
 }
 
 .value {
@@ -21,9 +21,9 @@
   background-color: rgba(255, 255, 255, 0.5);
   border: 1px solid transparent;
   border-radius: 0.125rem;
-  box-shadow: 0 0 2px var(--h5w-domainSlider-boundInput--shadowColor, dimgray);
+  box-shadow: 0 0 2px var(--h5w-domainControls-boundInput--shadowColor, dimgray);
   text-align: right;
-  color: var(--h5w-domainSlider-tooltip--colorAlt, #333);
+  color: var(--h5w-domainControls--colorAlt, #333);
   font-weight: inherit;
   line-height: inherit;
   transition: background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
@@ -32,13 +32,13 @@
 
 .value:hover {
   box-shadow: 1px 1px 2px 1px
-    var(--h5w-domainSlider-boundInput--shadowColor, dimgray);
+    var(--h5w-domainControls-boundInput--shadowColor, dimgray);
 }
 
 .value:focus,
 .boundEditor[data-editing='true'] .value:hover {
   box-shadow: 1px 1px 2px 1px
-    var(--h5w-domainSlider-boundInput-focus--shadowColor, royalblue);
+    var(--h5w-domainControls-boundInput-focus--shadowColor, royalblue);
   outline: none;
 }
 
@@ -48,9 +48,12 @@
 }
 
 .boundEditor[data-editing='true'] .value {
-  background-color: var(--h5w-domainSlider-boundInput-editing--bgColor, white);
+  background-color: var(
+    --h5w-domainControls-boundInput-editing--bgColor,
+    white
+  );
   border-color: var(
-    --h5w-domainSlider-boundInput-editing--borderColor,
+    --h5w-domainControls-boundInput-editing--borderColor,
     royalblue
   );
   outline: none;

diff --git a/packages/lib/src/toolbar/controls/DomainWidget/BoundEditor.tsx b/packages/lib/src/toolbar/controls/DomainWidget/BoundEditor.tsx
@@ -39,7 +39,7 @@ const BoundEditor = forwardRef<Handle, Props>((props, ref) => {
   }
 
   /* Expose `cancel` function to parent component through ref handle so that
-    `inputValue` can be reset when the user closes the domain tooltip. */
+    `inputValue` can be reset when the user closes the domain widget popup. */
   useImperativeHandle(ref, () => ({ cancel }));
 
   useEffect(() => {
@@ -53,7 +53,7 @@ const BoundEditor = forwardRef<Handle, Props>((props, ref) => {
     }
 
     if (isEditing && bound === 'min') {
-      // Give focus to min field when opening tooltip in edit mode
+      // Give focus to min field when opening popup in edit mode
       inputRef.current?.focus();
     }
   }, [isEditing, bound]);

diff --git a/packages/lib/src/toolbar/controls/DomainWidget/DomainControls.module.css b/packages/lib/src/toolbar/controls/DomainWidget/DomainControls.module.css
@@ -1,8 +1,8 @@
-.tooltipControls > p {
+.root > p {
   margin-bottom: 0.75rem;
 }
 
-.tooltipControls > p:last-child {
+.root > p:last-child {
   margin-bottom: 0;
 }
 
@@ -14,7 +14,7 @@
 .dataRange > span {
   margin-left: 0.5rem;
   font-weight: 700;
-  color: var(--h5w-domainSlider-tooltip--colorAlt, #333);
+  color: var(--h5w-domainControls--colorAlt, #333);
 }
 
 .autoscale {

diff --git a/packages/lib/src/toolbar/controls/DomainWidget/DomainControls.tsx b/packages/lib/src/toolbar/controls/DomainWidget/DomainControls.tsx
@@ -49,7 +49,7 @@ const DomainControls = forwardRef<Handle, Props>((props, ref) => {
   const maxEditorRef = useRef<BoundEditorHandle>(null);
 
   /* Expose `cancelEditing` function to parent component through ref handle so that
-     editing can be cancelled when the user closes the domain tooltip. */
+     editing can be cancelled when the user closes the domain controls popup. */
   useImperativeHandle(ref, () => ({
     cancelEditing: () => {
       minEditorRef.current?.cancel();
@@ -58,7 +58,7 @@ const DomainControls = forwardRef<Handle, Props>((props, ref) => {
   }));
 
   return (
-    <div className={styles.tooltipControls}>
+    <div className={styles.root}>
       {minGreater && (
         <ErrorMessage
           error={DomainError.MinGreater}

diff --git a/...rols/DomainWidget/ScaledSlider.module.css → ...rols/DomainWidget/DomainSlider.module.css b/...rols/DomainWidget/ScaledSlider.module.css → ...rols/DomainWidget/DomainSlider.module.css
diff --git a/packages/lib/src/toolbar/controls/DomainWidget/DomainSlider.tsx b/packages/lib/src/toolbar/controls/DomainWidget/DomainSlider.tsx
@@ -7,7 +7,7 @@ import { getSafeDomain } from '../../../vis/heatmap/utils';
 import { useCombinedDomain } from '../../../vis/hooks';
 import type { DomainErrors } from '../../../vis/models';
 import { clampBound, createScale, extendDomain } from '../../../vis/utils';
-import styles from './ScaledSlider.module.css';
+import styles from './DomainSlider.module.css';
 import Thumb from './Thumb';
 import Track from './Track';
 

diff --git a/packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.module.css b/packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.module.css
@@ -20,19 +20,23 @@
   opacity: 0.5; /* edit button is itself disabled, so don't fade it more */
 }
 
-.tooltip {
+.popup {
   composes: popup from '../../Toolbar.module.css';
   z-index: 2; /* above overflow and selector menus */
-  /* Add invisible padding around tooltip to extend hover area */
+  /* Add invisible padding around popup to extend hover area */
   /* (especially for when enabling auto-scaling hides an error message). */
   padding-left: 2rem;
   padding-right: 2rem;
   padding-bottom: 2rem;
 }
 
-.tooltipInner {
+.popupInner {
   composes: popupInner from '../../Toolbar.module.css';
-  padding: 1rem 0.375rem 1rem 0.75rem;
   display: flex;
   align-items: center;
+  padding: 1rem 0.375rem 1rem 0.75rem;
+  background-color: var(
+    --h5w-domainWidget-popup--bgColor,
+    var(--h5w-toolbar-popup--bgColor, rgba(255, 255, 255, 0.9))
+  );
 }
diff --git a/packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.tsx b/packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.tsx
@@ -12,7 +12,7 @@ import DomainControls from './DomainControls';
 import DomainSlider from './DomainSlider';
 import styles from './DomainWidget.module.css';
 
-const TOOLTIP_ID = 'domain-tooltip';
+const POPUP_ID = 'h5w-domain-popup';
 
 interface Props {
   dataDomain: Domain;
@@ -51,12 +51,12 @@ function DomainWidget(props: Props) {
   function cancelEditing() {
     if (isEditing) {
       toggleEditing(false);
-      tooltipRef.current?.cancelEditing();
+      popupRef.current?.cancelEditing();
     }
   }
 
   const rootRef = useRef(null);
-  const tooltipRef = useRef<DomainControlsHandle>(null);
+  const popupRef = useRef<DomainControlsHandle>(null);
 
   useClickOutside(rootRef, cancelEditing);
   useKeyboardEvent('Escape', () => {
@@ -99,7 +99,7 @@ function DomainWidget(props: Props) {
           small
           label="Edit domain"
           aria-expanded={hovered || isEditing}
-          aria-controls={TOOLTIP_ID}
+          aria-controls={POPUP_ID}
           icon={FiEdit3}
           value={isEditing}
           disabled={disabled}
@@ -108,13 +108,13 @@ function DomainWidget(props: Props) {
       </div>
 
       <div
-        id={TOOLTIP_ID}
-        className={styles.tooltip}
+        id={POPUP_ID}
+        className={styles.popup}
         role="dialog"
         aria-label="Edit domain"
         hidden={!hovered && !isEditing}
       >
-        <div className={styles.tooltipInner}>
+        <div className={styles.popupInner}>
           {histogram && (
             <Histogram
               dataDomain={dataDomain}
@@ -130,7 +130,7 @@ function DomainWidget(props: Props) {
             />
           )}
           <DomainControls
-            ref={tooltipRef}
+            ref={popupRef}
             sliderDomain={sliderDomain}
             dataDomain={dataDomain}
             errors={errors}