From 05651f3236166a9cc3760469f219b232612da365 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oove@equinor.com>
Date: Thu, 18 Jan 2024 15:04:13 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Slider:=20firefox=20bug=20show?=
 =?UTF-8?q?=20value=20on=20hover=20(#3224)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../eds-core-react/src/components/Slider/Slider.tsx    | 10 ++++++----
 .../Slider/__snapshots__/Slider.test.tsx.snap          |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/eds-core-react/src/components/Slider/Slider.tsx b/packages/eds-core-react/src/components/Slider/Slider.tsx
index 4d63c19e47..63c55ff045 100644
--- a/packages/eds-core-react/src/components/Slider/Slider.tsx
+++ b/packages/eds-core-react/src/components/Slider/Slider.tsx
@@ -114,8 +114,9 @@ const RangeWrapper = styled.div.attrs<RangeWrapperProps>(
     width: calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));
   }
 
-  &:where(:hover, :has(:focus-visible)) {
-    > output {
+  &:has(:focus-visible),
+  &:hover {
+    & > output {
       --showTooltip: 1;
     }
   }
@@ -196,8 +197,9 @@ const Wrapper = styled.div.attrs<WrapperProps>(
     margin-left: 3px;
   }
 
-  &:where(:hover, :has(:focus-visible)) {
-    > output {
+  &:has(:focus-visible),
+  &:hover {
+    & > output {
       --showTooltip: 1;
     }
   }
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 ca9ee02574..aae8f0b8db 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
@@ -185,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,<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;} .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,<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);}} .c4{grid-row:1;grid-column:1/3;} .c5:before,.c5: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;} .c0:has(:focus-visible)>output,.c0:hover>output{--showTooltip:1;} @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);}} .c4{grid-row:1;grid-column:1/3;} .c5:before,.c5:after{content:' ';
   display: block;
   position: absolute;
   width: 6px;