feat: enhance SegmentedControl with framer-motion for improved animations and update styling for active segments

Author: AbhishekA1509

src/Common/SegmentedControl/Segment.tsx

@@ -1,4 +1,5 @@
 import { ReactElement, useMemo } from 'react'
+import { motion } from 'framer-motion'
 
 import { Tooltip } from '@Common/Tooltip'
 import { Icon } from '@Shared/Components'
@@ -49,11 +50,21 @@ const Segment = ({
                     disabled={disabled}
                 />
 
-                <label
+                <motion.label
                     htmlFor={inputId}
-                    className={`pointer m-0 flex ${!fullWidth ? 'left' : ''} dc__gap-4 br-4 segmented-control__segment segmented-control__segment--${size} ${isSelected ? 'fw-6 segmented-control__segment--selected' : 'fw-4'} ${segment.isError ? 'cr-5' : 'cn-9'} ${disabled ? 'cursor-not-allowed' : ''} ${COMPONENT_SIZE_TO_SEGMENT_CLASS_MAP[size]}`}
+                    layout
+                    className={`pointer m-0 dc__position-rel flex ${!fullWidth ? 'left' : ''} dc__gap-4 br-4 segmented-control__segment segmented-control__segment--${size} ${isSelected ? 'fw-6 segmented-control__segment--selected' : 'fw-4'} ${segment.isError ? 'cr-5' : 'cn-9'} ${disabled ? 'cursor-not-allowed' : ''} ${COMPONENT_SIZE_TO_SEGMENT_CLASS_MAP[size]}`}
+                    whileTap={{ scale: 0.95 }}
+                    key={inputId}
                     aria-label={ariaLabel}
                 >
+                    {isSelected && (
+                        <motion.div
+                            layoutId="active-segment-control"
+                            className="dc__position-abs active-mask dc__top-0 dc__left-0 dc__right-0 dc__bottom-0 bg__primary br-4"
+                        />
+                    )}
+
                     {(isError || icon) && (
                         <span className={`flex ${COMPONENT_SIZE_TO_ICON_CLASS_MAP[size]}`}>
                             <Icon
@@ -71,7 +82,7 @@ const Segment = ({
                         </span>
                     )}
                     {label && <span>{label}</span>}
-                </label>
+                </motion.label>
             </div>
         </ConditionalWrap>
     )

src/Common/SegmentedControl/SegmentedControl.component.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 
 import { ComponentSizeType } from '@Shared/constants'
 
@@ -26,16 +26,6 @@ const SegmentedControl = ({
     const [selectedSegmentValue, setSelectedSegmentValue] = useState<SegmentType['value'] | null>(segments[0].value)
     const segmentValue = isUnControlledComponent ? selectedSegmentValue : controlledValue
 
-    useEffect(() => {
-        if (segmentValue) {
-            const { offsetWidth, offsetLeft } = selectedSegmentRef.current
-            const { style } = segmentedControlRefContainer.current
-
-            style.setProperty('--segmented-control-highlight-width', `${offsetWidth}px`)
-            style.setProperty('--segmented-control-highlight-x-position', `${offsetLeft}px`)
-        }
-    }, [segmentValue, size, fullWidth])
-
     const handleSegmentChange = (updatedSegment: SegmentType) => {
         if (isUnControlledComponent) {
             setSelectedSegmentValue(updatedSegment.value)

src/Common/SegmentedControl/segmentedControl.scss

@@ -4,39 +4,12 @@
     background: var(--bg-segmented-control);
 
     &__container {
-        --segmented-control-highlight-width: auto;
-        --segmented-control-highlight-x-position: 0;
-
         &:has(input[type='radio']:checked:focus-visible) {
             .segmented-control__segment--selected {
-                outline: 2px solid var(--B500) !important;
-                outline-offset: 2px;
-            }
-        }
-
-        &::before {
-            content: '';
-            background: var(--bg-primary);
-            border-radius: 4px;
-            width: var(--segmented-control-highlight-width);
-            transform: translateX(var(--segmented-control-highlight-x-position));
-            position: absolute;
-            left: 0;
-            z-index: 0;
-            border: 0.5px solid var(--border-primary);
-            box-shadow: 0px 1px 2px 0px var(--black-20);
-            height: 100%;
-            transition: transform 0.3s ease, width 0.3s ease;
-
-            &:has(#{$segmented-control-selector}__segment--xs) {
-                top: 1px;
-                bottom: 1px;
-            }
-
-            &:has(#{$segmented-control-selector}__segment--small),
-            &:has(#{$segmented-control-selector}__segment--medium) {
-                top: 2px;
-                bottom: 2px;
+                .active-mask {
+                    outline: 2px solid var(--B500) !important;
+                    outline-offset: 2px;
+                }
             }
         }
     }
@@ -45,10 +18,6 @@
         $parent-selector: &;
         transition: color 0.3s ease;
 
-        &:hover:not(#{$parent-selector}--selected):not(.cursor-not-allowed) {
-            background-color: var(--bg-hover);
-        }
-
         &--selected {
             &#{$parent-selector} {
 
@@ -63,6 +32,19 @@
                     padding-inline: 7.5px;
                 }
             }
+
+            .active-mask {
+                border: 0.5px solid var(--border-primary);
+                box-shadow: 0px 1px 2px 0px var(--black-20);
+            }
+
+            > *:not(.active-mask) {
+                z-index: 1;
+            }
+        }
+
+        &:hover:not(#{$parent-selector}--selected):not(.cursor-not-allowed) {
+            background-color: var(--bg-hover);
         }
     }
 }