From d8c25403c54693fe600c2c891c679e61d6949471 Mon Sep 17 00:00:00 2001
From: andrearutrecht <andrea.rutrecht@vivid-planet.com>
Date: Fri, 19 Apr 2024 13:45:45 +0200
Subject: [PATCH 01/10] Remove 'clearable' and replace behaviour with not
 'required'

---
 packages/admin/admin-color-picker/src/ColorPicker.tsx     | 8 +++++---
 .../src/dateRangePicker/DateRangePicker.tsx               | 8 +++++---
 .../admin-date-time/src/dateTimePicker/DateTimePicker.tsx | 7 ++++---
 .../admin/admin-date-time/src/timePicker/TimePicker.tsx   | 6 +++---
 .../src/timeRangePicker/TimeRangePicker.tsx               | 5 ++++-
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/admin/admin-color-picker/src/ColorPicker.tsx b/packages/admin/admin-color-picker/src/ColorPicker.tsx
index ad8b47f90a..14672822f9 100644
--- a/packages/admin/admin-color-picker/src/ColorPicker.tsx
+++ b/packages/admin/admin-color-picker/src/ColorPicker.tsx
@@ -58,7 +58,8 @@ export interface ColorPickerProps extends Omit<InputWithPopperProps, "children"
     startAdornment?: InputBaseProps["startAdornment"];
     endAdornment?: InputBaseProps["endAdornment"];
     invalidIndicatorCharacter?: string;
-    clearable?: boolean;
+    // clearable?: boolean;
+    required?: boolean;
     titleText?: React.ReactNode;
     clearButtonText?: React.ReactNode;
     components?: ColorPickerPropsComponents;
@@ -78,7 +79,8 @@ export const ColorPicker = (inProps: ColorPickerProps) => {
         startAdornment,
         endAdornment,
         onBlur,
-        clearable,
+        // clearable,
+        required,
         titleText = <FormattedMessage id="comet.colorPicker.title" defaultMessage="Choose a color" />,
         clearButtonText = <FormattedMessage id="comet.colorPicker.clearButton" defaultMessage="clear color" />,
         components = {},
@@ -149,7 +151,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
index 67437b42e0..773a10c2b1 100644
--- a/packages/admin/admin-date-time/src/dateRangePicker/DateRangePicker.tsx
+++ b/packages/admin/admin-date-time/src/dateRangePicker/DateRangePicker.tsx
@@ -24,7 +24,8 @@ export interface DateRangePickerProps extends Omit<InputWithPopperProps, "childr
     value?: DateRange;
     formatDateOptions?: FormatDateOptions;
     rangeStringSeparator?: string;
-    clearable?: boolean;
+    // clearable?: boolean;
+    required?: boolean;
     monthsToShow?: number;
     maxDate?: Date;
     minDate?: Date;
@@ -77,7 +78,8 @@ export const DateRangePicker = (inProps: DateRangePickerProps) => {
         formatDateOptions,
         rangeStringSeparator = "  —  ",
         endAdornment,
-        clearable,
+        // clearable,
+        required,
         placeholder,
         monthsToShow = 2,
         minDate = defaultMinDate,
@@ -102,7 +104,7 @@ export const DateRangePicker = (inProps: DateRangePickerProps) => {
             {...inputWithPopperProps}
             readOnly
             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
index 6378ed56d5..34b6a3216a 100644
--- 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, slotProps, required, ...restProps } = useThemeProps({
         props: inProps,
         name: "CometAdminDateTimePicker",
     });
@@ -116,7 +116,8 @@ export const DateTimePicker = (inProps: DateTimePickerProps) => {
                     placeholder={intl.formatMessage({ id: "comet.timeTimePicker.time", defaultMessage: "Time" })}
                     onChange={onChangeTime}
                     fullWidth
-                    clearable={clearable}
+                    // 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
index dbba79240f..4d56d47dc9 100644
--- 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",
@@ -119,7 +119,7 @@ export const TimePicker = (inProps: TimePickerProps) => {
             }}
             readOnly
             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
index 6a082c0697..50fd3d1adb 100644
--- 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}
                 />

From 1a0461501e87b35c8c75ef972ab9f2a887b7fc62 Mon Sep 17 00:00:00 2001
From: andrearutrecht <andrea.rutrecht@vivid-planet.com>
Date: Fri, 19 Apr 2024 14:05:22 +0200
Subject: [PATCH 02/10] Adapt time and color picker stories

---
 .../admin-date-time/AllDateAndTimePickers.tsx | 19 ++-----------------
 .../src/admin-date-time/DateRangePicker.tsx   |  2 +-
 .../src/admin-date-time/DateTimePicker.tsx    |  2 +-
 storybook/src/admin-date-time/TimePicker.tsx  |  2 +-
 .../src/admin-date-time/TimeRangePicker.tsx   |  2 +-
 .../stories/ColorPicker.stories.tsx           |  6 ++++++
 .../stories/ColorPickerCustomized.stories.tsx | 16 +++++-----------
 .../stories/ColorPickerFinalForm.stories.tsx  |  3 +++
 .../stories/DateRangePicker.stories.tsx       |  6 +++---
 .../stories/DateTimePicker.stories.tsx        |  6 +++---
 .../stories/TimePicker.stories.tsx            |  6 +++---
 .../stories/TimeRangePicker.stories.tsx       |  6 +++---
 12 files changed, 32 insertions(+), 44 deletions(-)

diff --git a/storybook/src/admin-date-time/AllDateAndTimePickers.tsx b/storybook/src/admin-date-time/AllDateAndTimePickers.tsx
index 8f8f4d916b..1cc698c6bd 100644
--- 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
index 1bf72d1591..67f069b68d 100644
--- 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
index 2f67a4dc31..c930e598fe 100644
--- 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
index 05b13b8f31..04e8b1aaa3 100644
--- 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
index 363abd8bef..25cca5295e 100644
--- 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
index 9a212c731b..b67a448ba3 100644
--- 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
index 6858c6f0b9..5c6f7bc2a1 100644
--- 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
index 5a2e420801..eca275df27 100644
--- 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/DateRangePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/stories/DateRangePicker.stories.tsx
index 4624967ee8..3a9af7b852 100644
--- 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>
+                        <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
index bf35e974de..d1bf4fad6c 100644
--- 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>
+                        <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 component={FinalFormDateTimePicker} required />
                         </Grid>
                         <Grid item xs={12} md={6}>
                             <Field
diff --git a/storybook/src/docs/form/components/DateAndTimePickers/stories/TimePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/stories/TimePicker.stories.tsx
index 6db233d89e..62ae6e5afc 100644
--- a/storybook/src/docs/form/components/DateAndTimePickers/stories/TimePicker.stories.tsx
+++ b/storybook/src/docs/form/components/DateAndTimePickers/stories/TimePicker.stories.tsx
@@ -30,8 +30,8 @@ storiesOf("stories/form/components/Date & Time Pickers/Time Picker", module)
                     </FieldContainer>
                 </Grid>
                 <Grid item xs={6} md={3}>
-                    <FieldContainer label="Clearable" fullWidth>
-                        <TimePicker fullWidth clearable value={timeFour} onChange={setTimeFour} />
+                    <FieldContainer label="Required" fullWidth>
+                        <TimePicker fullWidth required value={timeFour} onChange={setTimeFour} />
                     </FieldContainer>
                 </Grid>
             </Grid>
@@ -66,7 +66,7 @@ storiesOf("stories/form/components/Date & Time Pickers/Time Picker", module)
                             />
                         </Grid>
                         <Grid item xs={6} md={3}>
-                            <Field name="timeFour" label="Clearable" fullWidth component={FinalFormTimePicker} clearable />
+                            <Field name="timeFour" label="Required" fullWidth component={FinalFormTimePicker} required />
                         </Grid>
                     </Grid>
                 )}
diff --git a/storybook/src/docs/form/components/DateAndTimePickers/stories/TimeRangePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/stories/TimeRangePicker.stories.tsx
index 7455471695..df13953dbb 100644
--- a/storybook/src/docs/form/components/DateAndTimePickers/stories/TimeRangePicker.stories.tsx
+++ b/storybook/src/docs/form/components/DateAndTimePickers/stories/TimeRangePicker.stories.tsx
@@ -18,8 +18,8 @@ storiesOf("stories/form/components/Date & Time Pickers/Time-Range Picker", modul
                     </FieldContainer>
                 </Grid>
                 <Grid item xs={6}>
-                    <FieldContainer label="Clearable" fullWidth>
-                        <TimeRangePicker value={timeRangeTwo} onChange={setTimeRangeTwo} clearable />
+                    <FieldContainer label="Required" fullWidth>
+                        <TimeRangePicker value={timeRangeTwo} onChange={setTimeRangeTwo} required />
                     </FieldContainer>
                 </Grid>
             </Grid>
@@ -39,7 +39,7 @@ storiesOf("stories/form/components/Date & Time Pickers/Time-Range Picker", modul
                             <Field name="timeRangeOne" label="Time-Range Picker" fullWidth component={FinalFormTimeRangePicker} />
                         </Grid>
                         <Grid item xs={6}>
-                            <Field name="timeRangeThree" label="Clearable" fullWidth component={FinalFormTimeRangePicker} clearable />
+                            <Field name="timeRangeThree" label="Required" fullWidth component={FinalFormTimeRangePicker} required />
                         </Grid>
                     </Grid>
                 )}

From 4ab08197a8f56e8e2550b39f64cc238e400279b8 Mon Sep 17 00:00:00 2001
From: andrearutrecht <andrea.rutrecht@vivid-planet.com>
Date: Mon, 22 Apr 2024 09:46:53 +0200
Subject: [PATCH 03/10] Replace 'clearable' with 'required' in 'ColorPicker'

---
 packages/admin/admin-color-picker/src/ColorPicker.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/admin/admin-color-picker/src/ColorPicker.tsx b/packages/admin/admin-color-picker/src/ColorPicker.tsx
index 14672822f9..1f21197b1e 100644
--- a/packages/admin/admin-color-picker/src/ColorPicker.tsx
+++ b/packages/admin/admin-color-picker/src/ColorPicker.tsx
@@ -58,7 +58,6 @@ 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;
@@ -79,7 +78,6 @@ 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" />,
@@ -124,6 +122,7 @@ export const ColorPicker = (inProps: ColorPickerProps) => {
 
     return (
         <Root
+            required={required}
             startAdornment={
                 startAdornment ? (
                     startAdornment

From f2db3de7b1b8879250464580d10f8a9c7cb97bd4 Mon Sep 17 00:00:00 2001
From: andrearutrecht <andrea.rutrecht@vivid-planet.com>
Date: Mon, 22 Apr 2024 10:55:47 +0200
Subject: [PATCH 04/10] Add missing 'required' prop where necessary for Pickers
 and their stories

---
 .../admin-date-time/src/dateRangePicker/DateRangePicker.tsx | 3 +--
 .../admin-date-time/src/dateTimePicker/DateTimePicker.tsx   | 4 ++--
 .../admin/admin-date-time/src/timePicker/TimePicker.tsx     | 1 +
 .../DateAndTimePickers/stories/DatePicker.stories.tsx       | 6 +++---
 .../DateAndTimePickers/stories/DateRangePicker.stories.tsx  | 2 +-
 .../DateAndTimePickers/stories/DateTimePicker.stories.tsx   | 6 +++---
 .../DateAndTimePickers/stories/TimePicker.stories.tsx       | 2 +-
 .../DateAndTimePickers/stories/TimeRangePicker.stories.tsx  | 4 ++--
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/admin/admin-date-time/src/dateRangePicker/DateRangePicker.tsx b/packages/admin/admin-date-time/src/dateRangePicker/DateRangePicker.tsx
index 773a10c2b1..9887d9e314 100644
--- a/packages/admin/admin-date-time/src/dateRangePicker/DateRangePicker.tsx
+++ b/packages/admin/admin-date-time/src/dateRangePicker/DateRangePicker.tsx
@@ -24,7 +24,6 @@ export interface DateRangePickerProps extends Omit<InputWithPopperProps, "childr
     value?: DateRange;
     formatDateOptions?: FormatDateOptions;
     rangeStringSeparator?: string;
-    // clearable?: boolean;
     required?: boolean;
     monthsToShow?: number;
     maxDate?: Date;
@@ -78,7 +77,6 @@ export const DateRangePicker = (inProps: DateRangePickerProps) => {
         formatDateOptions,
         rangeStringSeparator = "  —  ",
         endAdornment,
-        // clearable,
         required,
         placeholder,
         monthsToShow = 2,
@@ -103,6 +101,7 @@ export const DateRangePicker = (inProps: DateRangePickerProps) => {
             {...slotProps?.root}
             {...inputWithPopperProps}
             readOnly
+            required={required}
             endAdornment={
                 !required ? (
                     <>
diff --git a/packages/admin/admin-date-time/src/dateTimePicker/DateTimePicker.tsx b/packages/admin/admin-date-time/src/dateTimePicker/DateTimePicker.tsx
index 34b6a3216a..adb1f3cad0 100644
--- a/packages/admin/admin-date-time/src/dateTimePicker/DateTimePicker.tsx
+++ b/packages/admin/admin-date-time/src/dateTimePicker/DateTimePicker.tsx
@@ -60,7 +60,7 @@ export interface DateTimePickerProps
 }
 
 export const DateTimePicker = (inProps: DateTimePickerProps) => {
-    const { onChange, value, slotProps, required, ...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,6 @@ export const DateTimePicker = (inProps: DateTimePickerProps) => {
                     placeholder={intl.formatMessage({ id: "comet.timeTimePicker.time", defaultMessage: "Time" })}
                     onChange={onChangeTime}
                     fullWidth
-                    // clearable={clearable}
                     required={required}
                     {...slotProps?.timePicker}
                 />
diff --git a/packages/admin/admin-date-time/src/timePicker/TimePicker.tsx b/packages/admin/admin-date-time/src/timePicker/TimePicker.tsx
index 4d56d47dc9..c55ef2136a 100644
--- a/packages/admin/admin-date-time/src/timePicker/TimePicker.tsx
+++ b/packages/admin/admin-date-time/src/timePicker/TimePicker.tsx
@@ -118,6 +118,7 @@ export const TimePicker = (inProps: TimePickerProps) => {
                 inputWithPopperProps.onOpenPopper?.();
             }}
             readOnly
+            required={required}
             endAdornment={
                 !required ? (
                     <>
diff --git a/storybook/src/docs/form/components/DateAndTimePickers/stories/DatePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/stories/DatePicker.stories.tsx
index 8b74cd4272..30f6e1965f 100644
--- 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
index 3a9af7b852..b279000262 100644
--- a/storybook/src/docs/form/components/DateAndTimePickers/stories/DateRangePicker.stories.tsx
+++ b/storybook/src/docs/form/components/DateAndTimePickers/stories/DateRangePicker.stories.tsx
@@ -19,7 +19,7 @@ storiesOf("stories/form/components/Date & Time Pickers/Date-Range Picker", modul
                     </FieldContainer>
                 </Grid>
                 <Grid item xs={6} md={4}>
-                    <FieldContainer label="Required" fullWidth>
+                    <FieldContainer label="Required" fullWidth required>
                         <DateRangePicker fullWidth value={dateTwo} onChange={setDateTwo} required />
                     </FieldContainer>
                 </Grid>
diff --git a/storybook/src/docs/form/components/DateAndTimePickers/stories/DateTimePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/stories/DateTimePicker.stories.tsx
index d1bf4fad6c..8a0a7f717e 100644
--- 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="Required" fullWidth>
-                        <DateTimePicker value={dateTimeTwo} onChange={setDateTimeTwo} required />
+                    <FieldContainer label="Required" fullWidth required={true}>
+                        <DateTimePicker value={dateTimeTwo} onChange={setDateTimeTwo} required={true} />
                     </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="Required" fullWidth component={FinalFormDateTimePicker} required />
+                            <Field name="dateTimeTwo" label="Required" fullWidth required={true} component={FinalFormDateTimePicker} />
                         </Grid>
                         <Grid item xs={12} md={6}>
                             <Field
diff --git a/storybook/src/docs/form/components/DateAndTimePickers/stories/TimePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/stories/TimePicker.stories.tsx
index 62ae6e5afc..0e6b480999 100644
--- a/storybook/src/docs/form/components/DateAndTimePickers/stories/TimePicker.stories.tsx
+++ b/storybook/src/docs/form/components/DateAndTimePickers/stories/TimePicker.stories.tsx
@@ -30,7 +30,7 @@ storiesOf("stories/form/components/Date & Time Pickers/Time Picker", module)
                     </FieldContainer>
                 </Grid>
                 <Grid item xs={6} md={3}>
-                    <FieldContainer label="Required" fullWidth>
+                    <FieldContainer label="Required" fullWidth required>
                         <TimePicker fullWidth required value={timeFour} onChange={setTimeFour} />
                     </FieldContainer>
                 </Grid>
diff --git a/storybook/src/docs/form/components/DateAndTimePickers/stories/TimeRangePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/stories/TimeRangePicker.stories.tsx
index df13953dbb..8d2ebad7fe 100644
--- a/storybook/src/docs/form/components/DateAndTimePickers/stories/TimeRangePicker.stories.tsx
+++ b/storybook/src/docs/form/components/DateAndTimePickers/stories/TimeRangePicker.stories.tsx
@@ -18,7 +18,7 @@ storiesOf("stories/form/components/Date & Time Pickers/Time-Range Picker", modul
                     </FieldContainer>
                 </Grid>
                 <Grid item xs={6}>
-                    <FieldContainer label="Required" fullWidth>
+                    <FieldContainer label="Required" fullWidth required>
                         <TimeRangePicker value={timeRangeTwo} onChange={setTimeRangeTwo} required />
                     </FieldContainer>
                 </Grid>
@@ -39,7 +39,7 @@ storiesOf("stories/form/components/Date & Time Pickers/Time-Range Picker", modul
                             <Field name="timeRangeOne" label="Time-Range Picker" fullWidth component={FinalFormTimeRangePicker} />
                         </Grid>
                         <Grid item xs={6}>
-                            <Field name="timeRangeThree" label="Required" fullWidth component={FinalFormTimeRangePicker} required />
+                            <Field name="timeRangeTwo" label="Required" fullWidth component={FinalFormTimeRangePicker} required />
                         </Grid>
                     </Grid>
                 )}

From ce71fe163f792fceaedc05be0c1b40834f2cf933 Mon Sep 17 00:00:00 2001
From: andrearutrecht <andrea.rutrecht@vivid-planet.com>
Date: Mon, 22 Apr 2024 11:08:40 +0200
Subject: [PATCH 05/10] Add changesets

---
 .changeset/light-ligers-wonder.md | 7 +++++++
 .changeset/ninety-adults-peel.md  | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 .changeset/light-ligers-wonder.md
 create mode 100644 .changeset/ninety-adults-peel.md

diff --git a/.changeset/light-ligers-wonder.md b/.changeset/light-ligers-wonder.md
new file mode 100644
index 0000000000..51bb7f4e88
--- /dev/null
+++ b/.changeset/light-ligers-wonder.md
@@ -0,0 +1,7 @@
+---
+"@comet/admin-date-time": major
+---
+
+Remove `clearable` prop from `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
new file mode 100644
index 0000000000..16e1dad535
--- /dev/null
+++ b/.changeset/ninety-adults-peel.md
@@ -0,0 +1,7 @@
+---
+"@comet/admin-color-picker": major
+---
+
+Remove `clearable` prop from `ColorPicker`
+
+The clear button will automatically be shown for all optional fields.

From 584f142e3de7fc92c4d28e53277935c650e98504 Mon Sep 17 00:00:00 2001
From: andrearutrecht <andrea.rutrecht@vivid-planet.com>
Date: Tue, 23 Apr 2024 11:16:09 +0200
Subject: [PATCH 06/10] Set 'required' without 'true' in 'DateTimePicker' story

---
 .../DateAndTimePickers/stories/DateTimePicker.stories.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/src/docs/form/components/DateAndTimePickers/stories/DateTimePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/stories/DateTimePicker.stories.tsx
index 8a0a7f717e..f6a345f3c7 100644
--- a/storybook/src/docs/form/components/DateAndTimePickers/stories/DateTimePicker.stories.tsx
+++ b/storybook/src/docs/form/components/DateAndTimePickers/stories/DateTimePicker.stories.tsx
@@ -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="Required" fullWidth required={true} component={FinalFormDateTimePicker} />
+                            <Field name="dateTimeTwo" label="Required" fullWidth required component={FinalFormDateTimePicker} />
                         </Grid>
                         <Grid item xs={12} md={6}>
                             <Field

From a40bd9fd80191b8c15ea4153aa734315c045c2f3 Mon Sep 17 00:00:00 2001
From: andrearutrecht <andrea.rutrecht@vivid-planet.com>
Date: Tue, 23 Apr 2024 15:12:55 +0200
Subject: [PATCH 07/10] Update changeset texts

---
 .changeset/light-ligers-wonder.md | 2 ++
 .changeset/ninety-adults-peel.md  | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/.changeset/light-ligers-wonder.md b/.changeset/light-ligers-wonder.md
index 51bb7f4e88..1a43405d33 100644
--- a/.changeset/light-ligers-wonder.md
+++ b/.changeset/light-ligers-wonder.md
@@ -4,4 +4,6 @@
 
 Remove `clearable` prop from `DateRangePicker`, `DateTimePicker`, `TimePicker` and `TimeRangePicker`
 
+Add `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
index 16e1dad535..817b1c4d81 100644
--- a/.changeset/ninety-adults-peel.md
+++ b/.changeset/ninety-adults-peel.md
@@ -4,4 +4,6 @@
 
 Remove `clearable` prop from `ColorPicker`
 
+Add `required` prop to `ColorPicker`
+
 The clear button will automatically be shown for all optional fields.

From d1899f1da55c36783c86926781e8ae80db04aa61 Mon Sep 17 00:00:00 2001
From: andrearutrecht <andrea.rutrecht@vivid-planet.com>
Date: Tue, 23 Apr 2024 15:14:39 +0200
Subject: [PATCH 08/10] Set 'required' without 'true' in 'DateTimePicker' basic
 fields story

---
 .../DateAndTimePickers/stories/DateTimePicker.stories.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/storybook/src/docs/form/components/DateAndTimePickers/stories/DateTimePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/stories/DateTimePicker.stories.tsx
index f6a345f3c7..83557f0766 100644
--- 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="Required" fullWidth required={true}>
-                        <DateTimePicker value={dateTimeTwo} onChange={setDateTimeTwo} required={true} />
+                    <FieldContainer label="Required" fullWidth required>
+                        <DateTimePicker value={dateTimeTwo} onChange={setDateTimeTwo} required />
                     </FieldContainer>
                 </Grid>
                 <Grid item xs={12} md={6}>

From f62fbda78f38c940844ca5ed2d998d97639407f1 Mon Sep 17 00:00:00 2001
From: andrearutrecht <andrea.rutrecht@vivid-planet.com>
Date: Wed, 24 Apr 2024 08:57:25 +0200
Subject: [PATCH 09/10] Mention both changes in changeset title

---
 .changeset/light-ligers-wonder.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.changeset/light-ligers-wonder.md b/.changeset/light-ligers-wonder.md
index 1a43405d33..bcb2b8e00a 100644
--- a/.changeset/light-ligers-wonder.md
+++ b/.changeset/light-ligers-wonder.md
@@ -2,8 +2,6 @@
 "@comet/admin-date-time": major
 ---
 
-Remove `clearable` prop from `DateRangePicker`, `DateTimePicker`, `TimePicker` and `TimeRangePicker`
-
-Add `required` prop to `DateRangePicker`, `DateTimePicker`, `TimePicker` and `TimeRangePicker`
+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.

From e64b7796a01b03f10c0402d325862378360bbfca Mon Sep 17 00:00:00 2001
From: andrearutrecht <andrea.rutrecht@vivid-planet.com>
Date: Wed, 24 Apr 2024 13:11:37 +0200
Subject: [PATCH 10/10] Adapt changeset text

---
 .changeset/ninety-adults-peel.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.changeset/ninety-adults-peel.md b/.changeset/ninety-adults-peel.md
index 817b1c4d81..dcea95d454 100644
--- a/.changeset/ninety-adults-peel.md
+++ b/.changeset/ninety-adults-peel.md
@@ -2,8 +2,6 @@
 "@comet/admin-color-picker": major
 ---
 
-Remove `clearable` prop from `ColorPicker`
-
-Add `required` prop to `ColorPicker`
+Remove `clearable` prop and add a `required` prop to `ColorPicker`
 
 The clear button will automatically be shown for all optional fields.