feat: modal: add three additional header action button props (#244)

EightfoldAI · Jul 20, 2022 · 60abc1f · 60abc1f
1 parent 54c7c3d
commit 60abc1f
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 6 deletions.
diff --git a/src/__snapshots__/storybook.test.js.snap b/src/__snapshots__/storybook.test.js.snap
diff --git a/src/components/Dialog/BaseDialog/BaseDialog.tsx b/src/components/Dialog/BaseDialog/BaseDialog.tsx
@@ -15,6 +15,9 @@ import styles from './base-dialog.module.scss';
 export const BaseDialog: FC<BaseDialogProps> = React.forwardRef(
     (
         {
+            actionButtonOneProps,
+            actionButtonTwoProps,
+            actionButtonThreeProps,
             parent = document.body,
             visible,
             onClose,
@@ -92,10 +95,21 @@ export const BaseDialog: FC<BaseDialogProps> = React.forwardRef(
                 >
                     <div className={headerClasses}>
                         <span id={labelId}>{header}</span>
-                        <NeutralButton
-                            iconProps={{ path: IconName.mdiClose }}
-                            onClick={onClose}
-                        />
+                        <span className={styles.headerButtons}>
+                            {actionButtonThreeProps && (
+                                <NeutralButton {...actionButtonThreeProps} />
+                            )}
+                            {actionButtonTwoProps && (
+                                <NeutralButton {...actionButtonTwoProps} />
+                            )}
+                            {actionButtonOneProps && (
+                                <NeutralButton {...actionButtonOneProps} />
+                            )}
+                            <NeutralButton
+                                iconProps={{ path: IconName.mdiClose }}
+                                onClick={onClose}
+                            />
+                        </span>
                     </div>
                     <div className={bodyClassNames}>{body}</div>
                     {actions && (

diff --git a/src/components/Dialog/BaseDialog/BaseDialog.types.ts b/src/components/Dialog/BaseDialog/BaseDialog.types.ts
@@ -1,5 +1,6 @@
 import React, { Ref } from 'react';
 import { OcBaseProps } from '../../OcBase';
+import { ButtonProps } from '../../Button';
 
 type EventType =
     | React.KeyboardEvent<HTMLDivElement>
@@ -9,6 +10,18 @@ type Strategy = 'absolute' | 'fixed';
 
 export interface BaseDialogProps
     extends Omit<OcBaseProps<HTMLDivElement>, 'classNames'> {
+    /**
+     * Props for the first header action button
+     */
+    actionButtonOneProps?: ButtonProps;
+    /**
+     * Props for the second header action button
+     */
+    actionButtonTwoProps?: ButtonProps;
+    /**
+     * Props for the third header action button
+     */
+    actionButtonThreeProps?: ButtonProps;
     /**
      * Dialog is visible or not
      */

diff --git a/src/components/Dialog/BaseDialog/base-dialog.module.scss b/src/components/Dialog/BaseDialog/base-dialog.module.scss
@@ -16,6 +16,14 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
+
+            &-buttons {
+                align-items: flex-end;
+                align-self: start;
+                height: fit-content;
+                justify-content: right;
+                white-space: nowrap;
+            }
         }
     }
 

diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -9,6 +9,9 @@ import styles from './dialog.module.scss';
 export const Dialog: FC<DialogProps> = React.forwardRef(
     (
         {
+            actionButtonOneProps,
+            actionButtonTwoProps,
+            actionButtonThreeProps,
             parent = document.body,
             size = DialogSize.medium,
             headerClassNames,
@@ -46,6 +49,9 @@ export const Dialog: FC<DialogProps> = React.forwardRef(
             <BaseDialog
                 {...rest}
                 ref={ref}
+                actionButtonOneProps={actionButtonOneProps}
+                actionButtonTwoProps={actionButtonTwoProps}
+                actionButtonThreeProps={actionButtonThreeProps}
                 dialogClassNames={dialogClasses}
                 headerClassNames={headerClasses}
                 bodyClassNames={bodyClasses}

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
@@ -3,6 +3,7 @@ import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Modal, ModalSize } from './';
 import { DefaultButton, PrimaryButton } from '../Button';
+import { IconName } from '../Icon';
 
 export default {
     title: 'Modal',
@@ -214,6 +215,25 @@ const Scrollable_Story: ComponentStory<typeof Modal> = (args) => {
 
 export const Scrollable = Scrollable_Story.bind({});
 
+const Header_Actions_Story: ComponentStory<typeof Modal> = (args) => {
+    const [visible, setVisible] = useState<boolean>(false);
+    return (
+        <>
+            <PrimaryButton
+                text={'Open modal'}
+                onClick={() => setVisible(true)}
+            />
+            <Modal
+                {...args}
+                onClose={() => setVisible(false)}
+                visible={visible}
+            />
+        </>
+    );
+};
+
+export const Header_Actions = Header_Actions_Story.bind({});
+
 const modalArgs: Object = {
     size: ModalSize.small,
     actionsClassNames: 'my-modal-actions-class',
@@ -394,3 +414,19 @@ Scrollable.args = {
         </>
     ),
 };
+
+Header_Actions.args = {
+    ...modalArgs,
+    actionButtonOneProps: {
+        iconProps: { path: IconName.mdiCogOutline },
+    },
+    actionButtonTwoProps: {
+        iconProps: {
+            path: IconName.mdiHistory,
+        },
+    },
+    actionButtonThreeProps: {
+        iconProps: { path: IconName.mdiDatabaseArrowDownOutline },
+    },
+    size: ModalSize.medium,
+};
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
@@ -3,6 +3,7 @@ import MatchMediaMock from 'jest-matchmedia-mock';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { Modal } from './Modal';
+import { IconName } from '../Icon';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -65,4 +66,28 @@ describe('Modal', () => {
         wrapper.find('.dialog-backdrop').at(0).simulate('click');
         expect(onClose).toHaveBeenCalledTimes(2);
     });
+
+    test('modal header actions exist', () => {
+        const onClose = jest.fn();
+        wrapper.setProps({
+            visible: true,
+            header,
+            body,
+            actionButtonOneProps: {
+                classNames: 'header-action-button-1',
+                iconProps: { path: IconName.mdiCogOutline },
+            },
+            actionButtonTwoProps: {
+                classNames: 'header-action-button-2',
+                iconProps: { path: IconName.mdiHistory },
+            },
+            actionButtonThreeProps: {
+                classNames: 'header-action-button-3',
+                iconProps: { path: IconName.mdiDatabaseArrowDownOutline },
+            },
+        });
+        expect(wrapper.find('.header-action-button-1').length).toBeTruthy();
+        expect(wrapper.find('.header-action-button-2').length).toBeTruthy();
+        expect(wrapper.find('.header-action-button-3').length).toBeTruthy();
+    });
 });
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -8,6 +8,9 @@ import styles from './modal.module.scss';
 export const Modal: FC<ModalProps> = React.forwardRef(
     (
         {
+            actionButtonOneProps,
+            actionButtonTwoProps,
+            actionButtonThreeProps,
             size = ModalSize.medium,
             headerClassNames,
             bodyClassNames,
@@ -45,6 +48,9 @@ export const Modal: FC<ModalProps> = React.forwardRef(
             <BaseDialog
                 {...rest}
                 ref={ref}
+                actionButtonOneProps={actionButtonOneProps}
+                actionButtonTwoProps={actionButtonTwoProps}
+                actionButtonThreeProps={actionButtonThreeProps}
                 dialogWrapperClassNames={modalWrapperClassNames}
                 dialogClassNames={modalClasses}
                 headerClassNames={headerClasses}