From cfa4d4d157bd6a6a4d4c3ec3d6e2b0fc16e501c5 Mon Sep 17 00:00:00 2001
From: lerte smith <lerte@qq.com>
Date: Tue, 5 Nov 2024 01:05:30 +0800
Subject: [PATCH] button isDisabled props

---
 apps/docs/src/usages/buttons/button.tsx       | 10 +++++-----
 .../actify/src/components/Button/Button.tsx   | 11 +++++-----
 packages/actify/src/components/Button/Fab.tsx |  9 +++------
 .../src/components/Button/IconButton.tsx      | 20 ++++++-------------
 4 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/apps/docs/src/usages/buttons/button.tsx b/apps/docs/src/usages/buttons/button.tsx
index 5d0fdb20..8f10d7ce 100644
--- a/apps/docs/src/usages/buttons/button.tsx
+++ b/apps/docs/src/usages/buttons/button.tsx
@@ -17,7 +17,7 @@ export default () => {
         <Button variant="elevated" color="error">
           error
         </Button>
-        <Button variant="elevated" disabled>
+        <Button variant="elevated" isDisabled>
           disabled
         </Button>
       </div>
@@ -33,7 +33,7 @@ export default () => {
         <Button variant="filled" color="error">
           error
         </Button>
-        <Button variant="filled" disabled>
+        <Button variant="filled" isDisabled>
           disabled
         </Button>
       </div>
@@ -49,7 +49,7 @@ export default () => {
         <Button variant="tonal" color="error">
           error
         </Button>
-        <Button variant="tonal" disabled>
+        <Button variant="tonal" isDisabled>
           disabled
         </Button>
       </div>
@@ -65,7 +65,7 @@ export default () => {
         <Button variant="outlined" color="error">
           error
         </Button>
-        <Button variant="outlined" disabled>
+        <Button variant="outlined" isDisabled>
           disabled
         </Button>
       </div>
@@ -81,7 +81,7 @@ export default () => {
         <Button variant="text" color="error">
           error
         </Button>
-        <Button variant="text" disabled>
+        <Button variant="text" isDisabled>
           disabled
         </Button>
       </div>
diff --git a/packages/actify/src/components/Button/Button.tsx b/packages/actify/src/components/Button/Button.tsx
index 1c3b4e05..af7d9575 100644
--- a/packages/actify/src/components/Button/Button.tsx
+++ b/packages/actify/src/components/Button/Button.tsx
@@ -24,7 +24,7 @@ type ButtonProps = {
   popoverTargetAction?: 'show' | 'toggle' | 'hide'
   color?: 'primary' | 'secondary' | 'tertiary' | 'error'
   variant?: 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text'
-} & React.ComponentProps<'button'> &
+} & Omit<React.ComponentProps<'button'>, 'disabled'> &
   AriaButtonProps
 
 const Button = (props: ButtonProps) => {
@@ -36,7 +36,7 @@ const Button = (props: ButtonProps) => {
     ripple = true,
     color = 'primary',
     variant = 'elevated',
-    disabled = false,
+    isDisabled = false,
     className,
     children
   } = props
@@ -50,7 +50,7 @@ const Button = (props: ButtonProps) => {
     buttons['btn'],
     colors[color],
     variants[variant],
-    disabled && buttons['disabled'],
+    isDisabled && buttons['disabled'],
     className
   )
 
@@ -58,13 +58,12 @@ const Button = (props: ButtonProps) => {
 
   return (
     <div role="presentation" style={style} className={classes}>
-      <Elevation disabled={disabled} />
+      <Elevation disabled={isDisabled} />
       {variant == 'outlined' && <div className={buttons['outline']} />}
       <span className={buttons['background']} />
-      {ripple && <Ripple id={buttonId} disabled={disabled} />}
+      {ripple && <Ripple id={buttonId} disabled={isDisabled} />}
       <button
         id={buttonId}
-        disabled={disabled}
         ref={ref || buttonRef}
         className={buttons['button']}
         {...mergeProps(asLink ? null : buttonProps, focusProps)}
diff --git a/packages/actify/src/components/Button/Fab.tsx b/packages/actify/src/components/Button/Fab.tsx
index 93187385..f34ecab5 100644
--- a/packages/actify/src/components/Button/Fab.tsx
+++ b/packages/actify/src/components/Button/Fab.tsx
@@ -37,7 +37,7 @@ type FabProps = {
   label?: string
   icon?: React.ReactNode
   variant?: 'surface' | 'primary' | 'secondary' | 'tertiary'
-} & React.ComponentProps<'button'> &
+} & Omit<React.ComponentProps<'button'>, 'disabled'> &
   VariantProps<typeof root> &
   AriaButtonProps
 
@@ -46,9 +46,8 @@ const Fab = (props: FabProps) => {
     id,
     icon,
     label,
-    type = 'button',
     size = 'medium',
-    disabled = false,
+    isDisabled = false,
     className,
     children
   } = props
@@ -61,9 +60,7 @@ const Fab = (props: FabProps) => {
   return (
     <button
       id={fabId}
-      type={type}
       ref={fabRef}
-      disabled={disabled}
       className={root({ size, className })}
       {...mergeProps(buttonProps, focusProps)}
     >
@@ -72,7 +69,7 @@ const Fab = (props: FabProps) => {
       {label}
       <Elevation className="[--md-elevation-level:3]" />
       {isFocusVisible && <FocusRing />}
-      <Ripple id={fabId} disabled={disabled} />
+      <Ripple id={fabId} disabled={isDisabled} />
     </button>
   )
 }
diff --git a/packages/actify/src/components/Button/IconButton.tsx b/packages/actify/src/components/Button/IconButton.tsx
index 7fbabf86..3d081d73 100644
--- a/packages/actify/src/components/Button/IconButton.tsx
+++ b/packages/actify/src/components/Button/IconButton.tsx
@@ -11,6 +11,7 @@ import { VariantProps, tv } from 'tailwind-variants'
 
 import { FocusRing } from './../FocusRing'
 import { Ripple } from './../Ripple'
+import clsx from 'clsx'
 
 const root = tv({
   base: [
@@ -39,21 +40,13 @@ const root = tv({
 
 type IconButtonProps = {
   ripple?: boolean
-  disabled?: boolean
   type?: 'submit' | 'reset' | 'button'
   variant?: VariantProps<typeof root>['variant']
-} & React.ComponentProps<'button'> &
+} & Omit<React.ComponentProps<'button'>, 'disabled'> &
   AriaButtonProps
 
 const IconButton = (props: IconButtonProps) => {
-  const {
-    id,
-    ref,
-    disabled,
-    children,
-    className,
-    ripple = !disabled && true
-  } = props
+  const { id, ref, ripple, children, className, isDisabled } = props
 
   const buttonRef = React.useRef(null)
   const { buttonProps } = useButton(props, buttonRef)
@@ -63,15 +56,14 @@ const IconButton = (props: IconButtonProps) => {
 
   return (
     <button
-      ref={ref || buttonRef}
       id={iconButtonId}
-      disabled={disabled}
+      ref={ref || buttonRef}
       {...mergeProps(buttonProps, focusProps)}
-      className={(disabled ? 'text-outline ' : '') + root({ className })}
+      className={clsx(isDisabled && 'text-outline', root({ className }))}
     >
       {/* FocusRing */}
       {isFocusVisible && <FocusRing />}
-      {ripple && <Ripple id={iconButtonId} disabled={disabled} />}
+      {ripple && <Ripple id={iconButtonId} disabled={isDisabled} />}
       {children}
       <span className="absolute size-[max(48px,100%)]" />
     </button>