add button type for Dropdown and custom props for Modal custom footer

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>

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
+- **createFooter**: _function_, optional, default = null
 
 ### Variants
 

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 {

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>
     );

src/components/modal/modal.tsx

@@ -34,7 +34,7 @@
   cancelButton?: ButtonProps;
   scrollable?: boolean;
   withoutFooter?: boolean;
-  CustomFooter?: FC<{ closeHandler: () => void }>;
+  createFooter?: (closeHandler: () => void) => ReactNode;
   description?: ReactNode;
 }
 
@@ -53,7 +53,7 @@
   allowCloseOutside = true,
   scrollable = false,
   withoutFooter = false,
-  CustomFooter = null,
+  createFooter = null,
   description = null,
 }) => {
   const [isShown, setShown] = useState(false);
@@ -104,7 +104,7 @@
     document.addEventListener('keydown', onKeydown, false);
 
     return () => document.removeEventListener('keydown', onKeydown, false);
   }, []);
 
   useOnClickOutside(modalRef, allowCloseOutside ? closeModal : undefined);
 
@@ -126,8 +126,12 @@
             <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>
             ) : (
               <>
@@ -136,8 +140,8 @@
               </>
             )}
             {!withoutFooter &&
-              (CustomFooter ? (
-                <CustomFooter closeHandler={closeModal} />
+              (createFooter ? (
+                createFooter(closeModal)
               ) : (
                 <ModalFooter
                   size={size}

src/components/modal/modalContent/modalContent.module.scss

@@ -2,12 +2,16 @@
 @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();
   color: var(--rp-ui-color-text);
   white-space: pre-line;
   word-break: break-word;
   padding: 0 0 16px;
+
+  &.scrollable {
+    width: calc(100% - 34px);
+  }
 }

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>
 );