Skip to content

Commit

Permalink
feat(Slider): add tooltip on active thumb button
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Sep 6, 2022
1 parent dde8576 commit fadc36a
Show file tree
Hide file tree
Showing 18 changed files with 298 additions and 191 deletions.
53 changes: 22 additions & 31 deletions packages/dnb-design-system-portal/src/docs/uilib/components/slider/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

import React from 'react'
import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
import { format } from '@dnb/eufemia/src/components/number-format/NumberUtils'

export const SliderExampleDefault = () => (
<ComponentBox data-visual-test="slider-default">
Expand All @@ -15,6 +16,8 @@ export const SliderExampleDefault = () => (
max={100}
value={70}
label="Default Slider:"
numberFormat={{ currency: 'EUR' }}
tooltip={true}
onChange={({ value }) => console.log('onChange:', value)}
/>
`
Expand All @@ -23,7 +26,7 @@ export const SliderExampleDefault = () => (
)

export const SliderExampleMultiButtons = () => (
<ComponentBox data-visual-test="slider-multi">
<ComponentBox data-visual-test="slider-multi" scope={{ format }}>
{
/* jsx */ `
<FormRow vertical>
Expand All @@ -33,15 +36,18 @@ export const SliderExampleMultiButtons = () => (
value={[30, 70]}
step={5}
label="Range with steps:"
numberFormat={{ currency: 'USD' }}
tooltip
onChange={({ value }) => console.log('onChange:', value)}
bottom
/>
<Slider
/>
<Slider
min={0}
max={100}
value={[10, 30, 50, 70]}
label="Multi thumbs:"
numberFormat={{ decimals: 2, currency: true }}
numberFormat={(value) => format(value, { percent: true, decimals: 0 })}
tooltip
onChange={({ value, number }) => console.log('onChange:', value, number)}
/>
</FormRow>
Expand All @@ -59,6 +65,8 @@ export const SliderExampleMultiButtonsThumbBehavior = () => (
multiThumbBehavior="omit"
value={[30, 70]}
label="Omit behavior:"
numberFormat={{ currency: 'EUR' }}
tooltip={true}
onChange={({ value }) => console.log('onChange:', value)}
bottom
/>
Expand All @@ -67,7 +75,8 @@ export const SliderExampleMultiButtonsThumbBehavior = () => (
value={[10, 50, 70]}
step={1}
label="Push behavior:"
numberFormat={{ decimals: 2, currency: true }}
numberFormat={{ currency: true }}
tooltip={true}
onChange={({ value, number }) => console.log('onChange:', value, number)}
/>
</FormRow>
Expand All @@ -77,27 +86,32 @@ export const SliderExampleMultiButtonsThumbBehavior = () => (
)

export const SliderExampleHorizontalSync = () => (
<ComponentBox useRender>
<ComponentBox useRender scope={{ format }}>
{
/* jsx */ `
const Component = () => {
const [value, setValue] = React.useState(70)
return (<>
<Slider
value={value}
step={10}
step={1}
hideButtons
label="Slider A:"
numberFormat={{ currency: 'EUR' }}
tooltip={true}
onChange={({ value }) => setValue(value)}
/>
<VerticalWrapper>
<Slider
value={value}
vertical={true}
hideButtons={true}
step={1}
step={10}
label="Slider B:"
labelDirection="vertical"
numberFormat={(value) => format(value, { currency: 'NOK' })}
tooltip
alwaysShowTooltip
onChange={({ value }) => setValue(value)}
/>
<Input
Expand Down Expand Up @@ -143,29 +157,6 @@ export const SliderExampleSuffix = () => (
</ComponentBox>
)

export const SliderExampleRange = () => (
<ComponentBox>
{
/* jsx */ `
<FormRow>
<FormLabel for_id="range-slider">
Native Range Slider
</FormLabel>
<input
id="range-slider"
type="range"
min={0}
max={100}
step={5}
defaultValue={20}
onChange={(event) => console.log(event.currentTarget.value)}
/>
</FormRow>
`
}
</ComponentBox>
)

export const SliderVerticalWithSteps = () => (
<ComponentBox data-visual-test="slider-vertical" useRender>
{
Expand Down
4 changes: 3 additions & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/slider/properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ showTabs: true
| `thumbTitle` | _(optional)_ give the slider thumb button a title for accessibility reasons. Defaults to `null`. |
| `subtractTitle` | _(optional)_ give the subtract button a title for accessibility reasons. Defaults to `−`. |
| `addTitle` | _(optional)_ give the add button a title for accessibility reasons. Defaults to `+`. |
| `numberFormat` | _(optional)_ Will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}` |
| `numberFormat` | _(optional)_ will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}` |
| `tooltip` | _(optional)_ use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value. |
| `alwaysShowTooltip` | _(optional)_ use `true` to always show the tooltip, in addition to the `tooltip` property. |
| `label` | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. |
| `labelDirection` | _(optional)_ use `labelDirection="vertical"` to change the label layout direction. Defaults to `horizontal`. |
| `labelSrOnly` | _(optional)_ use `true` to make the label only readable by screen readers. |
Expand Down
48 changes: 17 additions & 31 deletions packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
import {
format,
formatOptionParams,
formatValue,
formatReturnType,
formatReturnValue,
} from '../number-format/NumberUtils'
import { format, formatReturnValue } from '../number-format/NumberUtils'

import type { ValueTypes } from './types'
import type { NumberFormatTypes, ValueTypes } from './types'

export const percentToValue = (
percent: number,
Expand Down Expand Up @@ -124,29 +118,21 @@ export const closestIndex = (goal: number, array: Array<number>) => {
return array.findIndex((num) => num === res)
}

export const formatNumber = (
value: formatValue,
opts: formatOptionParams = null
): formatReturnType => {
if (opts) {
return format(value, opts)
}
return value
}

export const getHumanNumber = (
export const getFormattedNumber = (
value: number,
numberFormat: formatOptionParams
numberFormat: NumberFormatTypes
) => {
const num = value as number
const { aria: humanNumber } = (
numberFormat
? formatNumber(num, {
...(numberFormat || {}),
returnAria: true,
})
: { aria: null }
) as formatReturnValue

return String(humanNumber || value)
if (numberFormat) {
if (typeof numberFormat === 'function') {
const number = numberFormat(value as number) as string
return { number, aria: number }
}

return format(value as number, {
...(numberFormat || {}),
returnAria: true,
}) as formatReturnValue
}

return { aria: null, number: null } as formatReturnValue
}
16 changes: 11 additions & 5 deletions packages/dnb-eufemia/src/components/slider/SliderInstance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
} from './SliderTrack'
import { SliderThumb } from './SliderThumb'
import { useSliderProps } from './hooks/useSliderProps'
import { clamp, getHumanNumber } from './SliderHelpers'
import { clamp, getFormattedNumber } from './SliderHelpers'

export function SliderInstance() {
const context = React.useContext(Context)
Expand Down Expand Up @@ -164,15 +164,18 @@ function SubtractButton() {
subtractParams['aria-hidden'] = attributes['aria-hidden']
}

const humanNumber = getHumanNumber(value as number, numberFormat)
const humanNumber = getFormattedNumber(value as number, numberFormat)

return (
<Button
className="dnb-slider__button dnb-slider__button--subtract"
variant="secondary"
icon="subtract"
size="small"
aria-label={subtractTitle?.replace('%s', humanNumber)}
aria-label={subtractTitle?.replace(
'%s',
humanNumber.aria || String(value)
)}
on_click={onSubtractClickHandler}
disabled={disabled}
skeleton={skeleton}
Expand All @@ -196,15 +199,18 @@ function AddButton() {
addParams['aria-hidden'] = attributes['aria-hidden']
}

const humanNumber = getHumanNumber(value as number, numberFormat)
const humanNumber = getFormattedNumber(value as number, numberFormat)

return (
<Button
className="dnb-slider__button dnb-slider__button--add"
variant="secondary"
icon="add"
size="small"
aria-label={addTitle?.replace('%s', humanNumber)}
aria-label={addTitle?.replace(
'%s',
humanNumber.aria || String(value)
)}
on_click={onAddClickHandler}
disabled={disabled}
skeleton={skeleton}
Expand Down
7 changes: 4 additions & 3 deletions packages/dnb-eufemia/src/components/slider/SliderProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
import Context from '../../shared/Context'
import {
closestIndex,
formatNumber,
getFormattedNumber,
getUpdatedValues,
roundValue,
} from './SliderHelpers'
Expand Down Expand Up @@ -83,6 +83,8 @@ export function SliderProvider(localProps: SliderProps) {
hideButtons, // eslint-disable-line
multiThumbBehavior,
numberFormat,
tooltip, // eslint-disable-line
alwaysShowTooltip, // eslint-disable-line
skeleton,
max, // eslint-disable-line
min, // eslint-disable-line
Expand Down Expand Up @@ -206,14 +208,13 @@ export function SliderProvider(localProps: SliderProps) {
}

if (numberFormat) {
obj.number = formatNumber(numberValue, numberFormat)
obj.number = getFormattedNumber(numberValue, numberFormat).number
}

dispatchCustomElementEvent(allProps, 'onChange', obj)
}

updateValue(multiValues)
setShouldAnimate(false)
}
}

Expand Down
Loading

0 comments on commit fadc36a

Please sign in to comment.