chore: Button Component Tidy up (#9888)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

packages/ui/components/button/Button.tsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 import React, { forwardRef } from "react";
 
 import classNames from "@calcom/lib/classNames";
-import { applyStyleToMultipleVariants } from "@calcom/lib/cva";
 import type { SVGComponent } from "@calcom/types/SVGComponent";
 
 import { Plus } from "../icon";
@@ -24,6 +23,7 @@ export type ButtonBaseProps = {
   shallow?: boolean;
   /**Tool tip used when icon size is set to small */
   tooltip?: string;
+  disabled?: boolean;
   flex?: boolean;
 } & Omit<InferredVariantProps, "color"> & {
     color?: ButtonColor;
@@ -36,7 +36,7 @@ export type ButtonProps = ButtonBaseProps &
   );
 
 const buttonClasses = cva(
-  "inline-flex items-center text-sm font-medium relative rounded-md transition-colors",
+  "inline-flex items-center text-sm font-medium relative rounded-md transition-colors disabled:cursor-not-allowed ",
   {
     variants: {
       variant: {
@@ -45,10 +45,14 @@ const buttonClasses = cva(
         fab: "rounded-full justify-center md:rounded-md radix-state-open:rotate-45 md:radix-state-open:rotate-0 transition-transform radix-state-open:shadown-none radix-state-open:ring-0 !shadow-none",
       },
       color: {
-        primary: "",
+        primary:
-        secondary: "text-emphasis",
+          "bg-brand-default hover:bg-brand-emphasis focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-brand-default text-brand disabled:bg-brand-subtle disabled:text-brand-subtle disabled:opacity-40 disabled:hover:bg-brand-subtle disabled:hover:text-brand-default disabled:hover:opacity-40",
-        minimal: "text-emphasis",
+        secondary:
-        destructive: "",
+          "text-emphasis border border-default  bg-default hover:bg-muted hover:border-emphasis focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis disabled:border-subtle disabled:bg-opacity-30 disabled:text-muted disabled:hover:bg-opacity-30 disabled:hover:text-muted disabled:hover:border-subtle disabled:hover:bg-default",
+        minimal:
+          "text-emphasis hover:bg-subtle focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis disabled:border-subtle disabled:bg-opacity-30 disabled:text-muted disabled:hover:bg-transparent disabled:hover:text-muted disabled:hover:border-subtle",
+        destructive:
+          "border border-default text-emphasis hover:text-red-700 focus-visible:text-red-700  hover:border-red-100 focus-visible:border-red-100 hover:bg-error  focus-visible:bg-error focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-red-700 disabled:bg-red-100 disabled:border-red-200 disabled:text-red-700 disabled:hover:border-red-200 disabled:opacity-40",
       },
       size: {
         sm: "px-3 py-2 leading-4 rounded-sm" /** For backwards compatibility */,
@@ -58,62 +62,26 @@ const buttonClasses = cva(
       loading: {
         true: "cursor-wait",
       },
-      disabled: {
-        true: "cursor-not-allowed",
-      },
     },
     compoundVariants: [
       // Primary variants
-      ...applyStyleToMultipleVariants({
-        disabled: [undefined, false],
-        color: "primary",
-        className:
-          "bg-brand-default hover:bg-brand-emphasis focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-brand-default text-brand",
-      }),
-      {
-        disabled: true,
-        color: "primary",
-        className: "bg-brand-subtle text-brand-subtle opacity-40",
-      },
       {
         loading: true,
         color: "primary",
         className: "bg-brand-subtle text-brand-subtle",
       },
       // Secondary variants
-      {
-        disabled: true,
-        color: "secondary",
-        className: "border border-subtle bg-opacity-30 text-muted ",
-      },
       {
         loading: true,
         color: "secondary",
         className: "bg-subtle text-emphasis/80",
       },
-      ...applyStyleToMultipleVariants({
-        disabled: [undefined, false],
-        color: "secondary",
-        className:
-          "border border-default  bg-default hover:bg-muted hover:border-emphasis focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis ",
-      }),
       // Minimal variants
-      {
-        disabled: true,
-        color: "minimal",
-        className: "border-subtle bg-opacity-30 text-emphasis/30 ",
-      },
       {
         loading: true,
         color: "minimal",
         className: "bg-subtle text-emphasis/30",
       },
-      ...applyStyleToMultipleVariants({
-        disabled: [undefined, false],
-        color: "minimal",
-        className:
-          "hover:bg-subtle focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis",
-      }),
       // Destructive variants
       {
         loading: true,
@@ -121,13 +89,6 @@ const buttonClasses = cva(
         className:
           "text-red-700/30 dark:text-red-700/30 hover:text-red-700/30  border border-default text-emphasis",
       },
-      ...applyStyleToMultipleVariants({
-        disabled: [false, true, undefined],
-        color: "destructive",
-        className:
-          "border border-default text-emphasis hover:text-red-700 focus-visible:text-red-700  hover:border-red-100 focus-visible:border-red-100 hover:bg-error  focus-visible:bg-error focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-red-700",
-      }),
-      // https://github.com/joe-bell/cva/issues/95 created an issue about using !p-2 on the icon variants as i would expect this to take priority
       {
         variant: "icon",
         size: "base",
@@ -180,10 +141,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
       disabled,
       type: !isLink ? type : undefined,
       ref: forwardedRef,
-      className: classNames(
+      className: classNames(buttonClasses({ color, size, loading, variant }), props.className),
-        buttonClasses({ color, size, loading, disabled: props.disabled, variant }),
-        props.className
-      ),
       // if we click a disabled button, we prevent going through the click handler
       onClick: disabled
         ? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {