From 691a2dd2415cfdf4fed68ea9aa2b83c311ffbede Mon Sep 17 00:00:00 2001 From: Branden Brown <29528409+20BBrown14@users.noreply.github.com> Date: Thu, 5 Oct 2023 15:13:25 -0500 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20SQFormDatePicker=20style?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adjust SQFormDatePicker styles ✅ Closes: SSR-249 --- .../SQFormDatePicker/SQFormDatePicker.tsx | 17 ++++++----------- .../SQFormDatePickerWithCalendarInputOnly.tsx | 2 +- .../SQFormDatePickerWithDateFNS.tsx | 17 ++++++----------- .../SQFormDatePicker/SQFormDateTimePicker.tsx | 12 ++++++++++-- 4 files changed, 23 insertions(+), 25 deletions(-) diff --git a/src/components/fields/SQFormDatePicker/SQFormDatePicker.tsx b/src/components/fields/SQFormDatePicker/SQFormDatePicker.tsx index 970bdd59..3caa65bd 100644 --- a/src/components/fields/SQFormDatePicker/SQFormDatePicker.tsx +++ b/src/components/fields/SQFormDatePicker/SQFormDatePicker.tsx @@ -52,7 +52,7 @@ function SQFormDatePicker({ size = 'auto', isDisabled = false, displayHelperText = true, - placeholder = '', + placeholder = 'MM / DD / YYYY', onBlur, onChange, setDisabledDate, @@ -109,13 +109,16 @@ function SQFormDatePicker({ variant="standard" error={isFieldError} fullWidth={true} - inputProps={{...inputProps.inputProps, ...muiTextInputProps}} + inputProps={{ + ...inputProps.inputProps, + placeholder, + ...muiTextInputProps, + }} InputLabelProps={{shrink: true}} FormHelperTextProps={{error: isFieldError}} helperText={ !isDisabled && displayHelperText && HelperTextComponent } - placeholder={placeholder} onBlur={handleBlur} required={isFieldRequired} onClick={ @@ -123,14 +126,6 @@ function SQFormDatePicker({ ? toggleCalendar : handleClickAway } - sx={{ - '& .MuiInputBase-root.Mui-focused, & .MuiInputBase-root:hover:not(.Mui-disabled)': - { - '& .MuiIconButton-root': { - color: 'var(--color-teal)', - }, - }, - }} /> ); }} diff --git a/src/components/fields/SQFormDatePicker/SQFormDatePickerWithCalendarInputOnly.tsx b/src/components/fields/SQFormDatePicker/SQFormDatePickerWithCalendarInputOnly.tsx index 4b66c828..8d0eccbf 100644 --- a/src/components/fields/SQFormDatePicker/SQFormDatePickerWithCalendarInputOnly.tsx +++ b/src/components/fields/SQFormDatePicker/SQFormDatePickerWithCalendarInputOnly.tsx @@ -31,7 +31,7 @@ function SQFormDatePickerWithCalendarInputOnly({ label, size = 'auto', isDisabled = false, - placeholder = '', + placeholder, onBlur, onChange, setDisabledDate, diff --git a/src/components/fields/SQFormDatePicker/SQFormDatePickerWithDateFNS.tsx b/src/components/fields/SQFormDatePicker/SQFormDatePickerWithDateFNS.tsx index b39eb35b..12cff754 100644 --- a/src/components/fields/SQFormDatePicker/SQFormDatePickerWithDateFNS.tsx +++ b/src/components/fields/SQFormDatePicker/SQFormDatePickerWithDateFNS.tsx @@ -22,7 +22,7 @@ function SQFormDatePickerWithDateFNS({ label, size = 'auto', isDisabled = false, - placeholder = '', + placeholder = 'MM / DD / YYYY', onBlur, onChange, setDisabledDate, @@ -79,11 +79,14 @@ function SQFormDatePickerWithDateFNS({ variant="standard" error={isFieldError} fullWidth={true} - inputProps={{...inputProps.inputProps, ...muiTextInputProps}} + inputProps={{ + ...inputProps.inputProps, + placeholder, + ...muiTextInputProps, + }} InputLabelProps={{shrink: true}} FormHelperTextProps={{error: isFieldError}} helperText={!isDisabled && HelperTextComponent} - placeholder={placeholder} onBlur={handleBlur} required={isFieldRequired} onClick={ @@ -91,14 +94,6 @@ function SQFormDatePickerWithDateFNS({ ? toggleCalendar : handleClickAway } - sx={{ - '& .MuiInputBase-root.Mui-focused, & .MuiInputBase-root:hover:not(.Mui-disabled)': - { - '& .MuiIconButton-root': { - color: 'var(--color-teal)', - }, - }, - }} /> ); }} diff --git a/src/components/fields/SQFormDatePicker/SQFormDateTimePicker.tsx b/src/components/fields/SQFormDatePicker/SQFormDateTimePicker.tsx index d71b61e7..d4b835f2 100644 --- a/src/components/fields/SQFormDatePicker/SQFormDateTimePicker.tsx +++ b/src/components/fields/SQFormDatePicker/SQFormDateTimePicker.tsx @@ -4,6 +4,7 @@ import {DateTimePicker} from '@mui/x-date-pickers'; import {useForm} from '../../../hooks/useForm'; import type {MarkOptional} from 'ts-essentials'; import type {Moment} from 'moment'; +import type {InputBaseComponentProps} from '@mui/material'; import type {BaseDateTimePickerProps} from '@mui/x-date-pickers/DateTimePicker/shared'; import type {BaseFieldProps} from '../../../types'; @@ -21,6 +22,8 @@ export type SQFormDateTimePickerProps = BaseFieldProps & { BaseDateTimePickerProps, 'onChange' | 'value' | 'renderInput' >; + /** Any valid prop for MUI input field - https://material-ui.com/api/text-field/ & https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes */ + muiTextInputProps?: InputBaseComponentProps; }; function SQFormDateTimePicker({ @@ -28,10 +31,11 @@ function SQFormDateTimePicker({ label, size = 'auto', isDisabled = false, - placeholder = '', + placeholder = 'MM / DD / YYYY HH:MM (A|P)M', onBlur, onChange, muiFieldProps = {}, + muiTextInputProps = {}, }: SQFormDateTimePickerProps): JSX.Element { const { formikField: {field, helpers}, @@ -80,10 +84,14 @@ function SQFormDateTimePicker({ disabled={isDisabled} error={isFieldError} fullWidth={true} + inputProps={{ + ...inputProps.inputProps, + placeholder, + ...muiTextInputProps, + }} InputLabelProps={{shrink: true}} FormHelperTextProps={{error: isFieldError}} helperText={!isDisabled && HelperTextComponent} - placeholder={placeholder} onBlur={handleBlur} onClick={handleClickAway} required={isFieldRequired}