From 47070eb4775b78230d05e77b6d58b97ca3df6d43 Mon Sep 17 00:00:00 2001
From: Ben <3447705+bcabanes@users.noreply.github.com>
Date: Mon, 28 Aug 2023 15:45:34 -0400
Subject: [PATCH] fix(nx-dev): improve button shadow handling in nx-dev

The commit fine-tunes the styling and functionality related to button shadows in the nx-dev/user interface common library. This includes adjusting shadow properties in the styling and updating the 'getLayoutClassName' function for better consistency and accuracy. The 'button' and 'a' HTML tagged elements were also updated to use the improved 'getLayoutClassName'.
---
 nx-dev/ui-common/src/lib/button.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/nx-dev/ui-common/src/lib/button.tsx b/nx-dev/ui-common/src/lib/button.tsx
index d1abcf0b3725c2..080f8dd8bee9dd 100644
--- a/nx-dev/ui-common/src/lib/button.tsx
+++ b/nx-dev/ui-common/src/lib/button.tsx
@@ -20,7 +20,7 @@ const variantStyles: Record<AllowedVariants, string> = {
   primary:
     'bg-blue-500 dark:bg-sky-500 text-white group-hover:bg-blue-600 dark:group-hover:bg-sky-600 group-focus:ring-2 group-focus:ring-blue-500 dark:group-focus:ring-sky-500 focus:group-ring-offset-2',
   secondary:
-    'border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 shadow-sm group-hover:bg-slate-50 dark:group-hover:bg-slate-700 group-focus:ring-2 group-focus:ring-blue-500 dark:group-focus:ring-sky-500 focus:ring-offset-2',
+    'border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 group-hover:bg-slate-50 dark:group-hover:bg-slate-700 group-focus:ring-2 group-focus:ring-blue-500 dark:group-focus:ring-sky-500 focus:ring-offset-2',
 };
 const sizes: Record<AllowedSizes, string> = {
   large: 'space-x-4 px-4 py-2 text-lg',
@@ -31,9 +31,9 @@ const sizes: Record<AllowedSizes, string> = {
 /**
  * Shared layout containing specific button styles.
  */
-function getLayoutClassName({ className = '' }: { className: string }): string {
+function getLayoutClassName(className = ''): string {
   return cx(
-    'group relative inline-flex rounded border border-transparent shadow-sm font-medium opacity-100 focus:outline-none disabled:opacity-80 transition',
+    'group relative inline-flex opacity-100 focus:outline-none disabled:opacity-80 disabled:cursor-not-allowed transition',
     className
   );
 }
@@ -50,7 +50,7 @@ function ButtonInner({
     <>
       <span
         className={cx(
-          'flex h-full w-full items-center justify-center whitespace-nowrap rounded-md border border-transparent transition',
+          'flex h-full w-full items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium shadow-sm transition',
           variantStyles[variant],
           sizes[size]
         )}
@@ -72,7 +72,7 @@ export function Button({
   ...props
 }: ButtonProps & JSX.IntrinsicElements['button']): JSX.Element {
   return (
-    <button {...props} className={cx('inline-flex', className)}>
+    <button {...props} className={getLayoutClassName(className)}>
       <ButtonInner variant={variant} size={size}>
         {children}
       </ButtonInner>
@@ -104,7 +104,7 @@ export const ButtonLink = forwardRef(function (
       ref={ref}
       href={href}
       title={title}
-      className={cx('inline-flex', className)}
+      className={getLayoutClassName(className)}
       {...props}
     >
       <ButtonInner variant={variant} size={size}>