From 207e0aac1fedc131b8afdd0b7c2aa12371501e47 Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Thu, 6 Jul 2023 10:52:47 +0100 Subject: [PATCH] chore: Button Component Tidy up (#9888) Co-authored-by: Peer Richelsen --- packages/ui/components/button/Button.tsx | 64 ++++-------------------- 1 file changed, 11 insertions(+), 53 deletions(-) diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx index 1c39848a17..013192e941 100644 --- a/packages/ui/components/button/Button.tsx +++ b/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 & { 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: "", - secondary: "text-emphasis", - minimal: "text-emphasis", - destructive: "", + primary: + "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", + secondary: + "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) => {