feat: 🎸 remove isTertiaryDisabled prop and showTertiaryButton

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

@@ -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<Values extends FormikValues> {
   /** The secondary button text (Button located on left side of Dialog) */
@@ -31,12 +32,14 @@ export interface SQFormDialogProps<Values extends FormikValues> {
   ) => void | Promise<unknown>;
   /** 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<Values extends FormikValues>({
   shouldRequireFieldUpdates = false,
   validationSchema,
   showSecondaryButton = true,
-  showTertiaryButton = false,
-  isTertiaryDisabled = false,
   onTertiaryClick,
+  tertiaryStatus = 'HIDE_BUTTON',
 }: SQFormDialogProps<Values>): React.ReactElement {
   const initialErrors = useInitialRequiredErrors(
     validationSchema,
@@ -111,9 +113,8 @@ function SQFormDialog<Values extends FormikValues>({
         title={title}
         muiGridProps={muiGridProps}
         showSecondaryButton={showSecondaryButton}
-        showTertiaryButton={showTertiaryButton}
+        tertiaryStatus={tertiaryStatus}
         tertiaryButtonText={tertiaryButtonText}
-        isTertiaryDisabled={isTertiaryDisabled}
         onTertiaryClick={onTertiaryClick}
       />
     </Formik>

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<Values extends FormikValues> {
   /** The secondary button text (Button located on left side of Dialog) */
@@ -45,16 +46,18 @@ interface SQFormDialogInnerProps<Values extends FormikValues> {
   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<Values>) => void;
 }
@@ -121,8 +124,7 @@ function SQFormDialogInner<Values extends FormikValues>({
   muiGridProps,
   shouldDisplaySaveButton = true,
   showSecondaryButton = true,
-  showTertiaryButton = false,
-  isTertiaryDisabled = false,
+  tertiaryStatus = 'HIDE_BUTTON',
   onTertiaryClick,
 }: SQFormDialogInnerProps<Values>): React.ReactElement {
   const theme = useTheme();
@@ -132,6 +134,19 @@ function SQFormDialogInner<Values extends FormikValues>({
   const dialogContentClasses = useDialogContentStyles(theme);
   const formikContext = useFormikContext<Values>();
 
+  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<Values extends FormikValues>({
           <span style={{paddingRight: '20px'}}>
             <SQFormButton
               title={tertiaryButtonText}
-              isDisabled={isTertiaryDisabled || !formikContext.isValid}
+              isDisabled={getIsDisabled()}
               onClick={() => onTertiaryClick?.(formikContext)}
               type="button"
             >
@@ -233,7 +248,7 @@ function SQFormDialogInner<Values extends FormikValues>({
               showSecondaryButton ? actionsClasses : primaryActionsClasses
             }
           >
-            {showTertiaryButton
+            {tertiaryStatus !== 'HIDE_BUTTON'
               ? renderTertiaryButton()
               : showSecondaryButton && (
                   <RoundedButton
@@ -247,7 +262,7 @@ function SQFormDialogInner<Values extends FormikValues>({
                     {cancelButtonText}
                   </RoundedButton>
                 )}
-            {!showTertiaryButton && shouldDisplaySaveButton && (
+            {tertiaryStatus === 'HIDE_BUTTON' && shouldDisplaySaveButton && (
               <SQFormButton
                 title={saveButtonText}
                 isDisabled={isDisabled}

src/components/SQFormDialog/types.ts

@@ -0,0 +1,7 @@
+export type SQFormDialogTertiaryValue =
+  | 'HIDE_BUTTON'
+  | 'NO_VALIDATION'
+  | 'IS_DISABLED'
+  | 'IS_ENABLED'
+  | 'FORM_VALIDATION_ONLY'
+  | 'IS_DISABLED_AND_FORM_VALIDATION';

stories/SQFormDialog.stories.tsx

@@ -158,7 +158,7 @@ WithTertiaryButton.args = {
     hello: '',
   },
   title: 'With Tertiary Button',
-  showTertiaryButton: true,
+  tertiaryStatus: 'IS_ENABLED',
   tertiaryButtonText: 'Tertiary',
   onTertiaryClick: handleTertiaryClick,
 };

stories/__tests__/SQFormDialog.stories.test.tsx

@@ -160,7 +160,7 @@ describe('Tests for WithValidation', () => {
         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(
+      <WithValidation
+        isOpen={true}
+        onSave={handleSave}
+        onClose={handleClose}
+        isDisabled={isLoading}
+        tertiaryStatus="IS_DISABLED_AND_FORM_VALIDATION"
+        tertiaryButtonText={'Tertiary'}
+      />
+    );
+
+    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();
+  });
 });