commonscomputer/cal.diy
5
0 Fork 0
Code Issues Pull Requests Actions 2.3k Packages Projects Releases Wiki Activity

fix: footer in modals (#8940)

Browse Source 
* [CAL-1543] Fix the footer in modals

* change request

* update style

* fix modal height

* Lint fix

* Fix the footer in modals

---------

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: alannnc <alannnc@gmail.com>
Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
Co-authored-by: Bailey Pumfleet <bailey@pumfleet.co.uk>
This commit is contained in:
GitStart-Cal.comgitstart-calcomPeer RichelsenalannncCarina WollendorferAlex van AndelKeith WilliamsBailey Pumfleet
 authored and GitHub committed 2023-05-30 15:44:24 +00:00
1 parent 93c4211da4
commit f72296c323
2 files changed
+23 -15
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/features/form-builder/FormBuilder.tsx
+13 -9
View File
@@ -425,10 +425,14 @@ export const FormBuilder = function FormBuilder({
fieldIndex: -1,
})
}>
<DialogContent enableOverflow data-testid="edit-field-dialog">
<DialogHeader title={t("add_a_booking_question")} subtitle={t("form_builder_field_add_subtitle")} />
<div>
<DialogContent className="max-h-none p-0" data-testid="edit-field-dialog">
<div className="h-auto max-h-[85vh] overflow-auto px-8 pt-8 pb-7">
<DialogHeader
title={t("add_a_booking_question")}
subtitle={t("form_builder_field_add_subtitle")}
/>
<Form
id="form-builder"
form={fieldForm}
handleSubmit={(data) => {
const type = data.type || "text";
@@ -540,14 +544,14 @@ export const FormBuilder = function FormBuilder({
);
}}
/>
<DialogFooter>
<DialogClose color="secondary">{t("cancel")}</DialogClose>
<Button data-testid="field-add-save" type="submit">
{isFieldEditMode ? t("save") : t("add")}
</Button>
</DialogFooter>
</Form>
</div>
<DialogFooter className="relative rounded px-8 pb-6" showDivider>
<DialogClose color="secondary">{t("cancel")}</DialogClose>
<Button data-testid="field-add-save" type="submit" form="form-builder">
{isFieldEditMode ? t("save") : t("add")}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
packages/ui/components/dialog/Dialog.tsx
+10 -6
View File
@@ -1,6 +1,6 @@
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { useRouter } from "next/router";
import type { PropsWithChildren, ReactNode } from "react";
import type { ReactNode } from "react";
import React, { useState } from "react";
import classNames from "@calcom/lib/classNames";
@@ -93,7 +93,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
{type === "creation" && (
<div>
<DialogHeader title={title} subtitle={props.description} />
<div className="flex flex-col space-y-6">{children}</div>
<div className="flex flex-col">{children}</div>
</div>
)}
{type === "confirmation" && (
@@ -105,7 +105,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
)}
<div className="w-full">
<DialogHeader title={title} subtitle={props.description} />
<div className="flex flex-col space-y-6">{children}</div>
<div className="flex space-y-6">{children}</div>
</div>
</div>
)}
@@ -134,10 +134,14 @@ export function DialogHeader(props: DialogHeaderProps) {
);
}
// TODO: add divider
export function DialogFooter(props: PropsWithChildren<{ showDivider?: boolean }>) {
export function DialogFooter(props: { children: ReactNode; className?: string; showDivider?: boolean }) {
return (
<div className={classNames("mt-7 flex justify-end space-x-2 rtl:space-x-reverse")}>{props.children}</div>
<div className={classNames("bg-default", props.className)}>
{props.showDivider && <hr className="border-subtle absolute right-0 w-full" />}
<div className={classNames("bg-default mt-6 flex justify-end space-x-2 rtl:space-x-reverse")}>
{props.children}
</div>
</div>
);
}