Tooltip for range slider

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapbox/mr-ui",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "UI components for Mapbox projects",
   "main": "index.js",
   "homepage": "./",

src/components/control-range/control-range.test.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import ControlRange from './control-range';
-import { render } from '@testing-library/react';
-// import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 describe('ControlRange', () => {
   describe('basic', () => {
     const mockOnChange = jest.fn();
     const props = {
       id: 'testinput',
       onChange: mockOnChange
-    }
+    };
 
     test('renders', () => {
-      const { baseElement } = render(<ControlRange {...props} />)
+      const { baseElement } = render(<ControlRange {...props} />);
       expect(baseElement).toMatchSnapshot();
     });
   });
@@ -23,10 +23,10 @@ describe('ControlRange', () => {
       id: 'testinput',
       onChange: mockOnChange,
       disabled: true
-    }
+    };
 
     test('renders', () => {
-      const { baseElement } = render(<ControlRange {...props} />)
+      const { baseElement } = render(<ControlRange {...props} />);
       expect(baseElement).toMatchSnapshot();
     });
   });
@@ -49,11 +49,42 @@ describe('ControlRange', () => {
       themeControlWrapper: 'bg-red-light',
       themeLabel: 'txt-s txt-bold color-white',
       onChange: mockOnChange
-    }
+    };
 
     test('renders', () => {
-      const { baseElement } = render(<ControlRange {...props} />)
+      const { baseElement } = render(<ControlRange {...props} />);
       expect(baseElement).toMatchSnapshot();
     });
   });
+
+  describe('tooltip', () => {
+    const mockOnChange = jest.fn();
+    window.HTMLElement.prototype.hasPointerCapture = jest.fn();
+    const props = {
+      id: 'testinput',
+      label: 'All options',
+      validationError: 'oh no!',
+      value: [200],
+      min: 100,
+      max: 1000,
+      step: 100,
+      optional: true,
+      autoFocus: true,
+      aside: <span>Aside text</span>,
+      themeControlRange: 'range--s range--red',
+      themeControlRangeActive: 'bg-red-dark',
+      themeControlWrapper: 'bg-red-light',
+      themeLabel: 'txt-s txt-bold color-white',
+      tooltip: true,
+      onChange: mockOnChange
+    };
+    test('renders', async () => {
+      render(<ControlRange {...props} />);
+      await userEvent.hover(screen.getByRole('slider'));
+
+      await waitFor(() => {
+        expect(screen.getByRole('tooltip')).toBeInTheDocument();
+      });
+    });
+  });
 });

src/components/control-range/control-range.tsx

@@ -1,10 +1,13 @@
-import React, {ReactElement, ReactNode} from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
 import PropTypes from 'prop-types';
 import omit from '../utils/omit';
 import ControlLabel from '../control-label';
 import ControlWrapper from '../control-wrapper';
 import { InputProps } from '../typings';
+import { getTheme } from '../utils/styles';
 
 const propNames = [
   'id',
@@ -24,7 +27,7 @@ const propNames = [
   'validator'
 ];
 
-interface Props extends Omit<InputProps, 'value' | 'onChange'>{
+interface Props extends Omit<InputProps, 'value' | 'onChange'> {
   id: string;
   onChange: (value: Array<number>, id: string) => void;
   value?: Array<number>;
@@ -39,6 +42,7 @@ interface Props extends Omit<InputProps, 'value' | 'onChange'>{
   themeControlThumb?: string;
   themeControlWrapper?: string;
   themeLabel?: string;
+  themeTooltipColoring?: 'light' | 'dark' | 'warning' | 'error';
 }
 
 export default function ControlRange({
@@ -56,9 +60,9 @@ export default function ControlRange({
   themeControlThumb = '',
   themeControlWrapper,
   themeLabel,
+  themeTooltipColoring = 'light',
   ...props
 }: Props): ReactElement {
-
   const extraProps = omit(props, propNames);
 
   const rootProps = {
@@ -76,7 +80,40 @@ export default function ControlRange({
   }
 
   const renderThumb = (value: number, index: number) => {
-    return <SliderPrimitive.Thumb key={index} className={`${themeControlThumb}`} />
+    if (tooltip) {
+      const { background, borderColor, color, fill, shadowColor } =
+        getTheme(themeTooltipColoring);
+      const tooltipClasses = `${background} ${borderColor} ${color} border round txt-s px12 py6 wmax240`;
+      return (
+        <TooltipPrimitive.Provider key={index} >
+          <TooltipPrimitive.Root delayDuration={150}>
+            <TooltipPrimitive.Trigger asChild>
+              <SliderPrimitive.Thumb className={`${themeControlThumb}`} />
+            </TooltipPrimitive.Trigger>
+            <TooltipPrimitive.Content
+              side="top"
+              align="center"
+              sideOffset={6}
+              className={tooltipClasses}
+              style={{
+                filter: `drop-shadow(0 0 4px ${shadowColor})`
+              }}
+            >
+              {value}
+              <TooltipPrimitive.Arrow
+                width={12}
+                height={6}
+                offset={6}
+                fill={fill}
+              />
+            </TooltipPrimitive.Content>
+          </TooltipPrimitive.Root>
+        </TooltipPrimitive.Provider>
+      );
+    }
+    return (
+      <SliderPrimitive.Thumb key={index} className={`${themeControlThumb}`} />
+    );
   };
 
   return (
@@ -97,7 +134,9 @@ export default function ControlRange({
       <div className={`range ${themeControlRange}`}>
         <SliderPrimitive.Root {...rootProps}>
           <SliderPrimitive.Track className={`${themeControlTrack}`}>
-            <SliderPrimitive.Range className={`absolute h-full ${themeControlRangeActive}`}/>
+            <SliderPrimitive.Range
+              className={`absolute h-full ${themeControlRangeActive}`}
+            />
           </SliderPrimitive.Track>
           {value.map(renderThumb)}
         </SliderPrimitive.Root>
@@ -134,5 +173,7 @@ ControlRange.propTypes = {
   /** Assembly classes to apply to the control wrapper */
   themeControlWrapper: PropTypes.string,
   /** Assembly classes to apply to the label element */
-  themeLabel: PropTypes.string
+  themeLabel: PropTypes.string,
+  /** `'light'`, `'dark'`, `'warning'`, or `'error'`. */
+  themeTooltipColoring: PropTypes.oneOf(['light', 'dark', 'warning', 'error'])
 };

src/components/control-range/examples/control-range-example-style.tsx

@@ -19,6 +19,7 @@ export default function Example() {
       themeControlRangeActive='bg-blue round'
       themeControlTrack='bg-gray h3'
       themeControlThumb='bg-blue border--0 h12 w12 shadow-darken25'
+      themeTooltipColoring='dark'
     />
   );
 }