From 91575ce0da39770f29d9cfda25bd15556658a82e Mon Sep 17 00:00:00 2001 From: CarolineVP Date: Fri, 19 Nov 2021 15:03:44 +0100 Subject: [PATCH 1/9] update `Slider` component --- src/Slider/Slider.interface.ts | 2 + src/Slider/Slider.stories.tsx | 17 ++- src/Slider/Slider.style.ts | 10 +- src/Slider/Slider.tsx | 127 +++++++++++--------- src/Slider/SliderBar/SliderBar.style.ts | 4 +- src/Slider/SliderDot/SliderDot.interface.ts | 4 + src/Slider/SliderDot/SliderDot.style.ts | 34 +++++- src/Slider/SliderDot/SliderDot.tsx | 20 ++- 8 files changed, 150 insertions(+), 68 deletions(-) diff --git a/src/Slider/Slider.interface.ts b/src/Slider/Slider.interface.ts index be90f73c4..74137e02c 100644 --- a/src/Slider/Slider.interface.ts +++ b/src/Slider/Slider.interface.ts @@ -26,6 +26,8 @@ export interface SliderInnerProps step?: number range?: boolean dots?: boolean + dotType?: 'regular' | 'tag' + reversed?: boolean indicators?: (Omit & { color?: string })[] tooltipFormatter?: SliderTooltipFormatter diff --git a/src/Slider/Slider.stories.tsx b/src/Slider/Slider.stories.tsx index 8e5432c92..71036e2cb 100644 --- a/src/Slider/Slider.stories.tsx +++ b/src/Slider/Slider.stories.tsx @@ -35,16 +35,27 @@ const GRID_LINES = [ title: 'Regular', props: { value: 40, + dotType: 'regular', + }, + }, + { + title: 'With tag', + props: { + value: 40, + dotType: 'tag', }, }, { title: 'No value', - props: {}, + props: { + dotType: 'regular', + }, }, { title: 'No value range', props: { range: true, + dotType: 'regular', }, }, { @@ -67,6 +78,7 @@ const GRID_LINES = [ value: [0, 30] as [number, number], indicators: [{ range: [70, 100] as [number, number] }], range: true, + dotType: 'regular', }, }, { @@ -105,9 +117,10 @@ const GRID_ITEMS = [ }, }, { - label: 'Fixed tooltip', + label: 'Fixed tooltip (regular dot only)', props: { shouldTooltipFollowDot: false, + dotType: 'regular', }, }, ] diff --git a/src/Slider/Slider.style.ts b/src/Slider/Slider.style.ts index 1abfc7777..54465ef46 100644 --- a/src/Slider/Slider.style.ts +++ b/src/Slider/Slider.style.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TagContainer } from '../Tag/Tag.style' import { theme } from '../theme' import { SliderBarContainer } from './SliderBar/SliderBar.style' @@ -39,6 +40,11 @@ export const SliderContent = styled.div` opacity: 0.7; pointer-events: none; filter: grayscale(); + ${TagContainer} { + color: ${theme.neutralColor(400)}; + background-color: ${theme.color('secondary', { variation: 'calmer' })}; + box-shadow: unset; + } } ` @@ -46,7 +52,7 @@ export const SliderMainBar = styled.div` background-color: ${theme.neutralColor(300)}; position: absolute; width: 100%; - height: 4px; + height: 3px; border-radius: 2px; ` @@ -71,7 +77,7 @@ export const SliderIndicator = styled.div` dynamic: true, valuePropName: 'color', })}; - height: 4px; + height: 3px; border-radius: 8px; z-index: 4; ` diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx index 0879952f0..ad086df4c 100644 --- a/src/Slider/Slider.tsx +++ b/src/Slider/Slider.tsx @@ -42,6 +42,8 @@ const InnerSlider = React.forwardRef( step: rawStep = 5, dots: rawDots, value: rawValue, + reversed = false, + dotType = 'tag', ...rest } = props @@ -71,6 +73,40 @@ const InnerSlider = React.forwardRef( [max, min] ) + const tooltips = React.useMemo(() => { + const buildTooltip = (tooltipValue: number): Tooltip => { + const label = customValues ? customValues[tooltipValue] : tooltipValue + const raw = `${isNil(label) ? '' : label}${tooltipSuffix}` + + const content = isFunction(tooltipFormatter) + ? tooltipFormatter(tooltipValue, raw) + : raw + + return { + content, + position: getPositionFromValue(tooltipValue), + } + } + + if (range) { + const rangeLocalValue = localValue as [number, number] + + return [ + buildTooltip(rangeLocalValue[0]), + buildTooltip(rangeLocalValue[1]), + ] + } + + return [buildTooltip(localValue as number)] + }, [ + customValues, + getPositionFromValue, + localValue, + range, + tooltipFormatter, + tooltipSuffix, + ]) + const indicators = React.useMemo( () => rawIndicators.map((indicator) => { @@ -172,6 +208,8 @@ const InnerSlider = React.forwardRef( onRest={() => handleChange(localValueRef.current)} innerColor={matchingIndicator ? matchingIndicator.color : undefined} large={rangeIndex > 0} + dotType={dotType} + tooltip={tooltips[rangeIndex]} /> ) } @@ -249,10 +287,15 @@ const InnerSlider = React.forwardRef( }) } - return getComponent({ - from: min, - to: (hasValue ? localValue : min) as number, - }) + return reversed + ? getComponent({ + from: (hasValue ? localValue : min) as number, + to: max, + }) + : getComponent({ + from: min, + to: (hasValue ? localValue : min) as number, + }) }, [ customValues, getPositionFromValue, @@ -288,40 +331,6 @@ const InnerSlider = React.forwardRef( [indicators] ) - const tooltips = React.useMemo(() => { - const buildTooltip = (tooltipValue: number): Tooltip => { - const label = customValues ? customValues[tooltipValue] : tooltipValue - const raw = `${isNil(label) ? '' : label}${tooltipSuffix}` - - const content = isFunction(tooltipFormatter) - ? tooltipFormatter(tooltipValue, raw) - : raw - - return { - content, - position: getPositionFromValue(tooltipValue), - } - } - - if (range) { - const rangeLocalValue = localValue as [number, number] - - return [ - buildTooltip(rangeLocalValue[0]), - buildTooltip(rangeLocalValue[1]), - ] - } - - return [buildTooltip(localValue as number)] - }, [ - customValues, - getPositionFromValue, - localValue, - range, - tooltipFormatter, - tooltipSuffix, - ]) - const possibleValues = Array.from( { length: (max - min) / step + 1 }, (_, i) => (min + i) * step @@ -348,26 +357,28 @@ const InnerSlider = React.forwardRef( /> ))} - - {tooltips.map((tooltip, index) => ( - - {tooltip.content} - - ))} - + {dotType === 'regular' && ( + + {tooltips.map((tooltip, index) => ( + + {tooltip.content} + + ))} + + )} ) } diff --git a/src/Slider/SliderBar/SliderBar.style.ts b/src/Slider/SliderBar/SliderBar.style.ts index 1f69fbc66..19cd99389 100644 --- a/src/Slider/SliderBar/SliderBar.style.ts +++ b/src/Slider/SliderBar/SliderBar.style.ts @@ -2,11 +2,11 @@ import styled from 'styled-components' export const SliderBarContainer = styled.div` position: absolute; - top: 6px; + top: 8px; margin-left: -4px; margin-right: -4px; z-index: 5; - height: 8px; + height: 3px; border-radius: 4px; ` diff --git a/src/Slider/SliderDot/SliderDot.interface.ts b/src/Slider/SliderDot/SliderDot.interface.ts index 09fe7fb77..1ceab938b 100644 --- a/src/Slider/SliderDot/SliderDot.interface.ts +++ b/src/Slider/SliderDot/SliderDot.interface.ts @@ -1,7 +1,11 @@ +import { Tooltip } from '../Slider.interface' + export interface SliderDotProps { position: number onMove: (deltaPixel: number) => void onRest: () => void innerColor?: string large?: boolean + dotType?: 'regular' | 'tag' + tooltip: Tooltip } diff --git a/src/Slider/SliderDot/SliderDot.style.ts b/src/Slider/SliderDot/SliderDot.style.ts index 6cc87ebbc..cd7ea29d3 100644 --- a/src/Slider/SliderDot/SliderDot.style.ts +++ b/src/Slider/SliderDot/SliderDot.style.ts @@ -1,12 +1,15 @@ import styled from 'styled-components' +import { Tag as BaseTag } from '../../Tag' import { theme } from '../../theme' export const SliderDotContent = styled.div` width: calc(var(--dot-radius) * 2); height: calc(var(--dot-radius) * 2); box-shadow: ${theme.shadow('low')}; - border: 2px solid #fff; + &:not([data-dotType='tag']) { + border: 2px solid #fff; + } border-radius: 50%; background-color: ${theme.color('primary', { dynamic: true })}; @@ -32,7 +35,7 @@ export const SliderDotContainer = styled.div` --dot-radius: 10px; - &:active { + &:active&:not([data-dotType='tag']) { --dot-radius: 12px; } @@ -49,3 +52,30 @@ export const SliderDotContainer = styled.div` margin-left: calc(var(--dot-radius) * -1.5); margin-top: calc(var(--dot-radius) * -1.5 + 2px); ` + +export const TagContainer = styled.div` + position: absolute; + &:active { + transform: translateY(-100%); + } +` + +export const Tag = styled(BaseTag)` + background-color: ${theme.color('primary', { + variation: 'calmer', + })}; + color: ${theme.color('primary')}; + box-shadow: unset; + + &:active { + background-color: ${theme.color('primary')}; + color: ${theme.neutralColor(0)}; + border-color: transparent; + } + + &:hover { + background-color: ${theme.color('primary')}; + color: ${theme.neutralColor(0)}; + border-color: transparent; + } +` diff --git a/src/Slider/SliderDot/SliderDot.tsx b/src/Slider/SliderDot/SliderDot.tsx index 18fabb08a..cbd21bfbc 100644 --- a/src/Slider/SliderDot/SliderDot.tsx +++ b/src/Slider/SliderDot/SliderDot.tsx @@ -1,7 +1,12 @@ import * as React from 'react' import { SliderDotProps } from './SliderDot.interface' -import { SliderDotContainer, SliderDotContent } from './SliderDot.style' +import { + SliderDotContainer, + SliderDotContent, + Tag, + TagContainer, +} from './SliderDot.style' type Listeners = { mousemove?: EventListener @@ -91,6 +96,8 @@ export const SliderDot: React.FunctionComponent = ({ onRest, innerColor, large = false, + dotType, + tooltip, }) => { const eventProps = useMouseMove({ onMove, onRest }) @@ -99,9 +106,18 @@ export const SliderDot: React.FunctionComponent = ({ data-testid="slider-dot" style={{ left: `${position}%` }} data-large={large} + data-dotType={dotType} {...eventProps} > - + + {dotType === 'tag' && !!tooltip.content && ( + + {tooltip.content} + + )} ) } From c461559b080f8ec206852dc9d30eac2316f81b44 Mon Sep 17 00:00:00 2001 From: CarolineVP Date: Mon, 22 Nov 2021 10:08:41 +0100 Subject: [PATCH 2/9] add `min` & `max` if no initial value --- src/Slider/Slider.stories.tsx | 1 + src/Slider/Slider.tsx | 9 ++++++--- src/Slider/SliderDot/SliderDot.tsx | 2 +- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/Slider/Slider.stories.tsx b/src/Slider/Slider.stories.tsx index 71036e2cb..f40f51ee3 100644 --- a/src/Slider/Slider.stories.tsx +++ b/src/Slider/Slider.stories.tsx @@ -94,6 +94,7 @@ const GRID_LINES = [ props: { value: 2, customValues: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6'], + range: true, }, }, { diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx index ad086df4c..bc6aef6b6 100644 --- a/src/Slider/Slider.tsx +++ b/src/Slider/Slider.tsx @@ -88,8 +88,11 @@ const InnerSlider = React.forwardRef( } } - if (range) { - const rangeLocalValue = localValue as [number, number] + if (range && Array.isArray(localValue)) { + const rangeLocalValue = + isNil(localValue[0]) || isNil(localValue[1]) + ? [min, max] + : (localValue as [number, number]) return [ buildTooltip(rangeLocalValue[0]), @@ -97,7 +100,7 @@ const InnerSlider = React.forwardRef( ] } - return [buildTooltip(localValue as number)] + return [buildTooltip(isNil(localValue) ? min : (localValue as number))] }, [ customValues, getPositionFromValue, diff --git a/src/Slider/SliderDot/SliderDot.tsx b/src/Slider/SliderDot/SliderDot.tsx index cbd21bfbc..4dd2c605f 100644 --- a/src/Slider/SliderDot/SliderDot.tsx +++ b/src/Slider/SliderDot/SliderDot.tsx @@ -113,7 +113,7 @@ export const SliderDot: React.FunctionComponent = ({ style={{ backgroundColor: innerColor }} data-dotType={dotType} /> - {dotType === 'tag' && !!tooltip.content && ( + {dotType === 'tag' && ( {tooltip.content} From bedf3f38d3dd208a5fa64a66881cb8a79a913dad Mon Sep 17 00:00:00 2001 From: CarolineVP Date: Mon, 22 Nov 2021 10:28:57 +0100 Subject: [PATCH 3/9] fix --- src/Slider/Slider.interface.ts | 3 +++ src/Slider/Slider.stories.tsx | 2 +- src/Slider/SliderDot/SliderDot.interface.ts | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/Slider/Slider.interface.ts b/src/Slider/Slider.interface.ts index 74137e02c..30caefe4b 100644 --- a/src/Slider/Slider.interface.ts +++ b/src/Slider/Slider.interface.ts @@ -26,6 +26,9 @@ export interface SliderInnerProps step?: number range?: boolean dots?: boolean + /** + * @default 'tag' + */ dotType?: 'regular' | 'tag' reversed?: boolean indicators?: (Omit & { color?: string })[] diff --git a/src/Slider/Slider.stories.tsx b/src/Slider/Slider.stories.tsx index f40f51ee3..c88874551 100644 --- a/src/Slider/Slider.stories.tsx +++ b/src/Slider/Slider.stories.tsx @@ -5,7 +5,7 @@ import { withGrid } from '../_storybook/withGrid' import { Slider, SliderProps } from './index' -type Props = Omit +type Props = Omit const SliderWithState: React.FunctionComponent = ({ value: initialValue, diff --git a/src/Slider/SliderDot/SliderDot.interface.ts b/src/Slider/SliderDot/SliderDot.interface.ts index 1ceab938b..c966144b3 100644 --- a/src/Slider/SliderDot/SliderDot.interface.ts +++ b/src/Slider/SliderDot/SliderDot.interface.ts @@ -6,6 +6,6 @@ export interface SliderDotProps { onRest: () => void innerColor?: string large?: boolean - dotType?: 'regular' | 'tag' + dotType: 'regular' | 'tag' tooltip: Tooltip } From 58917320834c3b7ab4409e292aa8fc5c000c58af Mon Sep 17 00:00:00 2001 From: CarolineVP Date: Mon, 22 Nov 2021 13:08:46 +0100 Subject: [PATCH 4/9] fix tests --- src/Slider/Slider.spec.tsx | 14 -------------- src/Slider/Slider.tsx | 1 - src/Slider/SliderDot/SliderDot.tsx | 4 +++- 3 files changed, 3 insertions(+), 16 deletions(-) diff --git a/src/Slider/Slider.spec.tsx b/src/Slider/Slider.spec.tsx index 44cbc1975..1d6d974f3 100644 --- a/src/Slider/Slider.spec.tsx +++ b/src/Slider/Slider.spec.tsx @@ -61,20 +61,6 @@ describe('Slider component', () => { expect(getByTestId('slider-tooltip').textContent).toEqual('50m²') }) - - it('should position the tooltip under the dot', () => { - const { getByTestId } = render() - - expect(getByTestId('slider-tooltip')).toHaveStyle('padding-left: 50%') - }) - - it('should update the tooltip position when the dot is programmatically moved', () => { - const { queryByTestId, rerender } = render() - - rerender() - - expect(queryByTestId('slider-tooltip')).toHaveStyle('padding-left: 0%') - }) }) describe('UI: range = true', () => { diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx index bc6aef6b6..7bd69b270 100644 --- a/src/Slider/Slider.tsx +++ b/src/Slider/Slider.tsx @@ -365,7 +365,6 @@ const InnerSlider = React.forwardRef( {tooltips.map((tooltip, index) => ( = ({ /> {dotType === 'tag' && ( - {tooltip.content} + + {tooltip.content} + )} From de74c608b703c001c55c93a83d3a0b00bb8bc04a Mon Sep 17 00:00:00 2001 From: CarolineVP Date: Mon, 22 Nov 2021 14:37:13 +0100 Subject: [PATCH 5/9] fix min value --- src/Slider/Slider.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx index 7bd69b270..3505f2d63 100644 --- a/src/Slider/Slider.tsx +++ b/src/Slider/Slider.tsx @@ -100,7 +100,11 @@ const InnerSlider = React.forwardRef( ] } - return [buildTooltip(isNil(localValue) ? min : (localValue as number))] + return [ + buildTooltip( + !localValue || isNil(localValue) ? min : (localValue as number) + ), + ] }, [ customValues, getPositionFromValue, From 40f81db0e67b9a5218872bdf12909205e2af155f Mon Sep 17 00:00:00 2001 From: CarolineVP Date: Mon, 22 Nov 2021 15:34:04 +0100 Subject: [PATCH 6/9] Improve tests --- src/Slider/Slider.spec.tsx | 17 +++++++++++++++-- src/Slider/Slider.tsx | 1 + src/Slider/SliderDot/SliderDot.tsx | 2 +- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/Slider/Slider.spec.tsx b/src/Slider/Slider.spec.tsx index 1d6d974f3..5b854fa9d 100644 --- a/src/Slider/Slider.spec.tsx +++ b/src/Slider/Slider.spec.tsx @@ -53,13 +53,26 @@ describe('Slider component', () => { it('should put the current value as tooltip if no tooltipSuffix and tooltipFormatter given', () => { const { getByTestId } = render() - expect(getByTestId('slider-tooltip').textContent).toEqual('50') + expect(getByTestId('slider-tag').textContent).toEqual('50') }) it('should add the tooltipSuffix to the value', () => { const { getByTestId } = render() - expect(getByTestId('slider-tooltip').textContent).toEqual('50m²') + expect(getByTestId('slider-tag').textContent).toEqual('50m²') + }) + + it('should position the tooltip under the dot when dotType is regular', () => { + const { getByTestId } = render() + + expect(getByTestId('slider-tooltip')).toHaveStyle('padding-left: 50%') + }) + + it('should update the tooltip position when the dot is programmatically moved when dotType is regular', () => { + const { queryByTestId, rerender } = render() + + rerender() + expect(queryByTestId('slider-tooltip')).toHaveStyle('padding-left: 0%') }) }) diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx index 3505f2d63..76d53d6ee 100644 --- a/src/Slider/Slider.tsx +++ b/src/Slider/Slider.tsx @@ -369,6 +369,7 @@ const InnerSlider = React.forwardRef( {tooltips.map((tooltip, index) => ( = ({ /> {dotType === 'tag' && ( - + {tooltip.content} From 86a5888388c54e8d7bc28d2b24388d0346fd5797 Mon Sep 17 00:00:00 2001 From: CarolineVP Date: Tue, 23 Nov 2021 19:01:20 +0100 Subject: [PATCH 7/9] various improvements --- src/Slider/Slider.interface.ts | 5 ++--- src/Slider/Slider.style.ts | 14 ++++++++------ src/Slider/Slider.tsx | 8 ++++---- src/Slider/SliderBar/SliderBar.style.ts | 1 - src/Slider/SliderDot/SliderDot.style.ts | 2 +- 5 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/Slider/Slider.interface.ts b/src/Slider/Slider.interface.ts index 30caefe4b..26398f9d6 100644 --- a/src/Slider/Slider.interface.ts +++ b/src/Slider/Slider.interface.ts @@ -26,14 +26,13 @@ export interface SliderInnerProps step?: number range?: boolean dots?: boolean - /** - * @default 'tag' - */ + /** @default 'tag' */ dotType?: 'regular' | 'tag' reversed?: boolean indicators?: (Omit & { color?: string })[] tooltipFormatter?: SliderTooltipFormatter + /** @deprecated Use `tooltipFormatter` instead. */ tooltipSuffix?: string value: Value diff --git a/src/Slider/Slider.style.ts b/src/Slider/Slider.style.ts index 54465ef46..de0081dd3 100644 --- a/src/Slider/Slider.style.ts +++ b/src/Slider/Slider.style.ts @@ -8,7 +8,11 @@ import { SliderBarContainer } from './SliderBar/SliderBar.style' export const SliderContainer = styled.div` position: relative; margin: 0 4px; - padding-top: 32px; + padding: 16px 0; + &[data-dotType='regular'] { + padding-bottom: 8px; + padding-top: 32px; + } ` export const SliderTooltips = styled.div` @@ -29,7 +33,6 @@ export const SliderTooltips = styled.div` export const SliderContent = styled.div` position: relative; - padding: 8px 0; cursor: pointer; & ${SliderBarContainer}[data-main='true'] { @@ -59,11 +62,10 @@ export const SliderMainBar = styled.div` export const SliderBackgroundDot = styled.div` position: absolute; margin-left: -4px; - margin-top: -2px; - z-index: 3; + z-index: 5; cursor: grab; - width: 8px; - height: 8px; + width: 4px; + height: 4px; background-color: ${theme.neutralColor(500)}; box-shadow: ${theme.shadow('lower')}; touch-action: pan-x; diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx index 76d53d6ee..2844ab997 100644 --- a/src/Slider/Slider.tsx +++ b/src/Slider/Slider.tsx @@ -34,7 +34,6 @@ const InnerSlider = React.forwardRef( range = false, onChange = () => {}, tooltipFormatter, - tooltipSuffix = '', customValues, indicators: rawIndicators = [], min = 0, @@ -76,7 +75,7 @@ const InnerSlider = React.forwardRef( const tooltips = React.useMemo(() => { const buildTooltip = (tooltipValue: number): Tooltip => { const label = customValues ? customValues[tooltipValue] : tooltipValue - const raw = `${isNil(label) ? '' : label}${tooltipSuffix}` + const raw = `${isNil(label) ? '' : label}` const content = isFunction(tooltipFormatter) ? tooltipFormatter(tooltipValue, raw) @@ -111,7 +110,8 @@ const InnerSlider = React.forwardRef( localValue, range, tooltipFormatter, - tooltipSuffix, + min, + max, ]) const indicators = React.useMemo( @@ -344,7 +344,7 @@ const InnerSlider = React.forwardRef( ) return ( - + Date: Tue, 23 Nov 2021 22:39:45 +0100 Subject: [PATCH 8/9] remove `tooltipSuffix` test --- src/Slider/Slider.spec.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/Slider/Slider.spec.tsx b/src/Slider/Slider.spec.tsx index 5b854fa9d..4533d5e8a 100644 --- a/src/Slider/Slider.spec.tsx +++ b/src/Slider/Slider.spec.tsx @@ -56,12 +56,6 @@ describe('Slider component', () => { expect(getByTestId('slider-tag').textContent).toEqual('50') }) - it('should add the tooltipSuffix to the value', () => { - const { getByTestId } = render() - - expect(getByTestId('slider-tag').textContent).toEqual('50m²') - }) - it('should position the tooltip under the dot when dotType is regular', () => { const { getByTestId } = render() From 7a2f14d00f44eb9e9f314d02096d110e2e387cc3 Mon Sep 17 00:00:00 2001 From: CarolineVP Date: Wed, 24 Nov 2021 09:29:41 +0100 Subject: [PATCH 9/9] add test + test pre-commit --- package.json | 2 +- src/Slider/Slider.spec.tsx | 10 +++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 2af523506..ac92c0de5 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ }, "husky": { "hooks": { - "pre-commit": "lint-staged" + "pre-commit": "lint-staged && npm run test" } }, "lint-staged": { diff --git a/src/Slider/Slider.spec.tsx b/src/Slider/Slider.spec.tsx index 4533d5e8a..ef288611d 100644 --- a/src/Slider/Slider.spec.tsx +++ b/src/Slider/Slider.spec.tsx @@ -50,12 +50,20 @@ describe('Slider component', () => { expect(bar).toHaveStyle('right: 50%') }) - it('should put the current value as tooltip if no tooltipSuffix and tooltipFormatter given', () => { + it('should put the current value as tooltip if no tooltipFormatter given', () => { const { getByTestId } = render() expect(getByTestId('slider-tag').textContent).toEqual('50') }) + it('should take into account the tooltipFormatter given', () => { + const { getByTestId } = render( + `${value} m²`} /> + ) + + expect(getByTestId('slider-tag').textContent).toEqual('50 m²') + }) + it('should position the tooltip under the dot when dotType is regular', () => { const { getByTestId } = render()