(#0) Add InputDatePicker Feedback Props

thebbodek · Jan 30, 2024 · fd259b9 · fd259b9
1 parent 0703fa5
commit fd259b9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
diff --git a/src/core/components/Input/InputBase/index.tsx b/src/core/components/Input/InputBase/index.tsx
@@ -23,6 +23,7 @@ const InputBase = forwardRef(
       required,
       readOnly,
       feedback,
+      feedbackColor = "error",
       ...props
     }: InputBaseProps<T>,
     ref: React.ComponentPropsWithRef<T>["ref"],
@@ -48,7 +49,7 @@ const InputBase = forwardRef(
         {inputComponent && inputComponent}
         {!readOnly && endComponent && endComponent}
       </div>
-      {feedback ? <Typography theme = "body-03-regular" color = "error" text = {feedback} /> : null}
+      {feedback ? <Typography theme = "body-03-regular" color = {feedbackColor} text = {feedback} /> : null}
     </Component>
   );
 });

diff --git a/src/core/components/Input/InputBase/types/index.ts b/src/core/components/Input/InputBase/types/index.ts
@@ -16,4 +16,5 @@ export interface InputBaseProps<T extends React.ElementType> extends React.HTMLA
   error?: boolean
   readOnly?: boolean;
   feedback?: React.ReactNode;
+  feedbackColor?: ThemeColors;
 }
diff --git a/src/core/components/Input/InputDatePicker/index.tsx b/src/core/components/Input/InputDatePicker/index.tsx
@@ -28,6 +28,8 @@ const InputDatePicker = ({
   dateLabel,
   closeButtonText,
   placeholder,
+  feedback,
+  feedbackColor,
 }: InputDatePickerProps & HTMLAttributes<HTMLInputElement>) => {
   const id = useId();
   const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
@@ -86,6 +88,8 @@ const InputDatePicker = ({
       onClick = {handleDatePicker}
       label = {label}
       required = {required}
+      feedback = {feedback}
+      feedbackColor = {feedbackColor}
       inputComponent = {
         <input
           type = "text"

diff --git a/src/core/components/Input/InputDatePicker/types/index.ts b/src/core/components/Input/InputDatePicker/types/index.ts
@@ -1,4 +1,5 @@
 import { DatePickerCalendarProps, PeriodDates } from "@/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps";
+import { InputBaseProps } from "../../InputBase/types";
 
 export interface DatePickerProps extends Pick<DatePickerCalendarProps, "useHoliday" | "disabled" | "disabledDates" | "cutoffDate" | "cutoffAfterDate" | "initialDate" | "afterAllDate"> {
   variants?: DatePickerCalendarProps["variants"];
@@ -7,7 +8,7 @@ export interface DatePickerProps extends Pick<DatePickerCalendarProps, "useHolid
   isOpen: boolean;
   close: DatePickerCalendarProps["onDateClick"];
   useTab?: boolean;
-  dateLabel?: DatePickerCalendarProps["label"]
+  dateLabel?: DatePickerCalendarProps["label"];
 }
 
 type CreateOverlayElement = (props: {
@@ -21,15 +22,17 @@ export interface ExternalDates {
   endDate: string | null;
 }
 
-export interface InputDatePickerProps extends Omit<DatePickerProps, "isOpen"| "close" | "periodDates" | "setPeriodDates" | "setIsAfterAllDate"> {
-  required?: boolean;
-  inputClassName?: string;
-  label?: string;
-  getPeriodDates: DatePickerCalendarProps["onDateClick"];
-  dateLabel?: DatePickerCalendarProps["label"]
-  overlay: {
-    open: (overlayElement: CreateOverlayElement) => void;
-    close: () => void;
-    exit: () => void;
+export interface InputDatePickerProps extends
+  Omit<DatePickerProps, "isOpen"| "close" | "periodDates" | "setPeriodDates" | "setIsAfterAllDate">,
+  Pick<InputBaseProps<"div">, "feedback" | "feedbackColor"> {
+    required?: boolean;
+    inputClassName?: string;
+    label?: string;
+    getPeriodDates: DatePickerCalendarProps["onDateClick"];
+    dateLabel?: DatePickerCalendarProps["label"];
+    overlay: {
+      open: (overlayElement: CreateOverlayElement) => void;
+      close: () => void;
+      exit: () => void;
+    }
   }
-}