feat: add support for disabled attribute in segmented control

Author: eshankvaish

src/Common/SegmentedControl/Segment.tsx

@@ -12,7 +12,16 @@ const wrapWithTooltip = (tooltipProps: SegmentType['tooltipProps']) => (children
     </Tooltip>
 )
 
-const Segment = ({ segment, isSelected, name, selectedSegmentRef, onChange, fullWidth, size }: SegmentProps) => {
+const Segment = ({
+    segment,
+    isSelected,
+    name,
+    selectedSegmentRef,
+    onChange,
+    fullWidth,
+    size,
+    disabled,
+}: SegmentProps) => {
     const { value, icon, isError, label, tooltipProps, ariaLabel } = segment
     const handleChange = () => {
         onChange(segment)
@@ -32,11 +41,12 @@ const Segment = ({ segment, isSelected, name, selectedSegmentRef, onChange, full
                     onChange={handleChange}
                     checked={isSelected}
                     className="dc__opacity-0 m-0-imp dc__top-0 dc__left-0 dc__position-abs dc__bottom-0 dc__right-0 w-100 pointer h-100 dc__visibility-hidden"
+                    disabled={disabled}
                 />
 
                 <label
                     htmlFor={`${name}-${value}`}
-                    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'} ${COMPONENT_SIZE_TO_SEGMENT_CLASS_MAP[size]}`}
+                    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]}`}
                     aria-label={ariaLabel}
                 >
                     {(isError || icon) && (

src/Common/SegmentedControl/SegmentedControl.component.tsx

@@ -11,6 +11,7 @@ const SegmentedControl = ({
     size = ComponentSizeType.medium,
     value: controlledValue,
     fullWidth = false,
+    disabled,
 }: SegmentedControlProps) => {
     const isUnControlledComponent = controlledValue === undefined
 
@@ -38,7 +39,7 @@ const SegmentedControl = ({
 
     return (
         <div
-            className={`segmented-control ${!fullWidth ? 'dc__inline-flex' : ''} br-6 ${size === ComponentSizeType.xs ? 'p-1' : 'p-2'}`}
+            className={`segmented-control ${!fullWidth ? 'dc__inline-flex' : ''} ${disabled ? 'dc__disabled' : ''} br-6 ${size === ComponentSizeType.xs ? 'p-1' : 'p-2'}`}
         >
             <div
                 className="segmented-control__container flex left dc__position-rel dc__align-items-center dc__gap-2"
@@ -57,6 +58,7 @@ const SegmentedControl = ({
                             isSelected={isSelected}
                             fullWidth={fullWidth}
                             size={size}
+                            disabled={disabled}
                         />
                     )
                 })}

src/Common/SegmentedControl/types.ts

@@ -54,6 +54,7 @@ export type SegmentedControlProps = {
     name: string
     size?: Extract<ComponentSizeType, ComponentSizeType.xs | ComponentSizeType.small | ComponentSizeType.medium>
     fullWidth?: boolean
+    disabled?: boolean
 } & (
     | {
           value?: never
@@ -72,7 +73,7 @@ export type SegmentedControlProps = {
 )
 
 export interface SegmentProps
-    extends Required<Pick<SegmentedControlProps, 'name' | 'onChange' | 'fullWidth' | 'size'>> {
+    extends Required<Pick<SegmentedControlProps, 'name' | 'onChange' | 'fullWidth' | 'size' | 'disabled'>> {
     isSelected: boolean
     segment: SegmentType
     selectedSegmentRef: RefObject<HTMLDivElement> | undefined