🐛 Slider: firefox bug show value on hover (#3224)

equinor · Jan 18, 2024 · 05651f3 · 05651f3
1 parent 39f4dcb
commit 05651f3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git 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
@@ -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;