added new combined buttons on all pages (#4328)
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
This commit is contained in:
Peer Richelsen
co-authored by
sean-brydon
sean-brydon
parent
b0de653166
commit
83f0ba7ba4
@@ -53,6 +53,7 @@ export function ScheduleListItem({
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger className="group mr-5 h-10 w-10 border border-transparent p-0 text-neutral-500 hover:border-gray-200">
|
||||
<Icon.FiMoreHorizontal className="h-5 w-5 group-hover:text-gray-800" />
|
||||
|
||||
@@ -10,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { inferQueryOutput, trpc } from "@calcom/trpc/react";
|
||||
import { Icon } from "@calcom/ui";
|
||||
import { Alert } from "@calcom/ui/Alert";
|
||||
import { Dialog, EmptyScreen, Badge, Button, Tooltip, Switch, showToast } from "@calcom/ui/v2";
|
||||
import { Dialog, EmptyScreen, Badge, Button, Tooltip, Switch, showToast, ButtonGroup } from "@calcom/ui/v2";
|
||||
import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
|
||||
import Dropdown, {
|
||||
DropdownItem,
|
||||
@@ -222,7 +222,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||
)}>
|
||||
<div
|
||||
className={classNames(
|
||||
"group flex w-full items-center justify-between px-4 py-4 pr-0 hover:bg-neutral-50 sm:px-6",
|
||||
"group flex w-full items-center justify-between px-4 py-4 pr-0 sm:px-6",
|
||||
type.$disabled && "hover:bg-white"
|
||||
)}>
|
||||
{types.length > 1 && !type.$disabled && (
|
||||
@@ -267,7 +267,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||
</Badge>
|
||||
)}
|
||||
<Tooltip content={t("show_eventtype_on_profile") as string}>
|
||||
<div className="self-center pr-2">
|
||||
<div className="self-center rounded-md p-2 hover:bg-gray-200">
|
||||
<Switch
|
||||
name="Hidden"
|
||||
checked={!type.hidden}
|
||||
@@ -278,92 +278,95 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<VerticalDivider className="mt-2.5" />
|
||||
|
||||
<Tooltip content={t("preview") as string}>
|
||||
<Button
|
||||
color="minimalSecondary"
|
||||
target="_blank"
|
||||
size="icon"
|
||||
href={calLink}
|
||||
StartIcon={Icon.FiExternalLink}
|
||||
disabled={type.$disabled}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content={t("copy_link") as string}>
|
||||
<Button
|
||||
color="minimalSecondary"
|
||||
size="icon"
|
||||
StartIcon={Icon.FiLink}
|
||||
disabled={type.$disabled}
|
||||
onClick={() => {
|
||||
showToast(t("link_copied"), "success");
|
||||
navigator.clipboard.writeText(calLink);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
color="minimalSecondary"
|
||||
StartIcon={Icon.FiMoreHorizontal}
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem
|
||||
type="button"
|
||||
href={"/event-types/" + type.id}
|
||||
<ButtonGroup combined>
|
||||
<Tooltip content={t("preview") as string}>
|
||||
<Button
|
||||
color="secondary"
|
||||
target="_blank"
|
||||
size="icon"
|
||||
href={calLink}
|
||||
StartIcon={Icon.FiExternalLink}
|
||||
disabled={type.$disabled}
|
||||
StartIcon={Icon.FiEdit2}>
|
||||
{t("edit") as string}
|
||||
</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<DropdownItem
|
||||
type="button"
|
||||
data-testid={"event-type-duplicate-" + type.id}
|
||||
combined
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content={t("copy_link") as string}>
|
||||
<Button
|
||||
color="secondary"
|
||||
size="icon"
|
||||
StartIcon={Icon.FiLink}
|
||||
disabled={type.$disabled}
|
||||
StartIcon={Icon.FiCopy}
|
||||
onClick={() => openModal(group, type)}>
|
||||
{t("duplicate") as string}
|
||||
</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<EmbedButton
|
||||
as={DropdownItem}
|
||||
type="button"
|
||||
StartIcon={Icon.FiCode}
|
||||
className={classNames(
|
||||
"w-full rounded-none",
|
||||
type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
|
||||
onClick={() => {
|
||||
showToast(t("link_copied"), "success");
|
||||
navigator.clipboard.writeText(calLink);
|
||||
}}
|
||||
combined
|
||||
/>
|
||||
</Tooltip>
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
color="secondary"
|
||||
combined
|
||||
StartIcon={Icon.FiMoreHorizontal}
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem
|
||||
type="button"
|
||||
href={"/event-types/" + type.id}
|
||||
disabled={type.$disabled}
|
||||
StartIcon={Icon.FiEdit2}>
|
||||
{t("edit") as string}
|
||||
</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<DropdownItem
|
||||
type="button"
|
||||
data-testid={"event-type-duplicate-" + type.id}
|
||||
disabled={type.$disabled}
|
||||
StartIcon={Icon.FiCopy}
|
||||
onClick={() => openModal(group, type)}>
|
||||
{t("duplicate") as string}
|
||||
</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<EmbedButton
|
||||
as={DropdownItem}
|
||||
type="button"
|
||||
StartIcon={Icon.FiCode}
|
||||
className={classNames(
|
||||
"w-full rounded-none",
|
||||
type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
|
||||
)}
|
||||
embedUrl={encodeURIComponent(embedLink)}>
|
||||
{t("embed")}
|
||||
</EmbedButton>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator className="h-px bg-gray-200" />
|
||||
{/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
|
||||
{(group.metadata?.readOnly === false || group.metadata.readOnly === null) && (
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem
|
||||
onClick={() => {
|
||||
setDeleteDialogOpen(true);
|
||||
setDeleteDialogTypeId(type.id);
|
||||
}}
|
||||
StartIcon={Icon.FiTrash}
|
||||
disabled={type.$disabled}
|
||||
className="w-full rounded-none">
|
||||
{t("delete") as string}
|
||||
</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
embedUrl={encodeURIComponent(embedLink)}>
|
||||
{t("embed")}
|
||||
</EmbedButton>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator className="h-px bg-gray-200" />
|
||||
{/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
|
||||
{(group.metadata?.readOnly === false || group.metadata.readOnly === null) && (
|
||||
<DropdownMenuItem>
|
||||
<DropdownItem
|
||||
onClick={() => {
|
||||
setDeleteDialogOpen(true);
|
||||
setDeleteDialogTypeId(type.id);
|
||||
}}
|
||||
StartIcon={Icon.FiTrash}
|
||||
disabled={type.$disabled}
|
||||
className="w-full rounded-none">
|
||||
{t("delete") as string}
|
||||
</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -373,7 +376,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
color="minimal"
|
||||
color="secondary"
|
||||
className={classNames(type.$disabled && " opacity-30")}
|
||||
StartIcon={Icon.FiMoreHorizontal}
|
||||
/>
|
||||
|
||||
@@ -1181,5 +1181,6 @@
|
||||
"connect_calendar_later": "I'll connect my calendar later",
|
||||
"set_my_availability_later": "I'll set my availability later",
|
||||
"problem_saving_user_profile": "There was a problem saving your data. Please try again or reach out to customer support.",
|
||||
"token_invalid_expired": "Token is either invalid or expired."
|
||||
"token_invalid_expired": "Token is either invalid or expired.",
|
||||
"routing_forms_description": "You can see all forms and routes you have created here."
|
||||
}
|
||||
|
||||
@@ -136,7 +136,8 @@ export const FormActionsDropdown = ({ form, children }: { form: RoutingForm; chi
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
color="minimal"
|
||||
color="secondary"
|
||||
combined
|
||||
className={classNames(disabled && " opacity-30")}
|
||||
StartIcon={Icon.FiMoreHorizontal}
|
||||
/>
|
||||
@@ -344,7 +345,7 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
|
||||
return <></>;
|
||||
}
|
||||
return (
|
||||
<div {...restProps}>
|
||||
<div {...restProps} className="mx-2 self-center rounded-md p-2 hover:bg-gray-200">
|
||||
<Switch
|
||||
checked={!routingForm.disabled}
|
||||
label={label}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { AppGetServerSidePropsContext, AppPrisma, AppUser } from "@calcom/types/AppGetServerSideProps";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { DropdownMenuSeparator, Tooltip } from "@calcom/ui/v2";
|
||||
import { ButtonGroup, DropdownMenuSeparator, Tooltip } from "@calcom/ui/v2";
|
||||
import { EmptyScreen } from "@calcom/ui/v2";
|
||||
import { Badge } from "@calcom/ui/v2";
|
||||
import { List, ListLinkItem } from "@calcom/ui/v2/core/List";
|
||||
@@ -27,10 +27,7 @@ export default function RoutingForms({
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ShellMain
|
||||
heading="Routing Forms"
|
||||
CTA={<NewFormButton />}
|
||||
subtitle="You can see all routing forms and create one here.">
|
||||
<ShellMain heading="Routing Forms" CTA={<NewFormButton />} subtitle={t("routing_forms_description")}>
|
||||
<FormActionsProvider appUrl={appUrl}>
|
||||
<div className="-mx-4 md:-mx-8">
|
||||
<div className="mb-10 w-full px-4 pb-2 sm:px-6 md:px-8">
|
||||
@@ -63,74 +60,72 @@ export default function RoutingForms({
|
||||
subHeading={description}
|
||||
actions={
|
||||
<>
|
||||
<FormAction
|
||||
className="self-center border-r-2 border-gray-300 pr-5 "
|
||||
action="toggle"
|
||||
routingForm={form}
|
||||
/>
|
||||
<Tooltip content={t("preview")}>
|
||||
<FormAction className="self-center" action="toggle" routingForm={form} />
|
||||
<ButtonGroup combined>
|
||||
<Tooltip content={t("preview")}>
|
||||
<FormAction
|
||||
action="preview"
|
||||
routingForm={form}
|
||||
target="_blank"
|
||||
StartIcon={Icon.FiExternalLink}
|
||||
color="secondary"
|
||||
combined
|
||||
size="icon"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</Tooltip>
|
||||
<FormAction
|
||||
action="preview"
|
||||
className="ml-3"
|
||||
routingForm={form}
|
||||
target="_blank"
|
||||
StartIcon={Icon.FiExternalLink}
|
||||
color="minimal"
|
||||
action="copyLink"
|
||||
color="secondary"
|
||||
combined
|
||||
size="icon"
|
||||
StartIcon={Icon.FiLink}
|
||||
disabled={disabled}
|
||||
tooltip={t("copy_link")}
|
||||
/>
|
||||
</Tooltip>
|
||||
<FormAction
|
||||
routingForm={form}
|
||||
action="copyLink"
|
||||
color="minimal"
|
||||
size="icon"
|
||||
StartIcon={Icon.FiLink}
|
||||
disabled={disabled}
|
||||
tooltip={t("copy_link")}
|
||||
/>
|
||||
|
||||
<FormActionsDropdown form={form}>
|
||||
<FormAction
|
||||
action="edit"
|
||||
routingForm={form}
|
||||
color="minimal"
|
||||
StartIcon={Icon.FiEdit}>
|
||||
{t("edit")}
|
||||
</FormAction>
|
||||
<FormAction
|
||||
action="download"
|
||||
routingForm={form}
|
||||
color="minimal"
|
||||
StartIcon={Icon.FiDownload}>
|
||||
{t("download_responses")}
|
||||
</FormAction>
|
||||
<FormAction
|
||||
action="embed"
|
||||
routingForm={form}
|
||||
color="minimal"
|
||||
className="w-full"
|
||||
StartIcon={Icon.FiCode}>
|
||||
{t("embed")}
|
||||
</FormAction>
|
||||
<FormAction
|
||||
action="duplicate"
|
||||
routingForm={form}
|
||||
color="minimal"
|
||||
className="w-full"
|
||||
StartIcon={Icon.FiCopy}>
|
||||
{t("duplicate")}
|
||||
</FormAction>
|
||||
<DropdownMenuSeparator className="h-px bg-gray-200" />
|
||||
<FormAction
|
||||
action="_delete"
|
||||
routingForm={form}
|
||||
color="destructive"
|
||||
className="w-full"
|
||||
StartIcon={Icon.FiTrash}>
|
||||
{t("delete")}
|
||||
</FormAction>
|
||||
</FormActionsDropdown>
|
||||
<FormActionsDropdown form={form}>
|
||||
<FormAction
|
||||
action="edit"
|
||||
routingForm={form}
|
||||
color="minimal"
|
||||
StartIcon={Icon.FiEdit}>
|
||||
{t("edit")}
|
||||
</FormAction>
|
||||
<FormAction
|
||||
action="download"
|
||||
routingForm={form}
|
||||
color="minimal"
|
||||
StartIcon={Icon.FiDownload}>
|
||||
{t("download_responses")}
|
||||
</FormAction>
|
||||
<FormAction
|
||||
action="embed"
|
||||
routingForm={form}
|
||||
color="minimal"
|
||||
className="w-full"
|
||||
StartIcon={Icon.FiCode}>
|
||||
{t("embed")}
|
||||
</FormAction>
|
||||
<FormAction
|
||||
action="duplicate"
|
||||
routingForm={form}
|
||||
color="minimal"
|
||||
className="w-full"
|
||||
StartIcon={Icon.FiCopy}>
|
||||
{t("duplicate")}
|
||||
</FormAction>
|
||||
<DropdownMenuSeparator className="h-px bg-gray-200" />
|
||||
<FormAction
|
||||
action="_delete"
|
||||
routingForm={form}
|
||||
color="destructive"
|
||||
className="w-full"
|
||||
StartIcon={Icon.FiTrash}>
|
||||
{t("delete")}
|
||||
</FormAction>
|
||||
</FormActionsDropdown>
|
||||
</ButtonGroup>
|
||||
</>
|
||||
}>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
|
||||
@@ -11,7 +11,7 @@ import { trpc } from "@calcom/trpc/react";
|
||||
import { Tooltip } from "@calcom/ui";
|
||||
import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Button } from "@calcom/ui/v2";
|
||||
import { Button, ButtonGroup } from "@calcom/ui/v2";
|
||||
|
||||
import { getActionIcon } from "../../lib/getActionIcon";
|
||||
import { DeleteDialog } from "./DeleteDialog";
|
||||
@@ -134,47 +134,26 @@ export default function WorkflowListPage({ workflows }: Props) {
|
||||
</a>
|
||||
</Link>
|
||||
<div className="flex flex-shrink-0">
|
||||
<div className="flex justify-between space-x-2 rtl:space-x-reverse">
|
||||
<ButtonGroup combined>
|
||||
<Button
|
||||
type="button"
|
||||
color="secondary"
|
||||
className="hidden sm:block"
|
||||
onClick={async () => await router.replace("/workflows/" + workflow.id)}>
|
||||
{t("edit")}
|
||||
</Button>
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
color="secondary"
|
||||
size="icon"
|
||||
StartIcon={Icon.FiMoreHorizontal}
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem className="block text-sm sm:hidden">
|
||||
<Button
|
||||
type="button"
|
||||
color="minimal"
|
||||
onClick={async () => await router.replace("/workflows/" + workflow.id)}
|
||||
StartIcon={Icon.FiEdit}>
|
||||
{t("edit")}
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setDeleteDialogOpen(true);
|
||||
setwWorkflowToDeleteId(workflow.id);
|
||||
}}
|
||||
color="destructive"
|
||||
StartIcon={Icon.FiTrash2}>
|
||||
{t("delete")}
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</Dropdown>
|
||||
</div>
|
||||
size="icon"
|
||||
combined
|
||||
StartIcon={Icon.FiEdit2}
|
||||
onClick={async () => await router.replace("/workflows/" + workflow.id)}
|
||||
/>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setDeleteDialogOpen(true);
|
||||
setwWorkflowToDeleteId(workflow.id);
|
||||
}}
|
||||
color="secondary"
|
||||
combined
|
||||
size="icon"
|
||||
StartIcon={Icon.FiTrash2}
|
||||
/>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -38,17 +38,18 @@ const Schedule = () => {
|
||||
return (
|
||||
<div className="mb-1 flex w-full flex-col py-1 sm:flex-row" key={weekday}>
|
||||
{/* Label & switch container */}
|
||||
<div className="flex justify-between">
|
||||
<div className="flex h-11 items-center justify-between">
|
||||
<div>
|
||||
<label className="flex flex-row items-center">
|
||||
<Switch
|
||||
defaultChecked={initialValue["schedule"][num].length > 0}
|
||||
checked={!!initialValue["schedule"][num].length}
|
||||
onCheckedChange={(isChecked) => {
|
||||
form.setValue(name, isChecked ? [DEFAULT_DAY_RANGE] : []);
|
||||
}}
|
||||
className="relative mx-2 my-[6px] h-6 w-10 rounded-full bg-gray-200"
|
||||
/>
|
||||
<label className="flex flex-row items-center space-x-2">
|
||||
<div>
|
||||
<Switch
|
||||
defaultChecked={initialValue["schedule"][num].length > 0}
|
||||
checked={!!initialValue["schedule"][num].length}
|
||||
onCheckedChange={(isChecked) => {
|
||||
form.setValue(name, isChecked ? [DEFAULT_DAY_RANGE] : []);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="inline-block min-w-[88px] text-sm capitalize">{weekday}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -62,7 +62,7 @@ export function ScheduleListItem({
|
||||
</div>
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild className="mr-5">
|
||||
<Button type="button" size="icon" color="minimalSecondary" StartIcon={Icon.FiMoreHorizontal} />
|
||||
<Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
|
||||
@@ -89,7 +89,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
|
||||
// different styles depending on size
|
||||
size === "base" && "h-9 px-4 py-2.5 ",
|
||||
size === "lg" && "h-[36px] px-4 py-2.5 ",
|
||||
size === "icon" && "flex justify-center h-[36px] w-[36px] ",
|
||||
size === "icon" && "flex justify-center min-h-[36px] min-w-[36px] ",
|
||||
combined ? "" : "rounded-md",
|
||||
// different styles depending on color
|
||||
// set not-allowed cursor if disabled
|
||||
|
||||
@@ -21,7 +21,7 @@ const Switch = (
|
||||
<PrimitiveSwitch.Root
|
||||
className={classNames(
|
||||
props.checked ? "bg-gray-900" : "bg-gray-200 hover:bg-gray-300",
|
||||
"focus:ring-brand-800 h-6 w-10 rounded-full shadow-none",
|
||||
"focus:ring-brand-800 h-5 w-[34px] rounded-full shadow-none",
|
||||
props.className
|
||||
)}
|
||||
{...primitiveProps}>
|
||||
@@ -30,9 +30,9 @@ const Switch = (
|
||||
// Since we dont support global dark mode - we have to style dark mode components specifically on the instance for now
|
||||
// TODO: Remove once we support global dark mode
|
||||
className={classNames(
|
||||
"block h-[18px] w-[18px] rounded-full bg-white",
|
||||
"translate-x-[4px] transition delay-100 will-change-transform",
|
||||
"[&[data-state='checked']]:translate-x-[18px]",
|
||||
"block h-[14px] w-[14px] rounded-full bg-white",
|
||||
"translate-x-[4px] transition will-change-transform",
|
||||
"[&[data-state='checked']]:translate-x-[17px]",
|
||||
props.checked && "shadow-inner",
|
||||
props.thumbProps?.className
|
||||
)}
|
||||
|
||||
@@ -28,7 +28,7 @@ export function Tooltip({
|
||||
<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
|
||||
<TooltipPrimitive.Content
|
||||
className={classNames(
|
||||
side === "top" && "-mt-7 -ml-4",
|
||||
side === "top" && "-mt-7",
|
||||
side === "right" && "ml-2",
|
||||
"relative z-40 rounded-md bg-gray-900 px-2 py-1 text-xs font-semibold text-white shadow-lg"
|
||||
)}
|
||||
|
||||
@@ -37,7 +37,7 @@ export const BooleanToggleGroup = function BooleanToggleGroup({
|
||||
<ToggleGroupPrimitive
|
||||
value={yesNoValue}
|
||||
type="single"
|
||||
className="rounded-sm"
|
||||
className="space-x-2 rounded-sm"
|
||||
onValueChange={(yesNoValue: "yes" | "no") => {
|
||||
setYesNoValue(yesNoValue);
|
||||
onValueChange(boolean(yesNoValue));
|
||||
@@ -73,7 +73,7 @@ export const BooleanToggleGroupField = function BooleanToggleGroupField(
|
||||
<div className={classNames(containerClassName)}>
|
||||
<div className={className}>
|
||||
{!!label && (
|
||||
<Label htmlFor={id} {...labelProps} className={classNames(props.error && "text-red-900")}>
|
||||
<Label htmlFor={id} {...labelProps} className={classNames(props.error && "text-red-900", "mt-4")}>
|
||||
{label}
|
||||
</Label>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user