From 82fa2d2852c0414614447c2b1ddd23c8fb7e5672 Mon Sep 17 00:00:00 2001 From: Farhan Abdul Date: Fri, 28 Apr 2023 21:12:08 +0500 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20prop=20for=20S?= =?UTF-8?q?QForm=20fields=20to=20allow=20'validation'=20as=20inf?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Closes: SSR-14 --- .../fields/SQFormDropdown/SQFormDropdown.tsx | 17 +++++++++++- .../SQFormTextField/SQFormTextField.tsx | 21 ++++++++++++++- src/hooks/useForm.tsx | 26 ++++++++++++++++++- stories/SQFormDropdown.stories.tsx | 6 ++++- stories/SQFormTextField.stories.tsx | 6 ++++- 5 files changed, 71 insertions(+), 5 deletions(-) diff --git a/src/components/fields/SQFormDropdown/SQFormDropdown.tsx b/src/components/fields/SQFormDropdown/SQFormDropdown.tsx index 527ba43b..29d93ec1 100644 --- a/src/components/fields/SQFormDropdown/SQFormDropdown.tsx +++ b/src/components/fields/SQFormDropdown/SQFormDropdown.tsx @@ -23,6 +23,8 @@ export type SQFormDropdownProps = BaseFieldProps & { children: SQFormOption[]; /** Whether to display empty option - - in options */ displayEmpty?: boolean; + /** Used to display informational Text under the input field same like warning text */ + informationalText?: string; /** Disabled property to disable the input if true */ isDisabled?: boolean; /** Whether or not to show the helper text */ @@ -62,6 +64,7 @@ function SQFormDropdown({ onChange, size = 'auto', muiFieldProps = {}, + informationalText = '', }: SQFormDropdownProps): React.ReactElement { const { formikField: {field}, @@ -71,6 +74,7 @@ function SQFormDropdown({ name, onBlur, onChange, + informationalText, }); const labelID = label.toLowerCase(); @@ -162,7 +166,18 @@ function SQFormDropdown({ })} {!isDisabled && displayHelperText && ( - {HelperTextComponent} + + {HelperTextComponent} + )} diff --git a/src/components/fields/SQFormTextField/SQFormTextField.tsx b/src/components/fields/SQFormTextField/SQFormTextField.tsx index 13858b90..6d537da2 100644 --- a/src/components/fields/SQFormTextField/SQFormTextField.tsx +++ b/src/components/fields/SQFormTextField/SQFormTextField.tsx @@ -13,6 +13,8 @@ export type SQFormTextFieldProps = BaseFieldProps & { isDisabled?: boolean; /** Whether or not to show the helper text */ displayHelperText?: boolean; + /** Used to display informational Text under the input field same like warning text */ + informationalText?: string; /** Custom onBlur event callback */ onBlur?: TextFieldProps['onBlur']; /** Custom onChange event callback */ @@ -45,6 +47,7 @@ function SQFormTextField({ startAdornment, endAdornment, type = 'text', + informationalText = '', InputProps, inputProps = {}, maxCharacters, @@ -62,6 +65,7 @@ function SQFormTextField({ name, onBlur, onChange, + informationalText, }); const [valueLength, setValueLength] = React.useState(() => { @@ -113,7 +117,22 @@ function SQFormTextField({ maxLength: maxCharacters, ...inputProps, }} - FormHelperTextProps={{error: isFieldError}} + FormHelperTextProps={{ + error: isFieldError, + sx: { + '&.MuiFormHelperText-root': { + color: 'var(--color-slate)', + }, + '&.Mui-focused': { + color: !isFieldRequired + ? 'var(--color-textInfoBlue)' + : 'var(--color-slate)', + }, + '&.Mui-error': { + color: 'var(--color-spanishOrange)', + }, + }, + }} name={name} type={type} label={labelText} diff --git a/src/hooks/useForm.tsx b/src/hooks/useForm.tsx index 84a002b0..bbfa69eb 100644 --- a/src/hooks/useForm.tsx +++ b/src/hooks/useForm.tsx @@ -5,6 +5,7 @@ import {Typography} from '@mui/material'; import { NewReleases as WarningIcon, VerifiedUser as VerifiedIcon, + Info as InfoIcon, } from '@mui/icons-material'; import type {Theme} from '@mui/material'; import type {FieldHelperProps, FieldInputProps, FieldMetaProps} from 'formik'; @@ -16,6 +17,7 @@ type ChangeHandler = ( type UseFormParam = { name: string; + informationalText: string; onBlur?: React.FocusEventHandler; onChange?: ChangeHandler; }; @@ -91,6 +93,7 @@ export function useForm({ name, onBlur, onChange, + informationalText, }: UseFormParam): UseFormReturn { _handleError(name); @@ -119,6 +122,7 @@ export function useForm({ const isFieldRequired = getFieldStatus() === 'REQUIRED'; const isFieldError = getFieldStatus() === 'ERROR'; const isFulfilled = getFieldStatus() === 'USER_FULFILLED'; + const isFieldInfo = getFieldStatus() === 'FULFILLED'; const handleChange: ChangeHandler = React.useCallback( (event) => { @@ -170,8 +174,28 @@ export function useForm({ /> ); } + if (isFieldInfo && informationalText) { + return ( + <> + + theme.typography.helper} + > + {informationalText} + + + ); + } return ' '; // return something so UI space always exists - }, [isFieldError, isFieldRequired, isFulfilled, errorMessage]); + }, [ + isFieldError, + isFieldRequired, + isFulfilled, + isFieldInfo, + informationalText, + errorMessage, + ]); return { formikField: {field, meta, helpers}, diff --git a/stories/SQFormDropdown.stories.tsx b/stories/SQFormDropdown.stories.tsx index 620004be..26cc42cb 100644 --- a/stories/SQFormDropdown.stories.tsx +++ b/stories/SQFormDropdown.stories.tsx @@ -70,7 +70,11 @@ const Template: DropdownStoryType = (args) => { validationSchema={schema} {...sqFormProps} > - + ); diff --git a/stories/SQFormTextField.stories.tsx b/stories/SQFormTextField.stories.tsx index 435ac37d..e16f6416 100644 --- a/stories/SQFormTextField.stories.tsx +++ b/stories/SQFormTextField.stories.tsx @@ -45,7 +45,11 @@ const Template: SQFormTextFieldStoryType = (args) => { initialValues={{[defaultArgs.name]: ''}} {...SQFormProps} > - + ); }; From 8014e389aec2ef4950bea6f41010337ff7e1b661 Mon Sep 17 00:00:00 2001 From: Farhan Abdul Date: Mon, 1 May 2023 01:52:19 +0500 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20InformationalTex?= =?UTF-8?q?t=20is=20not=20required=20prop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Closes: SSR-14 --- src/hooks/useForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useForm.tsx b/src/hooks/useForm.tsx index bbfa69eb..cb72c954 100644 --- a/src/hooks/useForm.tsx +++ b/src/hooks/useForm.tsx @@ -17,7 +17,7 @@ type ChangeHandler = ( type UseFormParam = { name: string; - informationalText: string; + informationalText?: string; onBlur?: React.FocusEventHandler; onChange?: ChangeHandler; }; From 5c0837425b35411e0d5d7cb97c22457ffc1e339c Mon Sep 17 00:00:00 2001 From: Farhan Abdul Date: Wed, 3 May 2023 17:37:08 +0500 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Adding=20New=20S?= =?UTF-8?q?tory=20For=20Helper=20Text=20Prop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Closes: SSR-14 --- stories/SQFormDropdown.stories.tsx | 12 +++++++----- stories/SQFormTextField.stories.tsx | 12 +++++++----- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/stories/SQFormDropdown.stories.tsx b/stories/SQFormDropdown.stories.tsx index 26cc42cb..cc00be8d 100644 --- a/stories/SQFormDropdown.stories.tsx +++ b/stories/SQFormDropdown.stories.tsx @@ -70,11 +70,7 @@ const Template: DropdownStoryType = (args) => { validationSchema={schema} {...sqFormProps} > - + ); @@ -93,4 +89,10 @@ WithValidation.parameters = { controls: {exclude: 'schema'}, }; +export const WithInformationalText = Template.bind({}); +WithInformationalText.args = { + ...defaultArgs, + informationalText: 'Helper Text Here', +}; + export default meta; diff --git a/stories/SQFormTextField.stories.tsx b/stories/SQFormTextField.stories.tsx index e16f6416..988cc18d 100644 --- a/stories/SQFormTextField.stories.tsx +++ b/stories/SQFormTextField.stories.tsx @@ -45,11 +45,7 @@ const Template: SQFormTextFieldStoryType = (args) => { initialValues={{[defaultArgs.name]: ''}} {...SQFormProps} > - + ); }; @@ -71,3 +67,9 @@ WithValidation.args = { WithValidation.parameters = { controls: {exclude: 'schema'}, }; + +export const WithInformationalText = Template.bind({}); +WithInformationalText.args = { + ...defaultArgs, + informationalText: 'Helper Text Here', +};