Set clearable for Form date field when it is not required (#1792)

Set `clearable` for Form `date` field when it is not required. --------- Co-authored-by: Ricky James Smith <jamesricky@me.com>
vivid-planet · Apr 16, 2024 · f8114cd · f8114cd
1 parent faf36f6
commit f8114cd
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 7 deletions.
diff --git a/.changeset/selfish-books-fail.md b/.changeset/selfish-books-fail.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin": minor
+---
+
+Pass `required` prop to children of `Field` component
diff --git a/.changeset/tidy-impalas-refuse.md b/.changeset/tidy-impalas-refuse.md
@@ -0,0 +1,7 @@
+---
+"@comet/admin-date-time": major
+---
+
+Remove `clearable` prop from `DatePicker`
+
+The clear button will automatically be shown for all optional fields.
diff --git a/packages/admin/admin-date-time/src/datePicker/DatePicker.tsx b/packages/admin/admin-date-time/src/datePicker/DatePicker.tsx
@@ -17,7 +17,7 @@ export interface DatePickerProps extends Omit<InputWithPopperProps, "children" |
     onChange?: (date?: string) => void;
     value?: string;
     formatDateOptions?: FormatDateOptions;
-    clearable?: boolean;
+    required?: boolean;
     monthsToShow?: number;
     maxDate?: Date;
     minDate?: Date;
@@ -30,7 +30,7 @@ export const DatePicker = (inProps: DatePickerProps) => {
         value,
         formatDateOptions,
         endAdornment,
-        clearable,
+        required,
         placeholder,
         monthsToShow,
         minDate = defaultMinDate,
@@ -54,8 +54,9 @@ export const DatePicker = (inProps: DatePickerProps) => {
             {...slotProps?.root}
             {...inputWithPopperProps}
             readOnly
+            required={required}
             endAdornment={
-                clearable ? (
+                !required ? (
                     <>
                         <ClearInputAdornment position="end" hasClearableContent={Boolean(value)} onClick={() => onChange && onChange(undefined)} />
                         {endAdornment}

diff --git a/packages/admin/admin-date-time/src/dateTimePicker/DateTimePicker.tsx b/packages/admin/admin-date-time/src/dateTimePicker/DateTimePicker.tsx
@@ -106,7 +106,6 @@ export const DateTimePicker = (inProps: DateTimePickerProps) => {
                     value={value ? getIsoDateString(value) : undefined}
                     onChange={onChangeDate}
                     fullWidth
-                    clearable={clearable}
                     {...slotProps?.datePicker}
                 />
             </DateFormControl>

diff --git a/packages/admin/admin/src/form/Field.tsx b/packages/admin/admin/src/form/Field.tsx
@@ -62,7 +62,7 @@ export function Field<FieldValue = any, FieldElement extends HTMLElement = HTMLE
         meta,
         fieldContainerProps,
         ...rest
-    }: FieldRenderProps<FieldValue, FieldElement> & { warning?: string; disabled?: boolean }) {
+    }: FieldRenderProps<FieldValue, FieldElement> & { warning?: string; disabled?: boolean; required?: boolean }) {
         function render() {
             if (component) {
                 return React.createElement(component, { ...rest, input, meta });
@@ -96,6 +96,7 @@ export function Field<FieldValue = any, FieldElement extends HTMLElement = HTMLE
             <FinalFormField<FieldValue, FieldElement, FieldValue, FieldRenderProps<FieldValue, FieldElement>>
                 name={name}
                 validate={validateError}
+                required={required}
                 {...otherProps}
             >
                 {renderField}

diff --git a/storybook/src/admin-date-time/DatePicker.tsx b/storybook/src/admin-date-time/DatePicker.tsx
@@ -24,7 +24,7 @@ const Story = () => {
                         <Card>
                             <CardContent>
                                 <Field name="dateOne" label="Date" fullWidth component={FinalFormDatePicker} />
-                                <Field name="dateTwo" label="Clearable" fullWidth clearable component={FinalFormDatePicker} />
+                                <Field name="dateTwo" label="Required" fullWidth required component={FinalFormDatePicker} />
                             </CardContent>
                         </Card>
                         <pre>{JSON.stringify(values, null, 4)}</pre>

diff --git a/storybook/src/docs/form/components/DateAndTimePickers/stories/DatePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/stories/DatePicker.stories.tsx
@@ -26,7 +26,7 @@ storiesOf("stories/form/components/Date & Time Pickers/Date Picker", module)
                 </Grid>
                 <Grid item xs={6} md={3}>
                     <FieldContainer label="Clearable" fullWidth>
-                        <DatePicker fullWidth value={dateThree} onChange={setDateThree} clearable />
+                        <DatePicker fullWidth value={dateThree} onChange={setDateThree} />
                     </FieldContainer>
                 </Grid>
                 <Grid item xs={6} md={3}>