Rename DomainSlider to DomainWidget

apps/storybook/.storybook/preview.ts

@@ -31,7 +31,7 @@ export const parameters = {
           ],
         ],
         'Toolbar',
-        ['Toolbar', 'DomainSlider', 'Histogram'],
+        ['Toolbar', 'DomainWidget', 'Histogram'],
         'Experimental',
       ],
     },

apps/storybook/src/Customization.mdx

@@ -146,7 +146,7 @@ as you see fit. For instance, if you'd like to change the color of the curve of
 | `--h5w-selector-option-focus--outlineColor` | `gray`                                       | Outline color of focused option      |
 | `--h5w-selector-groupLabel--color`          | `gray`                                       | Text color of group labels in menu   |
 
-##### Domain slider
+##### Domain widget
 
 | Name                                                 | Default                    | Description                                    |
 | ---------------------------------------------------- | -------------------------- | ---------------------------------------------- |

apps/storybook/src/DomainSlider.stories.tsx → apps/storybook/src/DomainWidget.stories.tsx

@@ -1,14 +1,14 @@
 import type { CustomDomain } from '@h5web/lib';
-import { DomainSlider, ScaleType } from '@h5web/lib';
+import { DomainWidget, ScaleType } from '@h5web/lib';
 import { COLOR_SCALE_TYPES } from '@h5web/shared';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
 import Center from './decorators/Center';
 
 const meta = {
-  title: 'Toolbar/DomainSlider',
-  component: DomainSlider,
+  title: 'Toolbar/DomainWidget',
+  component: DomainWidget,
   decorators: [Center],
   args: {
     customDomain: undefined,
@@ -20,7 +20,7 @@ const meta = {
       options: COLOR_SCALE_TYPES,
     },
   },
-} satisfies Meta<typeof DomainSlider>;
+} satisfies Meta<typeof DomainWidget>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -31,7 +31,7 @@ export const Default = {
     const [domain, setDomain] = useState<CustomDomain>(initialDomain);
 
     return (
-      <DomainSlider
+      <DomainWidget
         {...otherArgs}
         customDomain={domain}
         onCustomDomainChange={setDomain}

apps/storybook/src/Toolbar.stories.tsx

@@ -2,7 +2,7 @@ import type { ColorMap, CustomDomain } from '@h5web/lib';
 import {
   Btn,
   ColorMapSelector,
-  DomainSlider,
+  DomainWidget,
   GridToggler,
   ScaleSelector,
   ScaleType,
@@ -53,7 +53,7 @@ export const Default = {
     return (
       <>
         <Toolbar {...args}>
-          <DomainSlider
+          <DomainWidget
             dataDomain={[1, 100]}
             customDomain={customDomain}
             scaleType={scaleType}

packages/app/src/vis-packs/core/complex/ComplexToolbar.tsx

@@ -1,7 +1,7 @@
 import type { Domain } from '@h5web/lib';
 import {
   ColorMapSelector,
-  DomainSlider,
+  DomainWidget,
   ScaleSelector,
   Selector,
   Separator,
@@ -44,7 +44,7 @@ function ComplexToolbar(props: Props) {
 
   return (
     <Toolbar interactions={getImageInteractions(keepRatio)}>
-      <DomainSlider
+      <DomainWidget
         dataDomain={dataDomain}
         customDomain={customDomain}
         scaleType={scaleType}

packages/app/src/vis-packs/core/heatmap/HeatmapToolbar.tsx

@@ -1,7 +1,7 @@
 import type { Domain } from '@h5web/lib';
 import {
   ColorMapSelector,
-  DomainSlider,
+  DomainWidget,
   ExportMenu,
   FlipYAxisToggler,
   GridToggler,
@@ -48,7 +48,7 @@ function HeatmapToolbar(props: Props) {
 
   return (
     <Toolbar interactions={getImageInteractions(keepRatio)}>
-      <DomainSlider
+      <DomainWidget
         dataDomain={dataDomain}
         customDomain={customDomain}
         scaleType={scaleType}

packages/app/src/vis-packs/core/scatter/ScatterToolbar.tsx

@@ -1,7 +1,7 @@
 import type { Domain } from '@h5web/lib';
 import {
   ColorMapSelector,
-  DomainSlider,
+  DomainWidget,
   GridToggler,
   ScaleSelector,
   Separator,
@@ -53,7 +53,7 @@ function ScatterToolbar(props: Props) {
 
       <Separator />
 
-      <DomainSlider
+      <DomainWidget
         dataDomain={dataDomain}
         customDomain={customDomain}
         scaleType={scaleType}

packages/app/src/vis-packs/core/surface/SurfaceToolbar.tsx

@@ -1,7 +1,7 @@
 import type { Domain } from '@h5web/lib';
 import {
   ColorMapSelector,
-  DomainSlider,
+  DomainWidget,
   ScaleSelector,
   Separator,
   SnapshotBtn,
@@ -31,7 +31,7 @@ function SurfaceToolbar(props: Props) {
 
   return (
     <Toolbar>
-      <DomainSlider
+      <DomainWidget
         dataDomain={dataDomain}
         customDomain={customDomain}
         scaleType={scaleType}

packages/lib/src/index.ts

@@ -15,7 +15,7 @@ export { default as Btn } from './toolbar/controls/Btn';
 export { default as LinkBtn } from './toolbar/controls/LinkBtn';
 export { default as ToggleBtn } from './toolbar/controls/ToggleBtn';
 export { default as ToggleGroup } from './toolbar/controls/ToggleGroup';
-export { default as DomainSlider } from './toolbar/controls/DomainSlider/DomainSlider';
+export { default as DomainWidget } from './toolbar/controls/DomainWidget/DomainWidget';
 export { default as ColorMapSelector } from './toolbar/controls/ColorMapSelector/ColorMapSelector';
 export { default as ScaleSelector } from './toolbar/controls/ScaleSelector/ScaleSelector';
 export { default as GridToggler } from './toolbar/controls/GridToggler';
@@ -27,7 +27,7 @@ export { default as ResetZoomButton } from './toolbar/floating/ResetZoomButton';
 export { default as NotationToggleGroup } from './toolbar/controls/NotationToggleGroup';
 export { default as Histogram } from './toolbar/controls/Histogram/Histogram';
 export type { ToolbarProps } from './toolbar/Toolbar';
-export type { DomainSliderProps } from './toolbar/controls/DomainSlider/DomainSlider';
+export type { DomainWidgetProps } from './toolbar/controls/DomainWidget/DomainWidget';
 export type { HistogramProps } from './toolbar/controls/Histogram/Histogram';
 
 // Building blocks

packages/lib/src/toolbar/Toolbar.module.css

@@ -108,7 +108,7 @@ a.btn {
 
 .btn:active > .btnLike,
 .btn[data-raised]:active > .btnLike,
-.btn[aria-pressed='true'] > .btnLike, /* toggle buttons, domain slider "edit" button */
+.btn[aria-pressed='true'] > .btnLike, /* toggle buttons, domain widget "edit" button */
 .btn[aria-checked='true'] > .btnLike, /* toggle group buttons */
 .btn[aria-haspopup][aria-expanded='true'] > .btnLike  /* selectors and overflow menu buttons */ {
   background-color: var(--h5w-btnPressed--bgColor, white);

packages/lib/src/toolbar/controls/DomainSlider/DomainSlider.module.css → packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.module.css

@@ -19,15 +19,3 @@
 .root[data-disabled] > .sliderContainer {
   opacity: 0.5; /* edit button is itself disabled, so don't fade it more */
 }
-
-.slider {
-  display: flex;
-  margin-right: -0.25rem;
-  font-size: 0.75rem;
-  cursor: pointer;
-
-  --track-width: var(--h5w-domainSlider-track--width, 8rem);
-  --track-height: var(--h5w-domainSlider-track--height, 0.625rem);
-  --thumb-size: calc(var(--track-height) * 2.5);
-  --thumb-size-auto: calc(var(--thumb-size) * 0.9);
-}

packages/lib/src/toolbar/controls/DomainSlider/DomainSlider.tsx → packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.tsx

@@ -7,9 +7,9 @@ import { useSafeDomain, useVisDomain } from '../../../vis/heatmap/hooks';
 import type { CustomDomain, HistogramParams } from '../../../vis/models';
 import Histogram from '../Histogram/Histogram';
 import ToggleBtn from '../ToggleBtn';
-import styles from './DomainSlider.module.css';
 import type { DomainTooltipHandle } from './DomainTooltip';
 import DomainTooltip from './DomainTooltip';
+import styles from './DomainWidget.module.css';
 import ScaledSlider from './ScaledSlider';
 
 const TOOLTIP_ID = 'domain-tooltip';
@@ -23,7 +23,7 @@ interface Props {
   disabled?: boolean;
 }
 
-function DomainSlider(props: Props) {
+function DomainWidget(props: Props) {
   const { dataDomain, customDomain, scaleType, disabled = false } = props;
   const { onCustomDomainChange, histogram } = props;
 
@@ -152,5 +152,5 @@ function DomainSlider(props: Props) {
   );
 }
 
-export type { Props as DomainSliderProps };
-export default DomainSlider;
+export type { Props as DomainWidgetProps };
+export default DomainWidget;

packages/lib/src/toolbar/controls/DomainWidget/ScaledSlider.module.css

@@ -0,0 +1,11 @@
+.slider {
+  display: flex;
+  margin-right: -0.25rem;
+  font-size: 0.75rem;
+  cursor: pointer;
+
+  --track-width: var(--h5w-domainSlider-track--width, 8rem);
+  --track-height: var(--h5w-domainSlider-track--height, 0.625rem);
+  --thumb-size: calc(var(--track-height) * 2.5);
+  --thumb-size-auto: calc(var(--thumb-size) * 0.9);
+}

packages/lib/src/toolbar/controls/DomainSlider/ScaledSlider.tsx → packages/lib/src/toolbar/controls/DomainWidget/ScaledSlider.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 './DomainSlider.module.css';
+import styles from './ScaledSlider.module.css';
 import Thumb from './Thumb';
 import Track from './Track';