From bb55e3e3d862ad1168ba6025debefdff73e51ea7 Mon Sep 17 00:00:00 2001
From: Johan Sosa <sosa.johan@gmail.com>
Date: Thu, 19 Sep 2024 19:17:30 +0200
Subject: [PATCH] feat(DatePicker): add clearable prop and update styles

- Added `clearable` prop to DatePicker component.
- Updated DatePickerStyles to handle clearable logic.
- Adjusted TimeInput styles for better layout.
---
 packages/components/src/form/DatePicker/DatePicker.js        | 4 +++-
 packages/components/src/form/DatePicker/DatePicker.styles.js | 3 ++-
 packages/components/src/form/TimeInput/TimeInput.styles.js   | 5 ++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/form/DatePicker/DatePicker.js b/packages/components/src/form/DatePicker/DatePicker.js
index bfb97e43f..761da0449 100644
--- a/packages/components/src/form/DatePicker/DatePicker.js
+++ b/packages/components/src/form/DatePicker/DatePicker.js
@@ -124,6 +124,7 @@ const DatePicker = forwardRef(
       clearButtonLabel,
       readOnly,
       style,
+      clearable,
       ...props
     },
     ref,
@@ -137,7 +138,7 @@ const DatePicker = forwardRef(
     const compProps = range ? { amountOfMonths: 2 } : {};
     const [ready, setReady] = useState(null);
     const [date, setDate] = useState(userValue);
-    const { classes } = DatePickerStyles({ size, date, range });
+    const { classes } = DatePickerStyles({ size, date, range, clearable });
     useEffect(() => {
       const format = deduceDateFormat(locale);
       setInputFormat(format);
@@ -205,6 +206,7 @@ const DatePicker = forwardRef(
             <Comp
               {...props}
               {...compProps}
+              clearable={clearable}
               withinPortal
               placeHolder={inputFormat}
               allowFreeInput
diff --git a/packages/components/src/form/DatePicker/DatePicker.styles.js b/packages/components/src/form/DatePicker/DatePicker.styles.js
index 6940e0031..bc9394989 100644
--- a/packages/components/src/form/DatePicker/DatePicker.styles.js
+++ b/packages/components/src/form/DatePicker/DatePicker.styles.js
@@ -4,8 +4,9 @@ import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins';
 
 // THIS COMPONENT TAKE STYLES FROM CALENDAR COMPONENT
 
-const DatePickerStyles = createStyles((theme, { size, date, range }) => {
+const DatePickerStyles = createStyles((theme, { size, date, clearable, range }) => {
   const checkDate = () => {
+    if (!clearable) return false;
     if (range) {
       if (Array.isArray(date)) return date?.every((value) => !!value);
       return false;
diff --git a/packages/components/src/form/TimeInput/TimeInput.styles.js b/packages/components/src/form/TimeInput/TimeInput.styles.js
index 542cb4a17..92fa8f6aa 100644
--- a/packages/components/src/form/TimeInput/TimeInput.styles.js
+++ b/packages/components/src/form/TimeInput/TimeInput.styles.js
@@ -9,10 +9,10 @@ const TimeInputStyles = createStyles((theme, { size }) => {
     input: {
       ...getInputSizes(size || 'md', inputTheme.spacing.padding),
       ...inputStyle,
-      paddingTop: 0,
       minHeight: 40,
       display: 'flex',
       alignItems: 'center',
+      paddingTop: '3px !important',
       paddingLeft: '30px !important',
     },
     timeInput: {
@@ -25,6 +25,9 @@ const TimeInputStyles = createStyles((theme, { size }) => {
     },
     controls: {
       height: '100%',
+      '& > div': {
+        paddingBottom: 3,
+      },
     },
     icon: {
       width: 32,