feat(Slider): add toolbar on active thumb button

dnbexperience · Aug 25, 2022 · c1de47a · c1de47a
1 parent 1c2d8bf
commit c1de47a
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 70 deletions.
diff --git a/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx b/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx
@@ -5,19 +5,31 @@ import {
   validateDOMAttributes,
 } from '../../shared/component-helper'
 import Button from '../button/Button'
+import Tooltip from '../tooltip/Tooltip'
 import { useSliderEvents } from './hooks/useSliderEvents'
 import { useSliderProps } from './hooks/useSliderProps'
 import { clamp, getHumanNumber } from './SliderHelpers'
 
 export function SliderThumb() {
-  const {
-    values,
-    thumbIndex,
-    isVertical,
-    showStatus,
-    attributes,
-    allProps,
-  } = useSliderProps()
+  const { values } = useSliderProps()
+
+  return (
+    <>
+      {values.map((value, i) => {
+        return <Thumb key={i} value={value} currentIndex={i} />
+      })}
+    </>
+  )
+}
+
+type ThumbProps = {
+  value: number
+  currentIndex: number
+}
+
+function Thumb({ value, currentIndex }: ThumbProps) {
+  const { thumbIndex, isVertical, showStatus, attributes, allProps } =
+    useSliderProps()
 
   const {
     id,
@@ -31,6 +43,24 @@ export function SliderThumb() {
     numberFormat,
   } = allProps
 
+  const index = thumbIndex.current
+  const percent = clamp(((value - min) * 100) / (max - min))
+
+  const style = {
+    zIndex: index === currentIndex ? 4 : 3,
+    [`${isVertical ? 'top' : 'left'}`]: `${percent}%`,
+  } as React.CSSProperties
+
+  const humanNumber = getHumanNumber(value, numberFormat)
+
+  const [hover, setHover] = React.useState(false)
+  const onMouseEnterHandler = () => {
+    setHover(true)
+  }
+  const onMouseLeaveHandler = () => {
+    setHover(false)
+  }
+
   const {
     onThumbMouseDownHandler,
     onThumbMouseUpHandler,
@@ -68,54 +98,49 @@ export function SliderThumb() {
 
   return (
     <>
-      {values.map((value, i) => {
-        const index = thumbIndex.current
-        const percent = clamp(((value - min) * 100) / (max - min))
-
-        const style: React.CSSProperties = {
-          zIndex: index === i ? 4 : 3,
-          [`${isVertical ? 'top' : 'left'}`]: `${percent}%`,
-        }
-
-        const humanNumber = getHumanNumber(value, numberFormat)
-
-        return (
-          <React.Fragment key={i}>
-            <span className="dnb-slider__thumb" style={style}>
-              <input
-                type="range"
-                className="dnb-slider__button-helper"
-                min={min}
-                max={max}
-                step={step}
-                value={value}
-                disabled={disabled}
-                onChange={onHelperChangeHandler}
-                onFocus={onHelperFocusHandler}
-                aria-valuemin={min}
-                aria-valuemax={max}
-                aria-valuenow={value}
-                aria-valuetext={humanNumber ? humanNumber : undefined}
-                aria-orientation={isVertical ? 'vertical' : 'horizontal'}
-                data-index={i}
-                {...helperParams}
-              />
-
-              <Button
-                element="span"
-                type=""
-                variant="secondary"
-                disabled={disabled}
-                skeleton={skeleton}
-                data-index={i}
-                onMouseDown={onThumbMouseDownHandler}
-                onMouseUp={onThumbMouseUpHandler}
-                {...thumbParams}
-              />
-            </span>
-          </React.Fragment>
-        )
-      })}
+      <span
+        className="dnb-slider__thumb"
+        style={style}
+        onMouseEnter={onMouseEnterHandler}
+        onMouseLeave={onMouseLeaveHandler}
+      >
+        <input
+          type="range"
+          className="dnb-slider__button-helper"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          disabled={disabled}
+          onChange={onHelperChangeHandler}
+          onFocus={onHelperFocusHandler}
+          onFocusCapture={onMouseEnterHandler}
+          onBlurCapture={onMouseLeaveHandler}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={value}
+          aria-valuetext={humanNumber ? humanNumber : undefined}
+          aria-orientation={isVertical ? 'vertical' : 'horizontal'}
+          data-index={currentIndex}
+          {...helperParams}
+        />
+
+        <Button
+          element="span"
+          type=""
+          variant="secondary"
+          disabled={disabled}
+          skeleton={skeleton}
+          data-index={currentIndex}
+          onMouseDown={onThumbMouseDownHandler}
+          onMouseUp={onThumbMouseUpHandler}
+          {...thumbParams}
+        />
+
+        <Tooltip active={hover} omit_portal>
+          {String(value)}
+        </Tooltip>
+      </span>
     </>
   )
 }
diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
@@ -812,7 +812,8 @@ legend.dnb-form-label {
     left: 0;
     top: 0;
     z-index: 3;
-    display: block;
+    display: flex;
+    justify-content: center;
     transform: translate3d(-50%, 0, 0);
     border-radius: 50%; }
     .dnb-slider__button-helper,
@@ -872,6 +873,12 @@ legend.dnb-form-label {
     margin-top: 0.5rem; }
   .dnb-slider--vertical .dnb-form-status {
     margin-top: 1rem; }
+  .dnb-slider .dnb-tooltip {
+    top: -3rem;
+    transition: opacity 400ms ease; }
+    .dnb-slider .dnb-tooltip__content {
+      min-width: 0;
+      white-space: nowrap; }
   @media screen and (max-width: 40em) {
     .dnb-responsive-component .dnb-slider {
       display: flex;

diff --git a/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx b/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx
@@ -7,14 +7,7 @@ import React from 'react'
 import { Wrapper, Box } from 'storybook-utils/helpers'
 import styled from '@emotion/styled'
 
-import {
-  Slider,
-  ToggleButton,
-  Input,
-  FormRow,
-  FormLabel,
-  Tooltip,
-} from '../../'
+import { Slider, ToggleButton, Input, FormRow, FormLabel } from '../../'
 
 import '../../slider/style/dnb-range.scss'
 
@@ -50,12 +43,13 @@ export function MultiButtons() {
   return (
     <>
       <FixedSizeWrapper>
-        <Tooltip active show>
-          Tooltip
-        </Tooltip>
         <Slider
-          label="Label2:"
+          top="x-large"
+          // multiThumbBehavior="push"
+          multiThumbBehavior="omit"
+          label="Label:"
           value={value}
+          step={1}
           stretch
           numberFormat={{ decimals: 2, currency: true }}
           onChange={({ value, number }) => {

diff --git a/packages/dnb-eufemia/src/components/slider/style/_slider.scss b/packages/dnb-eufemia/src/components/slider/style/_slider.scss
@@ -157,7 +157,8 @@
     top: 0;
     z-index: 3;
 
-    display: block;
+    display: flex;
+    justify-content: center;
     transform: translate3d(-50%, 0, 0);
 
     // Because of the DropShadow
@@ -241,6 +242,16 @@
     margin-top: 1rem;
   }
 
+  .dnb-tooltip {
+    top: -3rem;
+    transition: opacity 400ms ease;
+
+    &__content {
+      min-width: 0;
+      white-space: nowrap;
+    }
+  }
+
   .dnb-responsive-component & {
     @media screen and (max-width: 40em) {
       display: flex;