diff --git a/packages/eds-core-react/src/components/Slider/Slider.tsx b/packages/eds-core-react/src/components/Slider/Slider.tsx index c56b445094..b2b522fa9f 100644 --- a/packages/eds-core-react/src/components/Slider/Slider.tsx +++ b/packages/eds-core-react/src/components/Slider/Slider.tsx @@ -59,13 +59,23 @@ type RangeWrapperProps = { } const RangeWrapper = styled.div.attrs( - ({ $min, $max, $valA, $valB, $disabled, $hideActiveTrack, style }) => ({ + ({ + $min, + $max, + $valA, + $valB, + $disabled, + $hideActiveTrack, + $labelAlwaysOn, + style, + }) => ({ 'data-disabled': $disabled ? true : null, style: { '--a': $valA, '--b': $valB, '--min': $min, '--max': $max, + '--showTooltip': $labelAlwaysOn ? 1 : 0, '--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack @@ -78,7 +88,6 @@ const RangeWrapper = styled.div.attrs( }, }), )` - ${({ $labelAlwaysOn }) => css({ '--showTooltip': $labelAlwaysOn ? 1 : 0 })}; --dif: calc(var(--max) - var(--min)); --realWidth: calc(100% - 12px); ${wrapperGrid} @@ -104,6 +113,13 @@ const RangeWrapper = styled.div.attrs( ); width: calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth)); } + + &:where(:hover, :has(:focus-visible)) { + > output { + --showTooltip: 1; + } + } + @media (hover: hover) and (pointer: fine) { &:hover:not([data-disabled]) { ${fakeTrackBgHover} @@ -113,9 +129,7 @@ const RangeWrapper = styled.div.attrs( } } } - &:where(:hover, :has(:focus-visible)) { - --showTooltip: 1; - } + ${({ $touchNavigation }) => $touchNavigation && css` @@ -140,11 +154,20 @@ type WrapperProps = { } & Pick const Wrapper = styled.div.attrs( - ({ $min, $max, value, disabled, $hideActiveTrack, style }) => ({ + ({ + $min, + $max, + value, + disabled, + $hideActiveTrack, + $labelAlwaysOn, + style, + }) => ({ style: { '--min': $min, '--max': $max, '--value': value, + '--showTooltip': $labelAlwaysOn ? 1 : 0, '--background': disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack @@ -157,7 +180,6 @@ const Wrapper = styled.div.attrs( }, }), )` - ${({ $labelAlwaysOn }) => css({ '--showTooltip': $labelAlwaysOn ? 1 : 0 })}; --dif: calc(var(--max) - var(--min)); --realWidth: calc(100% - 12px); ${wrapperGrid} @@ -173,6 +195,13 @@ const Wrapper = styled.div.attrs( /* Adjusting for start dot circle */ margin-left: 3px; } + + &:where(:hover, :has(:focus-visible)) { + > output { + --showTooltip: 1; + } + } + @media (hover: hover) and (pointer: fine) { &:hover:not([disabled]) { ${fakeTrackBgHover} @@ -181,9 +210,6 @@ const Wrapper = styled.div.attrs( } } } - &:where(:hover, :has(:focus-visible)) { - --showTooltip: 1; - } ` const WrapperGroupLabel = styled.div` @@ -199,7 +225,7 @@ const WrapperGroupLabelDots = styled(WrapperGroupLabel)` width: ${dot.width}; height: ${dot.height}; background: ${tokens.background}; - ${bordersTemplate(dot.border)} + ${bordersTemplate(dot.border)}; bottom: ${dot.spacings.bottom}; left: 0; } diff --git a/packages/eds-core-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/packages/eds-core-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap index 0a47ff81c1..ca9ee02574 100644 --- a/packages/eds-core-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap +++ b/packages/eds-core-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap @@ -178,7 +178,6 @@ exports[`Simple slider Matches snapshot 1`] = ` } .c0 { - --showTooltip: 0; --dif: calc(var(--max) - var(--min)); --realWidth: calc(100% - 12px); display: grid; @@ -186,7 +185,7 @@ exports[`Simple slider Matches snapshot 1`] = ` grid-template-columns: 1fr 1fr; width: 100%; position: relative; - background-image: url("data:image/svg+xml,");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,");}.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:' '; + background-image: url("data:image/svg+xml,");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;} .c0:where(:hover,:has(:focus-visible)) >output{--showTooltip:1;} @media (hover:hover) and (pointer:fine){.c0:hover:not([disabled]){background-image:url("data:image/svg+xml,");}.c0:hover:not([disabled])::after{background:var(--background-hover);}} .c4{grid-row:1;grid-column:1/3;} .c5:before,.c5:after{content:' '; display: block; position: absolute; width: 6px; @@ -238,7 +237,7 @@ exports[`Simple slider Matches snapshot 1`] = `