[TM-3086] Enhance DateRangeInput component with improved control interaction and styling. Update DatePicker.Control to handle click events for opening the date picker, and adjust styles for disabled states to improve user experience. (#2062)

Author: dottyy

src/redesignComponents/Forms/Inputs/DateRangeInputs/DateRangeInput.tsx

@@ -125,10 +125,11 @@ export const DateRangeInput: FC<DateRangeInputProps> = ({
         <StyledPickerWrapper $size={size} data-invalid={errorMessage != null ? "" : undefined}>
           <Global styles={calendarGlobalStyles} />
           <DatePicker.RootProvider value={picker}>
-            <DatePicker.Control>
-              <DatePicker.Trigger>
-                <CalendarIcon />
-              </DatePicker.Trigger>
+            <DatePicker.Control
+              onClick={() => !disabled && picker.setOpen(true)}
+              style={{ cursor: disabled ? "not-allowed" : "pointer" }}
+            >
+              <CalendarIcon />
               <DatePicker.Input index={0} placeholder={dateFormat} />
 
               <span

src/redesignComponents/Forms/Inputs/DateRangeInputs/styled.ts

@@ -133,22 +133,31 @@ export const dateRangePickerStyles = (size: "default" | "small" = "default") =>
     color: ${getThemedColor("neutral", 600)};
   }
 
-  [data-part="trigger"] {
+  [data-part="control"] > .chakra-icon {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    padding: 0.25rem;
-    border-radius: 0.25rem;
+    flex-shrink: 0;
     color: ${getThemedColor("neutral", 700)};
     transition: color 0.15s;
   }
 
-  [data-part="trigger"]:hover {
+  [data-part="control"]:hover > .chakra-icon {
     color: ${getThemedColor("primary", 600)};
   }
+
+  [data-part="control"][data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  [data-part="control"][data-disabled] > .chakra-icon {
+    color: ${getThemedColor("neutral", 500)};
+  }
+
+  [data-part="control"][data-disabled]:hover > .chakra-icon {
+    color: ${getThemedColor("neutral", 500)};
+  }
 `;
 
 export const calendarGlobalStyles = css`