fix: Button icons tooltips opening out of view due to padding issue (#11847)

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
pull/11686/head^2
Siddharth Movaliya 2023-10-13 16:47:12 +05:30 committed by GitHub
parent 0a4f7da2df
commit 61be5c9bc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 5 deletions

View File

@ -268,9 +268,11 @@ function EventTypeSingleLayout({
</Skeleton>
)}
<Tooltip
sideOffset={4}
content={
formMethods.watch("hidden") ? t("show_eventtype_on_profile") : t("hide_from_profile")
}>
}
side="bottom">
<div className="self-center rounded-md p-2">
<Switch
id="hiddenSwitch"
@ -291,7 +293,7 @@ function EventTypeSingleLayout({
{!isManagedEventType && (
<>
{/* We have to warp this in tooltip as it has a href which disabels the tooltip on buttons */}
<Tooltip content={t("preview")}>
<Tooltip content={t("preview")} side="bottom" sideOffset={4}>
<Button
color="secondary"
data-testid="preview-button"
@ -308,6 +310,8 @@ function EventTypeSingleLayout({
variant="icon"
StartIcon={LinkIcon}
tooltip={t("copy_link")}
tooltipSide="bottom"
tooltipOffset={4}
onClick={() => {
navigator.clipboard.writeText(permalink);
showToast("Link copied!", "success");
@ -319,6 +323,8 @@ function EventTypeSingleLayout({
color="secondary"
variant="icon"
tooltip={t("embed")}
tooltipSide="bottom"
tooltipOffset={4}
eventId={eventType.id}
/>
</>
@ -329,6 +335,8 @@ function EventTypeSingleLayout({
variant="icon"
StartIcon={Trash}
tooltip={t("delete")}
tooltipSide="bottom"
tooltipOffset={4}
disabled={!hasPermsToDelete}
onClick={() => setDeleteDialogOpen(true)}
/>

View File

@ -23,6 +23,8 @@ export type ButtonBaseProps = {
shallow?: boolean;
/**Tool tip used when icon size is set to small */
tooltip?: string;
tooltipSide?: "top" | "right" | "bottom" | "left";
tooltipOffset?: number;
disabled?: boolean;
flex?: boolean;
} & Omit<InferredVariantProps, "color"> & {
@ -123,6 +125,8 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
size,
variant = "button",
type = "button",
tooltipSide = "top",
tooltipOffset = 4,
StartIcon,
EndIcon,
shallow,
@ -213,19 +217,33 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
{element}
</Link>
) : (
<Wrapper data-testid="wrapper" tooltip={props.tooltip}>
<Wrapper
data-testid="wrapper"
tooltip={props.tooltip}
tooltipSide={tooltipSide}
tooltipOffset={tooltipOffset}>
{element}
</Wrapper>
);
});
const Wrapper = ({ children, tooltip }: { tooltip?: string; children: React.ReactNode }) => {
const Wrapper = ({
children,
tooltip,
tooltipSide,
tooltipOffset,
}: {
tooltip?: string;
children: React.ReactNode;
tooltipSide?: "top" | "right" | "bottom" | "left";
tooltipOffset?: number;
}) => {
if (!tooltip) {
return <>{children}</>;
}
return (
<Tooltip data-testid="tooltip" content={tooltip}>
<Tooltip data-testid="tooltip" content={tooltip} side={tooltipSide} sideOffset={tooltipOffset}>
{children}
</Tooltip>
);