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

refactor: use Button component instead of plain button in CopyButton (#25489)

Browse Source 
* refactor: use Button component instead of plain button in CopyButton

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* add shrink-0 to StartIcon and EndIcon of Button

* remove unused class names

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Eunjae Lee
2025-12-01 13:13:01 +00:00
committed by GitHub
co-authored by Devin AI
parent 0103321b71
commit 41ad0f718d
2 changed files with 15 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/insights/hooks/useInsightsColumns.tsx
+9 -18
View File
@@ -1,5 +1,4 @@
import { createColumnHelper } from "@tanstack/react-table";
// eslint-disable-next-line no-restricted-imports
import startCase from "lodash/startCase";
import { useMemo } from "react";
import { z } from "zod";
@@ -11,7 +10,7 @@ import { useCopy } from "@calcom/lib/hooks/useCopy";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RoutingFormFieldType } from "@calcom/routing-forms/lib/FieldTypes";
import { Badge } from "@calcom/ui/components/badge";
import { Icon } from "@calcom/ui/components/icon";
import { Button } from "@calcom/ui/components/button";
import { BookedByCell } from "../components/BookedByCell";
import { BookingAtCell } from "../components/BookingAtCell";
@@ -349,24 +348,16 @@ function CopyButton({ label, value }: { label: string; value: string }) {
const { copyToClipboard, isCopied } = useCopy();
const { t } = useLocale();
return (
<button
className="flex w-full items-center gap-1 overflow-hidden"
title={value}
<Button
color="minimal"
size="sm"
className="overflow-hidden"
tooltip={value}
EndIcon={isCopied ? "check" : "clipboard"}
onClick={() => {
copyToClipboard(value);
}}>
{!isCopied && (
<>
<span className="truncate">{label}</span>
<Icon name="clipboard" className="shrink-0" size={14} />
</>
)}
{isCopied && (
<>
<span className="grow truncate text-left">{t("copied")}</span>
<Icon name="check" className="shrink-0" size={14} />
</>
)}
</button>
<span className="truncate">{isCopied ? t("copied") : label}</span>
</Button>
);
}
packages/ui/components/button/Button.tsx
+6 -4
View File
@@ -264,14 +264,15 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
<>
{variant === "fab" ? (
<>
<Icon name={StartIcon} className="hidden h-4 w-4 stroke-[1.5px] md:inline-flex" />
<Icon name="plus" data-testid="plus" className="inline h-6 w-6 md:hidden" />
<Icon name={StartIcon} className="hidden h-4 w-4 shrink-0 stroke-[1.5px] md:inline-flex" />
<Icon name="plus" data-testid="plus" className="inline h-6 w-6 shrink-0 md:hidden" />
</>
) : (
<Icon
data-name="start-icon"
name={StartIcon}
className={classNames(
"shrink-0",
loading ? "invisible" : "visible",
"button-icon group-[:not(div):active]:translate-y-[0.5px]",
variant === "icon" && "h-4 w-4",
@@ -313,13 +314,14 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
<>
{variant === "fab" ? (
<>
<Icon name={EndIcon} className="-mr-1 me-2 ms-2 hidden h-5 w-5 md:inline" />
<Icon name="plus" data-testid="plus" className="inline h-6 w-6 md:hidden" />
<Icon name={EndIcon} className="-mr-1 me-2 ms-2 hidden h-5 w-5 shrink-0 md:inline" />
<Icon name="plus" data-testid="plus" className="inline h-6 w-6 shrink-0 md:hidden" />
</>
) : (
<Icon
name={EndIcon}
className={classNames(
"shrink-0",
loading ? "invisible" : "visible",
"group-[:not(div):active]:translate-y-[0.5px]",
variant === "icon" && "h-4 w-4",