fix(Slider): add labelDescription

.changeset/five-rockets-join.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`Slider`: Add prop `labelDescription` 

packages/ui/src/components/Slider/__tests__/doubleSlider.test.tsx

@@ -29,6 +29,7 @@ describe('double slider', () => {
         direction="row"
         double
         label="Label"
+        labelDescription="labeldescription"
         name="Name"
         value={[1, 14]}
       />,

packages/ui/src/components/Slider/__tests__/singleSlider.test.tsx

@@ -25,7 +25,13 @@ describe('single slider', () => {
 
   test('renders correctly', () => {
     shouldMatchSnapshot(
-      <Slider helper="helper" label="Label" name="Name" value={1} />,
+      <Slider
+        helper="helper"
+        label="Label"
+        labelDescription="labeldescription"
+        name="Name"
+        value={1}
+      />,
     )
   })
 

packages/ui/src/components/Slider/components/DoubleSlider.tsx

@@ -49,6 +49,7 @@ export const DoubleSlider = ({
   required,
   tooltipPosition,
   'aria-label': ariaLabel,
+  labelDescription,
 }: DoubleSliderProps) => {
   const theme = useTheme()
   const localId = useId()
@@ -274,7 +275,11 @@ export const DoubleSlider = ({
     <Stack direction="column" gap={1} justifyContent="left">
       {label ? (
         <Stack direction="row" justifyContent="space-between">
-          <Label htmlFor={finalId} required={required}>
+          <Label
+            htmlFor={finalId}
+            labelDescription={labelDescription}
+            required={required}
+          >
             {label}
           </Label>
         </Stack>

packages/ui/src/components/Slider/components/SingleSlider.tsx

@@ -45,6 +45,7 @@ export const SingleSlider = ({
   prefix,
   suffix,
   required,
+  labelDescription,
   'aria-label': ariaLabel,
   tooltipPosition,
 }: SingleSliderProps) => {
@@ -193,7 +194,11 @@ export const SingleSlider = ({
           direction="row"
           justifyContent="space-between"
         >
-          <Label htmlFor={finalId} required={required}>
+          <Label
+            htmlFor={finalId}
+            labelDescription={labelDescription}
+            required={required}
+          >
             {label}
           </Label>
           {direction === 'column' ? styledValue(valueToShow) : null}

packages/ui/src/components/Slider/index.tsx

@@ -41,6 +41,7 @@ export const Slider = ({
   className,
   tooltipPosition = 'top',
   style,
+  labelDescription,
   'aria-label': ariaLabel,
 }: SliderProps) => {
   // we check if options exists if so we set the bounds to the length of the options
@@ -78,6 +79,7 @@ export const Slider = ({
           id={id}
           input={input}
           label={label}
+          labelDescription={labelDescription}
           max={correctedBounds.max}
           min={correctedBounds.min}
           name={name}
@@ -105,6 +107,7 @@ export const Slider = ({
           id={id}
           input={input}
           label={label}
+          labelDescription={labelDescription}
           max={correctedBounds.max}
           min={correctedBounds.min}
           name={name}

packages/ui/src/components/Slider/types.ts

@@ -24,6 +24,7 @@ type DefaultProps = {
    */
   step?: number
   required?: boolean
+  labelDescription?: ReactNode
   /**
    * Where to position the tooltip
    */