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

…#34)
reportportal · Aug 16, 2024 · 933bc29 · 933bc29
1 parent 20a1bbd
commit 933bc29
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 12 deletions.
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
@@ -212,6 +212,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
@@ -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
 

diff --git 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.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>
     );

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
@@ -34,7 +34,7 @@ interface ModalProps {
   cancelButton?: ButtonProps;
   scrollable?: boolean;
   withoutFooter?: boolean;
-  CustomFooter?: FC<{ closeHandler: () => void }>;
+  createFooter?: (closeHandler: () => void) => ReactNode;
   description?: ReactNode;
 }
 
@@ -53,7 +53,7 @@ export const Modal: FC<ModalProps> = ({
   allowCloseOutside = true,
   scrollable = false,
   withoutFooter = false,
-  CustomFooter = null,
+  createFooter = null,
   description = null,
 }) => {
   const [isShown, setShown] = useState(false);
@@ -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>
             ) : (
               <>
@@ -136,8 +140,8 @@ export const Modal: FC<ModalProps> = ({
               </>
             )}
             {!withoutFooter &&
-              (CustomFooter ? (
-                <CustomFooter closeHandler={closeModal} />
+              (createFooter ? (
+                createFooter(closeModal)
               ) : (
                 <ModalFooter
                   size={size}

diff --git a/src/components/modal/modalContent/modalContent.module.scss b/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);
+  }
 }
diff --git 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>
 );