From 183bff658ee4daf2038b0e464e890057798b42b7 Mon Sep 17 00:00:00 2001
From: Vadzim Hvazdovich <vadzim_hvazdovich@epam.com>
Date: Wed, 14 Aug 2024 13:01:18 +0300
Subject: [PATCH 1/4] add button type for Dropdown and custom props for Modal
 custom footer

---
 src/components/dropdown/dropdown.tsx | 1 +
 src/components/modal/README.md       | 1 +
 src/components/modal/modal.tsx       | 4 +++-
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index cbb126a..b2aee2d 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -210,6 +210,7 @@ export const Dropdown: FC<DropdownProps> = ({
           onKeyDown: handleToggleButtonKeyDown,
           ref: refs.setReference,
         })}
+        type={'button'}
       >
         {icon && <span className={cx('icon')}>{icon}</span>}
         <span className={cx('value', { placeholder: !value })}>{getDisplayedValue()}</span>
diff --git a/src/components/modal/README.md b/src/components/modal/README.md
index b8ea51a..5523cbb 100644
--- a/src/components/modal/README.md
+++ b/src/components/modal/README.md
@@ -17,6 +17,7 @@ Default width - 480px, height 100%
 - **size**: _string_, optional, default = "default"
 - **onClose**: _function_, optional, default = () => {}
 - **description**: _node_, optional, default = null
+- **customFooterProps**: _object_, optional, default = undefined
 
 ### Variants
 
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 1f26f22..ee392ac 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -35,6 +35,7 @@ interface ModalProps {
   scrollable?: boolean;
   withoutFooter?: boolean;
   CustomFooter?: FC<{ closeHandler: () => void }>;
+  customFooterProps?: object;
   description?: ReactNode;
 }
 
@@ -54,6 +55,7 @@ export const Modal: FC<ModalProps> = ({
   scrollable = false,
   withoutFooter = false,
   CustomFooter = null,
+  customFooterProps,
   description = null,
 }) => {
   const [isShown, setShown] = useState(false);
@@ -137,7 +139,7 @@ export const Modal: FC<ModalProps> = ({
             )}
             {!withoutFooter &&
               (CustomFooter ? (
-                <CustomFooter closeHandler={closeModal} />
+                <CustomFooter closeHandler={closeModal} {...customFooterProps} />
               ) : (
                 <ModalFooter
                   size={size}

From b8d7f79e34f4729750751a119c7c1847aad36e5e Mon Sep 17 00:00:00 2001
From: Vadzim Hvazdovich <vadzim_hvazdovich@epam.com>
Date: Fri, 16 Aug 2024 16:51:54 +0300
Subject: [PATCH 2/4] EPMRPP-92433 || code review fixes - 1

---
 src/components/dropdown/dropdown.tsx |  2 +-
 src/components/modal/README.md       |  2 +-
 src/components/modal/modal.tsx       | 10 ++++------
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index b2aee2d..407c96e 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -210,7 +210,7 @@ export const Dropdown: FC<DropdownProps> = ({
           onKeyDown: handleToggleButtonKeyDown,
           ref: refs.setReference,
         })}
-        type={'button'}
+        type="button"
       >
         {icon && <span className={cx('icon')}>{icon}</span>}
         <span className={cx('value', { placeholder: !value })}>{getDisplayedValue()}</span>
diff --git a/src/components/modal/README.md b/src/components/modal/README.md
index 5523cbb..d0c06be 100644
--- a/src/components/modal/README.md
+++ b/src/components/modal/README.md
@@ -17,7 +17,7 @@ Default width - 480px, height 100%
 - **size**: _string_, optional, default = "default"
 - **onClose**: _function_, optional, default = () => {}
 - **description**: _node_, optional, default = null
-- **customFooterProps**: _object_, optional, default = undefined
+- **createFooter**: _function_, optional, default = null
 
 ### Variants
 
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index ee392ac..593da30 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -34,8 +34,7 @@ interface ModalProps {
   cancelButton?: ButtonProps;
   scrollable?: boolean;
   withoutFooter?: boolean;
-  CustomFooter?: FC<{ closeHandler: () => void }>;
-  customFooterProps?: object;
+  createFooter?: (closeHandler: () => void) => ReactNode;
   description?: ReactNode;
 }
 
@@ -54,8 +53,7 @@ export const Modal: FC<ModalProps> = ({
   allowCloseOutside = true,
   scrollable = false,
   withoutFooter = false,
-  CustomFooter = null,
-  customFooterProps,
+  createFooter = null,
   description = null,
 }) => {
   const [isShown, setShown] = useState(false);
@@ -138,8 +136,8 @@ export const Modal: FC<ModalProps> = ({
               </>
             )}
             {!withoutFooter &&
-              (CustomFooter ? (
-                <CustomFooter closeHandler={closeModal} {...customFooterProps} />
+              (createFooter ? (
+                createFooter(closeModal)
               ) : (
                 <ModalFooter
                   size={size}

From 6635be718f94b4deb7596e76c2f35d96ff732fbd Mon Sep 17 00:00:00 2001
From: Vadzim Hvazdovich <vadzim_hvazdovich@epam.com>
Date: Fri, 16 Aug 2024 17:02:37 +0300
Subject: [PATCH 3/4] EPMRPP-92433 || modal storybook fix

---
 src/components/modal/modal.stories.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/modal/modal.stories.tsx b/src/components/modal/modal.stories.tsx
index 9f9e90a..14a429b 100644
--- a/src/components/modal/modal.stories.tsx
+++ b/src/components/modal/modal.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Modal } from './modal';
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { Button } from '@components/button';
 
 const meta: Meta<typeof Modal> = {
@@ -47,7 +47,7 @@ export const WithSteps: Story = {
     const [step, setStep] = useState<number>(1);
     const buttonStyle = { minWidth: 'fit-content' };
 
-    const CustomFooter: FC<{ closeHandler: () => void }> = ({ closeHandler }) => {
+    const createFooter = (closeHandler: () => void) => {
       return (
         <div
           style={{
@@ -73,7 +73,7 @@ export const WithSteps: Story = {
     };
 
     return (
-      <Modal {...args} title={'Modal with steps'} CustomFooter={CustomFooter}>
+      <Modal {...args} title={'Modal with steps'} createFooter={createFooter}>
         content for step {step}
       </Modal>
     );

From b4ee682dd6f8f5c6ee6c2e08275db5b685551ded Mon Sep 17 00:00:00 2001
From: Vadzim Hvazdovich <vadzim_hvazdovich@epam.com>
Date: Fri, 16 Aug 2024 19:40:19 +0300
Subject: [PATCH 4/4] EPMRPP-92433 || modal scrollable style fix

---
 src/components/modal/modal.module.scss                    | 4 ++++
 src/components/modal/modal.tsx                            | 8 ++++++--
 .../modal/modalContent/modalContent.module.scss           | 6 +++++-
 src/components/modal/modalContent/modalContent.tsx        | 5 +++--
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/modal/modal.module.scss b/src/components/modal/modal.module.scss
index 162f53b..ff8e1f2 100644
--- a/src/components/modal/modal.module.scss
+++ b/src/components/modal/modal.module.scss
@@ -67,6 +67,10 @@ $WIDTH-LARGE: 720px;
   font-weight: $fw-regular;
   @include font-scale();
   color: var(--rp-ui-base-almost-black);
+
+  &.scrollable{
+    width: calc(100% - 34px);
+  }
 }
 
 .size-default {
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 593da30..425cd01 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -126,8 +126,12 @@ export const Modal: FC<ModalProps> = ({
             <ModalHeader title={title} onClose={closeModal} withDescription={!!description} />
             {scrollable ? (
               <Scrollbars autoHeight autoHeightMax={getContentMaxHeight()} hideTracksWhenNotNeeded>
-                {description && <span className={cx('description')}>{description}</span>}
-                <ModalContent>{children}</ModalContent>
+                {description && (
+                  <span className={cx('description', { scrollable: scrollable })}>
+                    {description}
+                  </span>
+                )}
+                <ModalContent scrollable>{children}</ModalContent>
               </Scrollbars>
             ) : (
               <>
diff --git a/src/components/modal/modalContent/modalContent.module.scss b/src/components/modal/modalContent/modalContent.module.scss
index eff3288..37d4624 100644
--- a/src/components/modal/modalContent/modalContent.module.scss
+++ b/src/components/modal/modalContent/modalContent.module.scss
@@ -2,7 +2,7 @@
 @import 'src/assets/styles/mixins/font-scale';
 
 .modal-content {
-  width: calc(100% - 34px);
+  width: 100%;
   font-family: var(--rp-ui-base-font-family);
   font-weight: $fw-regular;
   @include font-scale();
@@ -10,4 +10,8 @@
   white-space: pre-line;
   word-break: break-word;
   padding: 0 0 16px;
+
+  &.scrollable {
+    width: calc(100% - 34px);
+  }
 }
diff --git a/src/components/modal/modalContent/modalContent.tsx b/src/components/modal/modalContent/modalContent.tsx
index aad59a4..f4feb30 100644
--- a/src/components/modal/modalContent/modalContent.tsx
+++ b/src/components/modal/modalContent/modalContent.tsx
@@ -5,9 +5,10 @@ import styles from './modalContent.module.scss';
 const cx = classNames.bind(styles);
 
 interface ModalContentProps {
+  scrollable?: boolean;
   children?: ReactNode;
 }
 
-export const ModalContent: FC<ModalContentProps> = ({ children }) => (
-  <div className={cx('modal-content')}>{children}</div>
+export const ModalContent: FC<ModalContentProps> = ({ scrollable = false, children }) => (
+  <div className={cx('modal-content', { scrollable: scrollable })}>{children}</div>
 );