button isDisabled props

actifyjs · Nov 4, 2024 · cfa4d4d · cfa4d4d
1 parent 1cbdce2
commit cfa4d4d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 31 deletions.
diff --git 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
@@ -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,21 +50,20 @@ const Button = (props: ButtonProps) => {
     buttons['btn'],
     colors[color],
     variants[variant],
-    disabled && buttons['disabled'],
+    isDisabled && buttons['disabled'],
     className
   )
 
   const { focusProps, isFocusVisible } = useFocusRing()
 
   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
@@ -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
@@ -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>