Skip to content
This repository has been archived by the owner on Aug 21, 2024. It is now read-only.

Support ReactNode in ModalHeader #10391

Merged
merged 2 commits into from
Jun 17, 2024
Merged

Support ReactNode in ModalHeader #10391

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
610791b
Support ReactNode in ModalHeader
CITIZENDOT Jun 14, 2024
b1486f1
Merge branch 'dev' into IR-2672-ui-fixes
CITIZENDOT Jun 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions packages/ui/src/primitives/tailwind/Modal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ export interface ModalProps {
title?: string
hideFooter?: boolean
className?: string
children: ReactNode
rawChildren?: ReactNode
children?: ReactNode
submitLoading?: boolean
showCloseButton?: boolean
closeButtonDisabled?: boolean
Expand Down Expand Up @@ -92,7 +93,11 @@ export const ModalFooter = ({
return (
<div className="grid grid-flow-col border-t border-t-theme-primary px-6 py-5">
{showCloseButton && (
<Button variant="outline" disabled={closeButtonDisabled} onClick={() => onCancel && onCancel(false)}>
<Button
className="bg-[#162546] font-['Figtree']"
disabled={closeButtonDisabled}
onClick={() => onCancel && onCancel(false)}
>
{closeButtonText || t('common:components.cancel')}
</Button>
)}
Expand All @@ -101,7 +106,7 @@ export const ModalFooter = ({
endIcon={submitLoading ? <LoadingView spinnerOnly className="h-6 w-6" /> : undefined}
disabled={submitButtonDisabled || submitLoading}
onClick={onSubmit}
className="place-self-end"
className="place-self-end font-['Figtree']"
>
{submitButtonText || t('common:components.confirm')}
</Button>
Expand All @@ -115,6 +120,7 @@ const Modal = ({
onClose,
onSubmit,
hideFooter,
rawChildren,
children,
className,
submitLoading,
Expand All @@ -129,7 +135,9 @@ const Modal = ({
<div className={twClassName}>
<div className="relative rounded-lg bg-theme-surface-main shadow">
{onClose && <ModalHeader title={title} onClose={onClose} />}
<div className="h-fit max-h-[60vh] w-full overflow-y-auto px-10 py-6">{children}</div>
{rawChildren && rawChildren}
{children && <div className="h-fit max-h-[60vh] w-full overflow-y-auto px-10 py-6">{children}</div>}

{!hideFooter && (
<ModalFooter
closeButtonText={closeButtonText}
Expand Down
Loading