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.
leemonade · Sep 19, 2024 · bb55e3e · bb55e3e
1 parent d0f40cc
commit bb55e3e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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,