💄Slider: removed arrow & added labelBelow prop (#3227)

* 💄Slider: removed arrow & added labelBelow prop * 📸 snapshot * try green design * 💄 Adding disabled color to output * 📸 Update snapshot * use token for background
equinor · Feb 7, 2024 · 1ad69a8 · 1ad69a8
1 parent b97e646
commit 1ad69a8
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 49 deletions.
diff --git a/packages/eds-core-react/src/components/Slider/Output.tsx b/packages/eds-core-react/src/components/Slider/Output.tsx
@@ -14,7 +14,7 @@ const {
 
 const StyledOutput = styled.output`
   --realWidth: calc(100% - 12px);
-  --background: rgb(0 0 0 / 0.8);
+  --background: var(--tooltip-background, ${output.background});
   width: fit-content;
   position: absolute;
   display: flex;
@@ -24,8 +24,8 @@ const StyledOutput = styled.output`
   ${typographyTemplate(output.typography)};
   color: white;
   background: var(--background);
-  padding: 4px 8px;
-  bottom: calc(100% + 8px);
+  padding: 4px 4px 2px 4px;
+  bottom: calc(100% + 1px);
   pointer-events: none;
   /* Calculate the distance on the track*/
   margin-left: calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));
@@ -34,17 +34,10 @@ const StyledOutput = styled.output`
   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%;
+  [data-disabled] & {
+    background: ${output.states.disabled.background};
+    color: ${output.states.disabled.typography.color};
+  }
 `
 
 type OutputProps = {
@@ -65,9 +58,6 @@ 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>
     )
   },

diff --git a/packages/eds-core-react/src/components/Slider/Slider.docs.mdx b/packages/eds-core-react/src/components/Slider/Slider.docs.mdx
@@ -70,3 +70,7 @@ import { Slider } from '@equinor/eds-core-react'
 ### Hide active track
 `hideActiveTrack` visually removes the moss green fill color from the "active" part of the track
 <Canvas of={ComponentStories.HideActiveTrack} />
+
+### Label below
+
+<Canvas of={ComponentStories.SliderStack} />
diff --git a/packages/eds-core-react/src/components/Slider/Slider.stories.tsx b/packages/eds-core-react/src/components/Slider/Slider.stories.tsx
@@ -1,9 +1,17 @@
 import { useState, ChangeEvent } from 'react'
 import { Label, Slider, SliderProps, Typography } from '../..'
 import { StoryFn, Meta } from '@storybook/react'
+import styled from 'styled-components'
 import { Stack } from './../../../.storybook/components'
 import page from './Slider.docs.mdx'
 
+const StyledSlider = styled(Slider)`
+  margin-bottom: 32px;
+`
+const StyledLabel = styled(Label)`
+  margin-bottom: 8px;
+`
+
 const meta: Meta<typeof Slider> = {
   title: 'Inputs/Slider',
   component: Slider,
@@ -189,3 +197,33 @@ export const HideActiveTrack: StoryFn<SliderProps> = () => (
     />
   </>
 )
+
+export const SliderStack: StoryFn<SliderProps> = () => (
+  <div style={{ width: '100%' }}>
+    <StyledLabel label="Its a range slider" id="below-1" />
+    <StyledSlider
+      aria-labelledby="below-1"
+      min={30}
+      value={[40, 60]}
+      labelBelow
+      labelAlwaysOn
+    />
+    <StyledLabel label="Another range slider" id="below-2" />
+    <StyledSlider
+      aria-labelledby="below-2"
+      min={30}
+      value={[30, 70]}
+      labelBelow
+      labelAlwaysOn
+    />
+    <StyledLabel label="Slider" id="below-3" />
+    <StyledSlider
+      aria-labelledby="below-3"
+      min={0}
+      value={[35]}
+      labelBelow
+      labelAlwaysOn
+    />
+  </div>
+)
+RangeSliderWithInterval.storyName = 'Range slider with interval'
diff --git a/packages/eds-core-react/src/components/Slider/Slider.tokens.ts b/packages/eds-core-react/src/components/Slider/Slider.tokens.ts
@@ -14,6 +14,7 @@ const {
       primary__hover: { rgba: primaryHover },
       focus: { rgba: focusOutlineColor },
       disabled__fill: { rgba: backgroundColorDisabled },
+      disabled__text: { rgba: textColorDisabled },
       disabled__border: { rgba: backgroundBorderDisabled },
     },
     text: {
@@ -58,10 +59,22 @@ export const slider: SliderToken = {
       },
     },
     output: {
+      background: indicatorColor,
       typography: {
         ...paragraph.caption,
         color: textColor,
       },
+      states: {
+        hover: {
+          background: primaryHover,
+        },
+        disabled: {
+          background: backgroundColorDisabled,
+          typography: {
+            color: textColorDisabled,
+          },
+        },
+      },
     },
     handle: {
       background: backgroundColorDefault,

diff --git a/packages/eds-core-react/src/components/Slider/Slider.tsx b/packages/eds-core-react/src/components/Slider/Slider.tsx
@@ -18,7 +18,7 @@ import { SliderInput } from './SliderInput'
 import { bordersTemplate, useId } from '@equinor/eds-utils'
 
 const {
-  entities: { track, handle, dot },
+  entities: { track, handle, dot, output },
 } = tokens
 
 const fakeTrackBg = css`
@@ -55,6 +55,7 @@ type RangeWrapperProps = {
   $disabled: boolean
   $hideActiveTrack: boolean
   $labelAlwaysOn: boolean
+  $labelBelow: boolean
   $touchNavigation: boolean
 }
 
@@ -118,6 +119,7 @@ const RangeWrapper = styled.div.attrs<RangeWrapperProps>(
   &:hover {
     & > output {
       --showTooltip: 1;
+      --tooltip-background: ${output.states.hover.background};
     }
   }
 
@@ -145,31 +147,42 @@ const RangeWrapper = styled.div.attrs<RangeWrapperProps>(
         pointer-events: auto;
       }
     `};
+  ${({ $labelBelow }) =>
+    $labelBelow &&
+    css`
+      & > output {
+        top: calc(100% + 1px);
+        bottom: unset;
+      }
+    `};
 `
 
 type WrapperProps = {
   $min: number
   $max: number
   $hideActiveTrack: boolean
   $labelAlwaysOn: boolean
-} & Pick<SliderProps, 'disabled' | 'value'>
+  $labelBelow: boolean
+  $disabled: boolean
+} & Pick<SliderProps, 'value'>
 
 const Wrapper = styled.div.attrs<WrapperProps>(
   ({
     $min,
     $max,
     value,
-    disabled,
+    $disabled,
     $hideActiveTrack,
     $labelAlwaysOn,
     style,
   }) => ({
+    'data-disabled': $disabled ? true : null,
     style: {
       '--min': $min,
       '--max': $max,
       '--value': value,
       '--showTooltip': $labelAlwaysOn ? 1 : 0,
-      '--background': disabled
+      '--background': $disabled
         ? track.entities.indicator.states.disabled.background
         : $hideActiveTrack
           ? 'transparent'
@@ -201,16 +214,25 @@ const Wrapper = styled.div.attrs<WrapperProps>(
   &:hover {
     & > output {
       --showTooltip: 1;
+      --tooltip-background: ${output.states.hover.background};
     }
   }
 
   @media (hover: hover) and (pointer: fine) {
-    &:hover:not([disabled]) {
+    &:hover:not([data-disabled]) {
       ${fakeTrackBgHover}
       &::after {
         background: var(--background-hover);
       }
     }
+    ${({ $labelBelow }) =>
+      $labelBelow &&
+      css`
+        & > output {
+          top: calc(100% + 1px);
+          bottom: unset;
+        }
+      `};
   }
 `
 
@@ -284,6 +306,10 @@ export type SliderProps = {
    * @default false
    */
   labelAlwaysOn?: boolean
+  /** Display the value label below the track
+   * @default false
+   */
+  labelBelow?: boolean
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>
 
 export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
@@ -297,6 +323,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
     minMaxDots = true,
     minMaxValues = true,
     labelAlwaysOn,
+    labelBelow,
     step = 1,
     disabled,
     hideActiveTrack,
@@ -466,6 +493,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
           $disabled={disabled}
           $hideActiveTrack={hideActiveTrack}
           $labelAlwaysOn={labelAlwaysOn || touchNavigation}
+          $labelBelow={labelBelow}
           $touchNavigation={touchNavigation}
           onMouseMove={findClosestRange}
           onTouchStartCapture={findClosestRange}
@@ -533,9 +561,10 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
           $max={max}
           $min={min}
           value={sliderValue[0]}
-          disabled={disabled}
+          $disabled={disabled}
           $hideActiveTrack={hideActiveTrack}
           $labelAlwaysOn={labelAlwaysOn || touchNavigation}
+          $labelBelow={labelBelow}
           onTouchStartCapture={() => setTouchNavigation(true)}
           onMouseDownCapture={() => setTouchNavigation(false)}
         >

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
@@ -2,7 +2,7 @@
 
 exports[`Simple slider Matches snapshot 1`] = `
 <DocumentFragment>
-  .c6 {
+  .c5 {
   grid-row: 2;
   margin: 0;
   color: var(--eds_text__static_icons__tertiary, rgba(111, 111, 111, 1));
@@ -19,15 +19,15 @@ exports[`Simple slider Matches snapshot 1`] = `
   transform: translate(calc(-1 * calc((100% - 8px) / 2)));
 }
 
-.c6:last-child {
+.c5:last-child {
   left: auto;
   right: 2px;
   transform: translate(calc((100% - 8px) / 2));
 }
 
 .c2 {
   --realWidth: calc(100% - 12px);
-  --background: rgb(0 0 0 / 0.8);
+  --background: var(--tooltip-background,var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1)));
   width: fit-content;
   position: absolute;
   display: flex;
@@ -43,8 +43,8 @@ exports[`Simple slider Matches snapshot 1`] = `
   text-align: left;
   color: white;
   background: var(--background);
-  padding: 4px 8px;
-  bottom: calc(100% + 8px);
+  padding: 4px 4px 2px 4px;
+  bottom: calc(100% + 1px);
   pointer-events: none;
   margin-left: calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));
   transform: translate(calc(-1 * calc(var(--realWidth) / 2)));
@@ -53,15 +53,9 @@ exports[`Simple slider Matches snapshot 1`] = `
   opacity: var(--showTooltip);
 }
 
-.c3 {
-  width: 6px;
-  height: 8px;
-  position: absolute;
-  fill: var(--background);
-  top: calc(100% - 1px);
-  rotate: -90deg;
-  translate: -50%;
-  left: 50%;
+[data-disabled] .c2 {
+  background: var(--eds_interactive__disabled__fill, rgba(234, 234, 234, 1));
+  color: var(--eds_interactive__disabled__text, rgba(190, 190, 190, 1));
 }
 
 .c1 {
@@ -185,7 +179,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: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:' ';
+  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;--tooltip-background:var(--eds_interactive_primary__hover, rgba(0, 79, 85, 1));} @media (hover:hover) and (pointer:fine){.c0:hover:not([data-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([data-disabled])::after{background:var(--background-hover);}} .c3{grid-row:1;grid-column:1/3;} .c4:before,.c4:after{content:' ';
   display: block;
   position: absolute;
   width: 6px;
@@ -197,7 +191,7 @@ exports[`Simple slider Matches snapshot 1`] = `
   left: 0;
 }
 
-.c5:after {
+.c4:after {
   right: 0;
   left: auto;
 }
@@ -260,24 +254,17 @@ 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="c4 c5"
+      class="c3 c4"
     />
     <span
-      class="c6"
+      class="c5"
     >
       0
     </span>
     <span
-      class="c6"
+      class="c5"
     >
       100
     </span>