🐛Slider: Fix label visibility for styled-components v5 (#3173)

* 🐛 Slider: Fix label visibility for styled v5 * update snapshot
equinor · Dec 6, 2023 · e0bfa3e · e0bfa3e
1 parent e60f98f
commit e0bfa3e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 14 deletions.
diff --git 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<RangeWrapperProps>(
-  ({ $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<RangeWrapperProps>(
     },
   }),
 )<RangeWrapperProps>`
-  ${({ $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<RangeWrapperProps>(
     );
     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<RangeWrapperProps>(
       }
     }
   }
-  &:where(:hover, :has(:focus-visible)) {
-    --showTooltip: 1;
-  }
+
   ${({ $touchNavigation }) =>
     $touchNavigation &&
     css`
@@ -140,11 +154,20 @@ type WrapperProps = {
 } & Pick<SliderProps, 'disabled' | 'value'>
 
 const Wrapper = styled.div.attrs<WrapperProps>(
-  ({ $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<WrapperProps>(
     },
   }),
 )<WrapperProps>`
-  ${({ $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<WrapperProps>(
     /* 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<WrapperProps>(
       }
     }
   }
-  &: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
@@ -178,15 +178,14 @@ 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);}} .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,<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:' ';
   display: block;
   position: absolute;
   width: 6px;
@@ -238,7 +237,7 @@ exports[`Simple slider Matches snapshot 1`] = `
 <div
     class="c0"
     id="test"
-    style="--min: 0; --max: 100; --value: 0; --background: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1)); --background-hover: var(--eds_interactive_primary__hover, rgba(0, 79, 85, 1));"
+    style="--min: 0; --max: 100; --value: 0; --showTooltip: 0; --background: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1)); --background-hover: var(--eds_interactive_primary__hover, rgba(0, 79, 85, 1));"
     value="0"
   >
     <input