fix(nx-dev): improve button shadow handling in nx-dev (#18870)

nrwl · Aug 29, 2023 · 53da4e6 · 53da4e6 · vercel · Aug 29, 2023
1 parent 2383f7d
commit 53da4e6
Showing 1 changed file with 6 additions and 6 deletions.
diff --git 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={getLayoutClassName({ 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={getLayoutClassName({ className })}
+      className={getLayoutClassName(className)}
       {...props}
     >
       <ButtonInner variant={variant} size={size}>