vivid-planet · johnnyomair · Apr 30, 2024 · Apr 19, 2024 · Apr 19, 2024 · Apr 22, 2024
diff --git a/.changeset/light-ligers-wonder.md b/.changeset/light-ligers-wonder.md
@@ -0,0 +1,7 @@
+---
+"@comet/admin-date-time": major
+---
+
+Remove the `clearable` prop and add a `required` prop to `DateRangePicker`, `DateTimePicker`, `TimePicker` and `TimeRangePicker`
+
+The clear button will automatically be shown for all optional fields.
diff --git a/.changeset/ninety-adults-peel.md b/.changeset/ninety-adults-peel.md
@@ -0,0 +1,7 @@
+---
+"@comet/admin-color-picker": major
+---
+
+Remove `clearable` prop and add a `required` prop to `ColorPicker`
+
+The clear button will automatically be shown for all optional fields.
diff --git a/packages/admin/admin-color-picker/src/ColorPicker.tsx b/packages/admin/admin-color-picker/src/ColorPicker.tsx
@@ -58,7 +58,7 @@ export interface ColorPickerProps extends Omit<InputWithPopperProps, "children"
     startAdornment?: InputBaseProps["startAdornment"];
     endAdornment?: InputBaseProps["endAdornment"];
     invalidIndicatorCharacter?: string;
-    clearable?: boolean;
+    required?: boolean;
     titleText?: React.ReactNode;
     clearButtonText?: React.ReactNode;
     components?: ColorPickerPropsComponents;
@@ -78,7 +78,7 @@ export const ColorPicker = (inProps: ColorPickerProps) => {
         startAdornment,
         endAdornment,
         onBlur,
-        clearable,
+        required,
         titleText = <FormattedMessage id="comet.colorPicker.title" defaultMessage="Choose a color" />,
         clearButtonText = <FormattedMessage id="comet.colorPicker.clearButton" defaultMessage="clear color" />,
         components = {},
@@ -122,6 +122,7 @@ export const ColorPicker = (inProps: ColorPickerProps) => {
 
     return (
         <Root
+            required={required}
             startAdornment={
                 startAdornment ? (
                     startAdornment
@@ -149,7 +150,7 @@ export const ColorPicker = (inProps: ColorPickerProps) => {
                 )
             }
             endAdornment={
-                clearable ? (
+                !required ? (
                     <>
                         <ClearInputAdornment position="end" hasClearableContent={Boolean(value)} onClick={() => onChange?.(undefined)} />
                         {endAdornment}

diff --git a/packages/admin/admin-date-time/src/dateRangePicker/DateRangePicker.tsx b/packages/admin/admin-date-time/src/dateRangePicker/DateRangePicker.tsx
@@ -24,7 +24,7 @@ export interface DateRangePickerProps extends Omit<InputWithPopperProps, "childr
     value?: DateRange;
     formatDateOptions?: FormatDateOptions;
     rangeStringSeparator?: string;
-    clearable?: boolean;
+    required?: boolean;
     monthsToShow?: number;
     maxDate?: Date;
     minDate?: Date;
@@ -77,7 +77,7 @@ export const DateRangePicker = (inProps: DateRangePickerProps) => {
         formatDateOptions,
         rangeStringSeparator = "  —  ",
         endAdornment,
-        clearable,
+        required,
         placeholder,
         monthsToShow = 2,
         minDate = defaultMinDate,
@@ -101,8 +101,9 @@ export const DateRangePicker = (inProps: DateRangePickerProps) => {
             {...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
@@ -56,11 +56,11 @@ export interface DateTimePickerProps
     }> {
     onChange?: (value?: Date) => void;
     value?: Date;
-    clearable?: boolean;
+    required?: boolean;
 }
 
 export const DateTimePicker = (inProps: DateTimePickerProps) => {
-    const { onChange, value, slotProps, clearable, ...restProps } = useThemeProps({
+    const { onChange, value, required, slotProps, ...restProps } = useThemeProps({
         props: inProps,
         name: "CometAdminDateTimePicker",
     });
@@ -106,6 +106,7 @@ export const DateTimePicker = (inProps: DateTimePickerProps) => {
                     value={value ? getIsoDateString(value) : undefined}
                     onChange={onChangeDate}
                     fullWidth
+                    required={required}
                     {...slotProps?.datePicker}
                 />
             </DateFormControl>
@@ -116,7 +117,7 @@ export const DateTimePicker = (inProps: DateTimePickerProps) => {
                     placeholder={intl.formatMessage({ id: "comet.timeTimePicker.time", defaultMessage: "Time" })}
                     onChange={onChangeTime}
                     fullWidth
-                    clearable={clearable}
+                    required={required}
                     {...slotProps?.timePicker}
                 />
             </TimeFormControl>

diff --git a/packages/admin/admin-date-time/src/timePicker/TimePicker.tsx b/packages/admin/admin-date-time/src/timePicker/TimePicker.tsx
@@ -55,7 +55,7 @@ export interface TimePickerProps extends Omit<InputWithPopperProps, "children" |
     minuteStep?: number;
     min?: string;
     max?: string;
-    clearable?: boolean;
+    required?: boolean;
     slotProps?: SlotProps;
 }
 
@@ -65,7 +65,7 @@ export const TimePicker = (inProps: TimePickerProps) => {
         value,
         formatOptions,
         endAdornment,
-        clearable,
+        required,
         minuteStep = 15,
         placeholder,
         min = "00:00",
@@ -118,8 +118,9 @@ export const TimePicker = (inProps: TimePickerProps) => {
                 inputWithPopperProps.onOpenPopper?.();
             }}
             readOnly
+            required={required}
             endAdornment={
-                clearable ? (
+                !required ? (
                     <>
                         <ClearInputAdornment position="end" hasClearableContent={Boolean(value)} onClick={() => onChange?.(undefined)} />
                         {endAdornment}

diff --git a/packages/admin/admin-date-time/src/timeRangePicker/TimeRangePicker.tsx b/packages/admin/admin-date-time/src/timeRangePicker/TimeRangePicker.tsx
@@ -77,7 +77,7 @@ export interface TimeRangePickerProps
     minuteStep?: number;
     min?: string;
     max?: string;
-    clearable?: boolean;
+    required?: boolean;
     separatorText?: React.ReactNode;
 }
 
@@ -90,6 +90,7 @@ export const TimeRangePicker = (inProps: TimeRangePickerProps) => {
         separatorText = <FormattedMessage id="comet.dateTime.fromToSeparatorText" defaultMessage="to" />,
         className,
         sx,
+        required,
         slotProps,
         ...propsForBothTimePickers
     } = useThemeProps({ props: inProps, name: "CometAdminTimeRangePicker" });
@@ -153,6 +154,7 @@ export const TimeRangePicker = (inProps: TimeRangePickerProps) => {
                     onOpenPopper={() => setStartPickerIsOpen(true)}
                     onClosePopper={() => setStartPickerIsOpen(false)}
                     fullWidth
+                    required={required}
                     {...propsForBothTimePickers}
                     {...slotProps?.startTimePicker}
                 />
@@ -167,6 +169,7 @@ export const TimeRangePicker = (inProps: TimeRangePickerProps) => {
                     onOpenPopper={() => setEndPickerIsOpen(true)}
                     onClosePopper={() => setEndPickerIsOpen(false)}
                     fullWidth
+                    required={required}
                     {...propsForBothTimePickers}
                     {...slotProps?.endTimePicker}
                 />

diff --git a/storybook/src/admin-date-time/AllDateAndTimePickers.tsx b/storybook/src/admin-date-time/AllDateAndTimePickers.tsx
@@ -40,39 +40,24 @@ const Story = () => {
                     <form>
                         <Card>
                             <CardContent>
-                                <DateField
-                                    name="date"
-                                    label="Date"
-                                    fullWidth
-                                    clearable
-                                    helperText={`Stringified value: ${JSON.stringify(values.date)}`}
-                                />
+                                <DateField name="date" label="Date" fullWidth helperText={`Stringified value: ${JSON.stringify(values.date)}`} />
                                 <DateRangeField
                                     name="dateRange"
                                     label="DateRange"
                                     fullWidth
-                                    clearable
                                     helperText={`Stringified value: ${JSON.stringify(values.dateRange)}`}
                                 />
                                 <DateTimeField
                                     name="dateTime"
                                     label="DateTime"
                                     fullWidth
-                                    clearable
                                     helperText={`Stringified value: ${JSON.stringify(values.dateTime)}`}
                                 />
-                                <TimeField
-                                    name="time"
-                                    label="Time"
-                                    fullWidth
-                                    clearable
-                                    helperText={`Stringified value: ${JSON.stringify(values.time)}`}
-                                />
+                                <TimeField name="time" label="Time" fullWidth helperText={`Stringified value: ${JSON.stringify(values.time)}`} />
                                 <TimeRangeField
                                     name="timeRange"
                                     label="TimeRange"
                                     fullWidth
-                                    clearable
                                     helperText={`Stringified value: ${JSON.stringify(values.timeRange)}`}
                                 />
                             </CardContent>

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

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

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

diff --git a/storybook/src/admin-date-time/TimeRangePicker.tsx b/storybook/src/admin-date-time/TimeRangePicker.tsx
@@ -27,7 +27,7 @@ const Story = () => {
                         <Card>
                             <CardContent>
                                 <Field name="timeRangeOne" label="Time range" fullWidth component={FinalFormTimeRangePicker} />
-                                <Field name="timeRangeTwo" label="Clearable" fullWidth clearable component={FinalFormTimeRangePicker} />
+                                <Field name="timeRangeTwo" label="Required" fullWidth required component={FinalFormTimeRangePicker} />
                             </CardContent>
                         </Card>
                         <pre>{JSON.stringify(values, null, 4)}</pre>

diff --git a/storybook/src/docs/components/ColorPicker/stories/ColorPicker.stories.tsx b/storybook/src/docs/components/ColorPicker/stories/ColorPicker.stories.tsx
@@ -9,6 +9,7 @@ storiesOf("stories/components/Color Picker/Color Picker", module).add("Color Pic
     const [colorTwo, setColorTwo] = React.useState<string | undefined>("rgba(255, 127, 80, 0.75)");
     const [colorThree, setColorThree] = React.useState<string | undefined>();
     const [colorFour, setColorFour] = React.useState<string | undefined>();
+    const [colorFive, setColorFive] = React.useState<string | undefined>();
 
     return (
         <Grid container spacing={4} sx={{ pb: 2 }}>
@@ -56,6 +57,11 @@ storiesOf("stories/components/Color Picker/Color Picker", module).add("Color Pic
                     <ColorPicker fullWidth disabled value={colorFour} onChange={setColorFour} />
                 </FieldContainer>
             </Grid>
+            <Grid item md={3}>
+                <FieldContainer label="Required" fullWidth required>
+                    <ColorPicker fullWidth required value={colorFive} onChange={setColorFive} />
+                </FieldContainer>
+            </Grid>
         </Grid>
     );
 });
diff --git a/storybook/src/docs/components/ColorPicker/stories/ColorPickerCustomized.stories.tsx b/storybook/src/docs/components/ColorPicker/stories/ColorPickerCustomized.stories.tsx
@@ -7,8 +7,7 @@ import * as React from "react";
 
 storiesOf("stories/components/Color Picker/Color Picker Customized", module).add("Color Picker Customized", () => {
     const [colorOne, setColorOne] = React.useState<string | undefined>("#00ff00");
-    const [colorTwo, setColorTwo] = React.useState<string | undefined>("rgba(255, 127, 80, 0.75)");
-    const [colorThree, setColorThree] = React.useState<string | undefined>();
+    const [colorTwo, setColorTwo] = React.useState<string | undefined>();
 
     const CustomColorPreview = ({ color }: ColorPickerColorPreviewProps): React.ReactElement => {
         return <EmojiEmotions htmlColor={color} sx={{ fontSize: 24 }} />;
@@ -24,7 +23,7 @@ storiesOf("stories/components/Color Picker/Color Picker Customized", module).add
 
     return (
         <Grid container spacing={4} sx={{ pb: 2 }}>
-            <Grid item md={4}>
+            <Grid item md={6}>
                 <FieldContainer label="Without Picker" fullWidth>
                     <ColorPicker
                         fullWidth
@@ -54,17 +53,12 @@ storiesOf("stories/components/Color Picker/Color Picker Customized", module).add
                     />
                 </FieldContainer>
             </Grid>
-            <Grid item md={4}>
-                <FieldContainer label="Clearable" fullWidth>
-                    <ColorPicker fullWidth clearable value={colorTwo} onChange={setColorTwo} colorFormat="rgba" />
-                </FieldContainer>
-            </Grid>
-            <Grid item md={4}>
+            <Grid item md={6}>
                 <FieldContainer label="Custom Color Preview" fullWidth>
                     <ColorPicker
                         fullWidth
-                        value={colorThree}
-                        onChange={setColorThree}
+                        value={colorTwo}
+                        onChange={setColorTwo}
                         components={{
                             ColorPickerColorPreview: CustomColorPreview,
                             ColorPickerInvalidPreview: CustomColorInvalidPreview,

diff --git a/storybook/src/docs/components/ColorPicker/stories/ColorPickerFinalForm.stories.tsx b/storybook/src/docs/components/ColorPicker/stories/ColorPickerFinalForm.stories.tsx
@@ -47,6 +47,9 @@ storiesOf("stories/components/Color Picker/Color Picker Final Form", module).add
                     <Grid item md={3}>
                         <Field name="color4" label="Disabled" fullWidth disabled component={FinalFormColorPicker} />
                     </Grid>
+                    <Grid item md={3}>
+                        <Field name="color5" label="Required" fullWidth required component={FinalFormColorPicker} />
+                    </Grid>
                 </Grid>
             )}
         </Form>

diff --git a/storybook/src/docs/form/components/DateAndTimePickers/stories/DatePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/stories/DatePicker.stories.tsx
@@ -25,8 +25,8 @@ storiesOf("stories/form/components/Date & Time Pickers/Date Picker", module)
                     </FieldContainer>
                 </Grid>
                 <Grid item xs={6} md={3}>
-                    <FieldContainer label="Clearable" fullWidth>
-                        <DatePicker fullWidth value={dateThree} onChange={setDateThree} />
+                    <FieldContainer label="Required" fullWidth required>
+                        <DatePicker fullWidth value={dateThree} onChange={setDateThree} required />
                     </FieldContainer>
                 </Grid>
                 <Grid item xs={6} md={3}>
@@ -61,7 +61,7 @@ storiesOf("stories/form/components/Date & Time Pickers/Date Picker", module)
                             <Field name="dateTwo" label="Show two months" fullWidth component={FinalFormDatePicker} monthsToShow={2} />
                         </Grid>
                         <Grid item xs={6} md={3}>
-                            <Field name="dateThree" label="Clearable " fullWidth component={FinalFormDatePicker} clearable />
+                            <Field name="dateThree" label="Required" fullWidth component={FinalFormDatePicker} required />
                         </Grid>
                         <Grid item xs={6} md={3}>
                             <Field

diff --git a/storybook/src/docs/form/components/DateAndTimePickers/stories/DateRangePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/stories/DateRangePicker.stories.tsx
@@ -19,8 +19,8 @@ storiesOf("stories/form/components/Date & Time Pickers/Date-Range Picker", modul
                     </FieldContainer>
                 </Grid>
                 <Grid item xs={6} md={4}>
-                    <FieldContainer label="Clearable" fullWidth>
-                        <DateRangePicker fullWidth value={dateTwo} onChange={setDateTwo} clearable />
+                    <FieldContainer label="Required" fullWidth required>
+                        <DateRangePicker fullWidth value={dateTwo} onChange={setDateTwo} required />
                     </FieldContainer>
                 </Grid>
                 <Grid item xs={6} md={4}>
@@ -54,7 +54,7 @@ storiesOf("stories/form/components/Date & Time Pickers/Date-Range Picker", modul
                             <Field name="dateOne" label="Date-Range Picker" fullWidth component={FinalFormDateRangePicker} />
                         </Grid>
                         <Grid item xs={6} md={4}>
-                            <Field name="dateTwo" label="Clearable" fullWidth component={FinalFormDateRangePicker} clearable />
+                            <Field name="dateTwo" label="Required" fullWidth component={FinalFormDateRangePicker} required />
                         </Grid>
                         <Grid item xs={6} md={4}>
                             <Field

diff --git a/storybook/src/docs/form/components/DateAndTimePickers/stories/DateTimePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/stories/DateTimePicker.stories.tsx
@@ -20,8 +20,8 @@ storiesOf("stories/form/components/Date & Time Pickers/Date-Time Picker", module
                     </FieldContainer>
                 </Grid>
                 <Grid item xs={12} md={6}>
-                    <FieldContainer label="Clearable" fullWidth>
-                        <DateTimePicker value={dateTimeTwo} onChange={setDateTimeTwo} clearable />
+                    <FieldContainer label="Required" fullWidth required>
+                        <DateTimePicker value={dateTimeTwo} onChange={setDateTimeTwo} required />
                     </FieldContainer>
                 </Grid>
                 <Grid item xs={12} md={6}>
@@ -72,7 +72,7 @@ storiesOf("stories/form/components/Date & Time Pickers/Date-Time Picker", module
                             <Field name="dateTimeOne" label="Date Picker" fullWidth component={FinalFormDateTimePicker} />
                         </Grid>
                         <Grid item xs={12} md={6}>
-                            <Field name="dateTimeTwo" label="Clearable" fullWidth component={FinalFormDateTimePicker} clearable />
+                            <Field name="dateTimeTwo" label="Required" fullWidth required component={FinalFormDateTimePicker} />
                         </Grid>
                         <Grid item xs={12} md={6}>
                             <Field