chore(Slider): do not show lock icon on compact sliders

uzh-bf · Feb 5, 2025 · 068c0d1 · 068c0d1
1 parent fa72fe1
commit 068c0d1
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/packages/design-system/src/Slider.tsx b/packages/design-system/src/Slider.tsx
@@ -159,6 +159,7 @@ export function Slider({
           'flex h-12 w-12 flex-col items-center justify-center rounded-full border-[3px] border-solid bg-white shadow-lg focus:outline-none',
           compact && 'h-4 w-4 border-[1.5px]',
           disabled ? 'cursor-not-allowed' : 'cursor-move',
+          disabled && compact ? 'bg-gray-100' : 'bg-white',
           disabled ||
             !borderColorMap ||
             Object.keys(borderColorMap).length !== steps
@@ -169,7 +170,7 @@ export function Slider({
         data-cy={dataThumb?.cy}
         data-test={dataThumb?.test}
       >
-        {disabled && (
+        {disabled && !compact ? (
           <FontAwesomeIcon
             icon={faLock}
             className={twMerge(
@@ -178,7 +179,7 @@ export function Slider({
               className?.lock
             )}
           />
-        )}
+        ) : null}
       </RadixSlider.Thumb>
     </RadixSlider.Root>
   )