fix: type error and border (#6520)

* fix: type error and border

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: sepeator

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

packages/app-store/ee/routing-forms/components/FormActions.tsx

@@ -447,7 +447,14 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
   }
   return (
     <DropdownMenuItem>
-      <Component ref={forwardedRef} {...actionProps}>
+      <Component
+        ref={forwardedRef}
+        {...actionProps}
+        className={classNames(
+          props.className,
+          "w-full transition-none",
+          props.color === "destructive" && "border-0"
+        )}>
         {children}
       </Component>
     </DropdownMenuItem>

packages/app-store/ee/routing-forms/components/SingleForm.tsx

@@ -185,6 +185,7 @@ const Actions = ({
               {t("Copy Typeform Redirect Url")}
             </FormAction>
           ) : null}
+          <DropdownMenuSeparator />
           <FormAction
             action="_delete"
             routingForm={form}

packages/ui/components/button/Button.tsx

@@ -10,6 +10,7 @@ import { Icon } from "@calcom/ui";
 
 type InferredVariantProps = VariantProps<typeof buttonClasses>;
 
+export type ButtonColor = NonNullable<InferredVariantProps["color"]>;
 export type ButtonBaseProps = {
   /** Action that happens when the button is clicked */
   onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
@@ -22,7 +23,7 @@ export type ButtonBaseProps = {
   tooltip?: string;
   flex?: boolean;
 } & Omit<InferredVariantProps, "color"> & {
-    color?: NonNullable<InferredVariantProps["color"]>;
+    color?: ButtonColor;
   };
 
 export type ButtonProps = ButtonBaseProps &

packages/ui/components/form/dropdown/Dropdown.tsx

@@ -5,7 +5,7 @@ import { ComponentProps, forwardRef } from "react";
 
 import { classNames } from "@calcom/lib";
 import { SVGComponent } from "@calcom/types/SVGComponent";
-import { ButtonProps } from "@calcom/ui";
+import { ButtonColor } from "@calcom/ui";
 
 export const Dropdown = DropdownMenuPrimitive.Root;
 
@@ -102,7 +102,7 @@ DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
 
 type DropdownItemProps = {
   children: React.ReactNode;
-  color?: ButtonProps["color"];
+  color?: ButtonColor;
   StartIcon?: SVGComponent;
   EndIcon?: SVGComponent;
   href?: string;

packages/ui/index.tsx

@@ -150,3 +150,4 @@ export {
 export { default as MultiSelectCheckboxes } from "./components/form/checkbox/MultiSelectCheckboxes";
 export type { Option as MultiSelectCheckboxesOptionType } from "./components/form/checkbox/MultiSelectCheckboxes";
 export { default as ImageUploader } from "./components/image-uploader/ImageUploader";
+export type { ButtonColor } from "./components/button/Button";