diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx index 61b2a06..4449c16 100644 --- a/src/components/dropdown/dropdown.tsx +++ b/src/components/dropdown/dropdown.tsx @@ -212,6 +212,7 @@ export const Dropdown: FC = ({ onKeyDown: handleToggleButtonKeyDown, ref: refs.setReference, })} + type="button" > {icon && {icon}} {getDisplayedValue()} diff --git a/src/components/modal/README.md b/src/components/modal/README.md index b8ea51a..d0c06be 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 +- **createFooter**: _function_, optional, default = null ### Variants 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.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 = { @@ -47,7 +47,7 @@ export const WithSteps: Story = { const [step, setStep] = useState(1); const buttonStyle = { minWidth: 'fit-content' }; - const CustomFooter: FC<{ closeHandler: () => void }> = ({ closeHandler }) => { + const createFooter = (closeHandler: () => void) => { return (
+ content for step {step} ); diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx index 1f26f22..425cd01 100644 --- 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 = ({ 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 = ({ {scrollable ? ( - {description && {description}} - {children} + {description && ( + + {description} + + )} + {children} ) : ( <> @@ -136,8 +140,8 @@ export const Modal: FC = ({ )} {!withoutFooter && - (CustomFooter ? ( - + (createFooter ? ( + createFooter(closeModal) ) : ( = ({ children }) => ( -
{children}
+export const ModalContent: FC = ({ scrollable = false, children }) => ( +
{children}
);