Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

💄 Slider: redesign, labelAlwaysOn prop #3143

Merged
merged 3 commits into from
Nov 9, 2023
Merged

💄 Slider: redesign, labelAlwaysOn prop #3143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
85ee46a
Slider: redesigned value label, font size
oddvernes Nov 9, 2023
6342293
added story for labelAlwaysOn
oddvernes Nov 9, 2023
fdf9e81
Update snapshot & docs
oddvernes Nov 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 25 additions & 5 deletions packages/eds-core-react/src/components/Slider/Output.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,42 @@ import { typographyTemplate } from '@equinor/eds-utils'
import { slider as tokens } from './Slider.tokens'

const {
entities: { track, output },
entities: { output },
} = tokens

const StyledOutput = styled.output`
--realWidth: calc(100% - 12px);
--background: rgb(0 0 0 / 0.8);
width: fit-content;
position: relative;
display: flex;
align-items: center;
border-radius: 4px;
z-index: 1;
${typographyTemplate(output.typography)}
background: ${tokens.background};
padding: 0 5px;
top: ${track.spacings.top};
${typographyTemplate(output.typography)};
color: white;
background: var(--background);
padding: 8px;
top: -32px;
pointer-events: none;
/* Calculate the distance on the track*/
margin-left: calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));
/* Idea: Transform negative ((width of outline elem - handle width) / 2 (half of width for centering)) */
transform: translate(calc(-1 * calc(var(--realWidth) / 2)));
grid-row: 2;
grid-column: 1 / -1;
opacity: var(--showTooltip);
`

const TooltipArrow = styled.svg`
width: 6px;
height: 8px;
position: absolute;
fill: var(--background);
top: calc(100% - 1px);
rotate: -90deg;
translate: -50%;
left: 50%;
`

type OutputProps = {
Expand All @@ -48,6 +65,9 @@ export const Output = forwardRef<HTMLOutputElement, OutputProps>(
htmlFor={htmlFor}
>
{children}
<TooltipArrow>
<path d="M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z" />
</TooltipArrow>
</StyledOutput>
)
},
Expand Down
4 changes: 4 additions & 0 deletions packages/eds-core-react/src/components/Slider/Slider.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@ import { Slider } from '@equinor/eds-core-react'

<Canvas of={ComponentStories.SimpleSlider} />

### Label always visible

<Canvas of={ComponentStories.LabelAlwaysOn} />

### Simple slider with steps

<Canvas of={ComponentStories.SimpleSliderWithSteps} />
Expand Down
10 changes: 10 additions & 0 deletions packages/eds-core-react/src/components/Slider/Slider.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,16 @@ export const SimpleSlider: StoryFn<SliderProps> = () => (
)
SimpleSlider.storyName = 'Simple slider'

export const LabelAlwaysOn: StoryFn<SliderProps> = () => (
<Slider
value={4}
min={0}
max={10}
aria-labelledby="simple-slider"
labelAlwaysOn
/>
)

export const SimpleSliderWithSteps: StoryFn<SliderProps> = () => (
<>
<Label
Expand Down
2 changes: 1 addition & 1 deletion packages/eds-core-react/src/components/Slider/Slider.tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export const slider: SliderToken = {
},
output: {
typography: {
...paragraph.overline,
...paragraph.caption,
color: textColor,
},
},
Expand Down
17 changes: 17 additions & 0 deletions packages/eds-core-react/src/components/Slider/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ type RangeWrapperProps = {
$max: number
$disabled: boolean
$hideActiveTrack: boolean
$labelAlwaysOn: boolean
}

const RangeWrapper = styled.div.attrs<RangeWrapperProps>(
Expand All @@ -75,6 +76,7 @@ const RangeWrapper = styled.div.attrs<RangeWrapperProps>(
},
}),
)<RangeWrapperProps>`
${({ $labelAlwaysOn }) => css({ '--showTooltip': $labelAlwaysOn ? 1 : 0 })};
--dif: calc(var(--max) - var(--min));
--realWidth: calc(100% - 12px);
${wrapperGrid}
Expand Down Expand Up @@ -109,12 +111,16 @@ const RangeWrapper = styled.div.attrs<RangeWrapperProps>(
}
}
}
&:where(:hover, :has(:focus-visible)) {
--showTooltip: 1;
}
`

type WrapperProps = {
$min: number
$max: number
$hideActiveTrack: boolean
$labelAlwaysOn: boolean
} & Pick<SliderProps, 'disabled' | 'value'>

const Wrapper = styled.div.attrs<WrapperProps>(
Expand All @@ -135,6 +141,7 @@ const Wrapper = styled.div.attrs<WrapperProps>(
},
}),
)<WrapperProps>`
${({ $labelAlwaysOn }) => css({ '--showTooltip': $labelAlwaysOn ? 1 : 0 })};
--dif: calc(var(--max) - var(--min));
--realWidth: calc(100% - 12px);
${wrapperGrid}
Expand All @@ -158,6 +165,9 @@ const Wrapper = styled.div.attrs<WrapperProps>(
}
}
}
&:where(:hover, :has(:focus-visible)) {
--showTooltip: 1;
}
`

const WrapperGroupLabel = styled.div`
Expand Down Expand Up @@ -226,6 +236,10 @@ export type SliderProps = {
disabled?: boolean
/** hides the "active" fill color from the track */
hideActiveTrack?: boolean
/** Make the current value tooltip always visible, otherwise it only shows on hover/focus
* @default false
*/
labelAlwaysOn?: boolean
} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>

export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
Expand All @@ -238,6 +252,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
onChangeCommitted,
minMaxDots = true,
minMaxValues = true,
labelAlwaysOn,
step = 1,
disabled,
hideActiveTrack,
Expand Down Expand Up @@ -394,6 +409,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
$min={min}
$disabled={disabled}
$hideActiveTrack={hideActiveTrack}
$labelAlwaysOn={labelAlwaysOn}
onMouseMove={findClosestRange}
onMouseDown={handleDragging}
onMouseUp={handleDragging}
Expand Down Expand Up @@ -457,6 +473,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
value={sliderValue[0]}
disabled={disabled}
$hideActiveTrack={hideActiveTrack}
$labelAlwaysOn={labelAlwaysOn}
>
<SliderInput
type="range"
Expand Down
57 changes: 39 additions & 18 deletions packages/eds-core-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,14 @@

exports[`Simple slider Matches snapshot 1`] = `
<DocumentFragment>
.c5 {
.c6 {
grid-row: 2;
margin: 0;
color: var(--eds_text__static_icons__tertiary, rgba(111, 111, 111, 1));
font-family: Equinor;
font-size: 0.625rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.600em;
letter-spacing: 0.069em;
text-transform: uppercase;
line-height: 1.143em;
text-align: left;
position: absolute;
left: 2px;
Expand All @@ -21,34 +19,49 @@ exports[`Simple slider Matches snapshot 1`] = `
transform: translate(calc(-1 * calc((100% - 8px) / 2)));
}

.c5:last-child {
.c6:last-child {
left: auto;
right: 2px;
transform: translate(calc((100% - 8px) / 2));
}

.c2 {
--realWidth: calc(100% - 12px);
--background: rgb(0 0 0 / 0.8);
width: fit-content;
position: relative;
display: flex;
align-items: center;
border-radius: 4px;
z-index: 1;
margin: 0;
color: var(--eds_text__static_icons__tertiary, rgba(111, 111, 111, 1));
font-family: Equinor;
font-size: 0.625rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.600em;
letter-spacing: 0.069em;
text-transform: uppercase;
line-height: 1.143em;
text-align: left;
background: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
padding: 0 5px;
top: 24px;
color: white;
background: var(--background);
padding: 8px;
top: -32px;
pointer-events: none;
margin-left: calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));
transform: translate(calc(-1 * calc(var(--realWidth) / 2)));
grid-row: 2;
grid-column: 1/-1;
opacity: var(--showTooltip);
}

.c3 {
width: 6px;
height: 8px;
position: absolute;
fill: var(--background);
top: calc(100% - 1px);
rotate: -90deg;
translate: -50%;
left: 50%;
}

.c1 {
Expand Down Expand Up @@ -165,14 +178,15 @@ exports[`Simple slider Matches snapshot 1`] = `
}

.c0 {
--showTooltip: 0;
--dif: calc(var(--max) - var(--min));
--realWidth: calc(100% - 12px);
display: grid;
grid-template-rows: max-content 24px;
grid-template-columns: 1fr 1fr;
width: 100%;
position: relative;
background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='var(--eds_ui_background__light, rgba(247, 247, 247, 1))' width='100%' height='4' rx='2' /></svg>");background-size:cover;background-repeat:no-repeat;} .c0::after{grid-column:1/span 2;grid-row:2;height:4px;margin-bottom:9px;align-self:end;content:'';background:var(--background);} .c0::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;} @media (hover:hover) and (pointer:fine){.c0:hover:not([disabled]){background-image:url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='var(--eds_ui_background__medium, rgba(220, 220, 220, 1))' width='100%' height='4' rx='2' /></svg>");}.c0:hover:not([disabled])::after{background:var(--background-hover);}} .c3{grid-row:1;grid-column:1/3;} .c4:before,.c4:after{content:' ';
background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='var(--eds_ui_background__light, rgba(247, 247, 247, 1))' width='100%' height='4' rx='2' /></svg>");background-size:cover;background-repeat:no-repeat;} .c0::after{grid-column:1/span 2;grid-row:2;height:4px;margin-bottom:9px;align-self:end;content:'';background:var(--background);} .c0::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;} @media (hover:hover) and (pointer:fine){.c0:hover:not([disabled]){background-image:url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='var(--eds_ui_background__medium, rgba(220, 220, 220, 1))' width='100%' height='4' rx='2' /></svg>");}.c0:hover:not([disabled])::after{background:var(--background-hover);}} .c0:where(:hover,:has(:focus-visible)){--showTooltip:1;} .c4{grid-row:1;grid-column:1/3;} .c5:before,.c5:after{content:' ';
display: block;
position: absolute;
width: 6px;
Expand All @@ -184,7 +198,7 @@ exports[`Simple slider Matches snapshot 1`] = `
left: 0;
}

.c4:after {
.c5:after {
right: 0;
left: auto;
}
Expand Down Expand Up @@ -247,17 +261,24 @@ exports[`Simple slider Matches snapshot 1`] = `
style="--val: 0;"
>
0
<svg
class="c3"
>
<path
d="M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
/>
</svg>
</output>
<div
class="c3 c4"
class="c4 c5"
/>
<span
class="c5"
class="c6"
>
0
</span>
<span
class="c5"
class="c6"
>
100
</span>
Expand Down