From 9bc03adeb4012c8e9e5071742bb70c6a52f727f0 Mon Sep 17 00:00:00 2001 From: James Griffith Date: Tue, 3 May 2022 21:35:41 -0500 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20remove=20isTertiaryDisab?= =?UTF-8?q?led=20prop=20and=20showTertiaryButton?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit remove isTertiaryDisabled and showTertiaryButton props and replace them with a new prop called tertiaryStatus. BREAKING CHANGE: 🧨 remove isTertiaryDisabled and showTertiaryButton props and replace them with a new prop called tertiaryStatus that will determine if we render the tertiary button as well as how we handle disabling/enabling it. --- src/components/SQFormDialog/SQFormDialog.tsx | 17 +++++----- .../SQFormDialog/SQFormDialogInner.tsx | 33 ++++++++++++++----- src/components/SQFormDialog/types.ts | 7 ++++ stories/SQFormDialog.stories.tsx | 2 +- .../__tests__/SQFormDialog.stories.test.tsx | 27 +++++++++++++-- 5 files changed, 66 insertions(+), 20 deletions(-) create mode 100644 src/components/SQFormDialog/types.ts diff --git a/src/components/SQFormDialog/SQFormDialog.tsx b/src/components/SQFormDialog/SQFormDialog.tsx index 7e6d4f53..008dbab4 100644 --- a/src/components/SQFormDialog/SQFormDialog.tsx +++ b/src/components/SQFormDialog/SQFormDialog.tsx @@ -5,6 +5,7 @@ import {useInitialRequiredErrors} from '../../hooks/useInitialRequiredErrors'; import type {FormikHelpers, FormikValues, FormikContextType} from 'formik'; import type {DialogProps, GridProps} from '@material-ui/core'; import type {AnyObjectSchema} from 'yup'; +import type {SQFormDialogTertiaryValue} from './types'; export interface SQFormDialogProps { /** The secondary button text (Button located on left side of Dialog) */ @@ -31,12 +32,14 @@ export interface SQFormDialogProps { ) => void | Promise; /** Determine if the secondary action button should be displayed (default: true) */ showSecondaryButton?: boolean; - /** Whether to show the tertiary button. (Default: false) */ - showTertiaryButton?: boolean; + /** + * determine the status of the tertiary button + * can be one of'HIDE_BUTTON'|'NO_VALIDATION'|'IS_DISABLED'|'IS_ENABLED'|'FORM_VALIDATION_ONLY'|'IS_DISABLED_AND_FORM_VALIDATION', + * this will determine if the button is rendered, as well as if the button is disabled and if it uses form validation. + */ + tertiaryStatus: SQFormDialogTertiaryValue; /** The tertiary button text */ tertiaryButtonText?: string; - /** Whether the tertiary button is disabled (Default: false) */ - isTertiaryDisabled?: boolean; /** Whether to show save/submit button (default: true) */ shouldDisplaySaveButton?: boolean; /** The primary button text (Button located on right side of Dialog) */ @@ -79,9 +82,8 @@ function SQFormDialog({ shouldRequireFieldUpdates = false, validationSchema, showSecondaryButton = true, - showTertiaryButton = false, - isTertiaryDisabled = false, onTertiaryClick, + tertiaryStatus = 'HIDE_BUTTON', }: SQFormDialogProps): React.ReactElement { const initialErrors = useInitialRequiredErrors( validationSchema, @@ -111,9 +113,8 @@ function SQFormDialog({ title={title} muiGridProps={muiGridProps} showSecondaryButton={showSecondaryButton} - showTertiaryButton={showTertiaryButton} + tertiaryStatus={tertiaryStatus} tertiaryButtonText={tertiaryButtonText} - isTertiaryDisabled={isTertiaryDisabled} onTertiaryClick={onTertiaryClick} /> diff --git a/src/components/SQFormDialog/SQFormDialogInner.tsx b/src/components/SQFormDialog/SQFormDialogInner.tsx index f1be88bc..4ee12d97 100644 --- a/src/components/SQFormDialog/SQFormDialogInner.tsx +++ b/src/components/SQFormDialog/SQFormDialogInner.tsx @@ -18,6 +18,7 @@ import type {DialogProps, GridProps} from '@material-ui/core'; import type {Theme} from '@material-ui/core/styles'; import type {TransitionProps} from '@material-ui/core/transitions'; import type {FormikContextType, FormikValues} from 'formik'; +import type {SQFormDialogTertiaryValue} from './types'; interface SQFormDialogInnerProps { /** The secondary button text (Button located on left side of Dialog) */ @@ -45,16 +46,18 @@ interface SQFormDialogInnerProps { shouldRequireFieldUpdates?: boolean; /** Title text at the top of the Dialog */ title: string; + /** + * determine the status of the tertiary button + * can be one of'HIDE_BUTTON'|'NO_VALIDATION'|'IS_DISABLED'|'IS_ENABLED'|'FORM_VALIDATION_ONLY'|'IS_DISABLED_AND_FORM_VALIDATION', + * this will determine if the button is rendered, as well as if the button is disabled and if it uses form validation. + */ + tertiaryStatus: SQFormDialogTertiaryValue; /** Any prop from https://material-ui.com/api/grid */ muiGridProps?: GridProps; /** Determine if the secondary action button should be displayed */ showSecondaryButton?: boolean; - /** Whether to show the tertiary button. (Default: false) */ - showTertiaryButton?: boolean; /** The tertiary button text */ tertiaryButtonText?: string; - /** Whether the tertiary button is disabled (Default: false) */ - isTertiaryDisabled?: boolean; /** Callback function invoked when the user clicks the tertiary button */ onTertiaryClick?: (formikContext: FormikContextType) => void; } @@ -121,8 +124,7 @@ function SQFormDialogInner({ muiGridProps, shouldDisplaySaveButton = true, showSecondaryButton = true, - showTertiaryButton = false, - isTertiaryDisabled = false, + tertiaryStatus = 'HIDE_BUTTON', onTertiaryClick, }: SQFormDialogInnerProps): React.ReactElement { const theme = useTheme(); @@ -132,6 +134,19 @@ function SQFormDialogInner({ const dialogContentClasses = useDialogContentStyles(theme); const formikContext = useFormikContext(); + function getIsDisabled() { + switch (tertiaryStatus) { + case 'IS_DISABLED': + return true; + case 'FORM_VALIDATION_ONLY': + return !formikContext.isValid; + case 'IS_DISABLED_AND_FORM_VALIDATION': + return isDisabled || !formikContext.isValid; + default: + return false; + } + } + const { isDialogOpen: isDialogAlertOpen, openDialog: openDialogAlert, @@ -184,7 +199,7 @@ function SQFormDialogInner({ onTertiaryClick?.(formikContext)} type="button" > @@ -233,7 +248,7 @@ function SQFormDialogInner({ showSecondaryButton ? actionsClasses : primaryActionsClasses } > - {showTertiaryButton + {tertiaryStatus !== 'HIDE_BUTTON' ? renderTertiaryButton() : showSecondaryButton && ( ({ {cancelButtonText} )} - {!showTertiaryButton && shouldDisplaySaveButton && ( + {tertiaryStatus === 'HIDE_BUTTON' && shouldDisplaySaveButton && ( { isOpen={true} onSave={handleSave} onClose={handleClose} - showTertiaryButton={true} + tertiaryStatus="FORM_VALIDATION_ONLY" tertiaryButtonText={'Tertiary'} /> ); @@ -204,7 +204,7 @@ describe('Tests for Tertiary Button', () => { isOpen={true} onSave={handleSave} onClose={handleClose} - showTertiaryButton={true} + tertiaryStatus="IS_ENABLED" tertiaryButtonText={tertiaryButtonText} title={dialogTitleValue} /> @@ -238,4 +238,27 @@ describe('Tests for Tertiary Button', () => { expect(screen.queryByText(tertiaryButtonText)).toBeNull(); }); + + it('should disable the tertiary button if the tertiaryStatus is IS_DISABLED_AND_FORM_VALIDATION and the isDisabled value is true', async () => { + const isLoading = true; + render( + + ); + + expect( + await screen.findByRole('button', {name: /Tertiary/i}) + ).toBeDisabled(); + + const textField = screen.getByLabelText(/hello/i); + userEvent.type(textField, mockData.hello); + + expect(await screen.findByRole('button', {name: /Save/i})).toBeDisabled(); + }); });