ui(button): s/isDisabled/disabled

.gitignore

@@ -18,3 +18,5 @@ public/dist
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+tsconfig.tsbuildinfo

apps/storybook/stories/button.stories.tsx

@@ -6,10 +6,9 @@ import type {
   ButtonDisplay,
   ButtonSize,
   ButtonType,
-  ButtonVariant} from '@tih/ui';
+  ButtonVariant,
-import {
-  Button
 } from '@tih/ui';
+import { Button } from '@tih/ui';
 
 const buttonTypes: ReadonlyArray<ButtonType> = ['button', 'reset', 'submit'];
 const buttonSizes: ReadonlyArray<ButtonSize> = ['sm', 'md', 'lg'];
@@ -32,13 +31,13 @@ export default {
       control: { type: 'select' },
       options: buttonAddOnPositions,
     },
+    disabled: {
+      control: 'boolean',
+    },
     display: {
       control: { type: 'select' },
       options: buttonDisplays,
     },
-    isDisabled: {
-      control: 'boolean',
-    },
     isLoading: {
       control: 'boolean',
     },
@@ -112,7 +111,7 @@ export function Disabled() {
       {buttonVariants.map((variant) => (
         <Button
           key={variant}
-          isDisabled={true}
+          disabled={true}
           label="Click Me"
           size="md"
           variant={variant}
@@ -140,7 +139,7 @@ export function Loading() {
         {buttonVariants.map((variant) => (
           <Button
             key={variant}
-            isDisabled={true}
+            disabled={true}
             isLoading={true}
             label="Click Me"
             size="md"
@@ -166,8 +165,8 @@ export function Icons() {
           />
         ))}
         <Button
+          disabled={true}
           icon={EnvelopeIcon}
-          isDisabled={true}
           label="Click Me"
           size="lg"
           variant="primary"
@@ -186,8 +185,8 @@ export function Icons() {
         ))}
         <Button
           addonPosition="start"
+          disabled={true}
           icon={EnvelopeIcon}
-          isDisabled={true}
           label="Click Me"
           size="lg"
           variant="primary"
@@ -205,9 +204,9 @@ export function Icons() {
           />
         ))}
         <Button
+          disabled={true}
           display="block"
           icon={EnvelopeIcon}
-          isDisabled={true}
           label="Click Me"
           size="lg"
           variant="primary"
@@ -231,8 +230,8 @@ export function HiddenLabel() {
         />
       ))}
       <Button
+        disabled={true}
         icon={EnvelopeIcon}
-        isDisabled={true}
         isLabelHidden={true}
         label="Click Me"
         size="lg"

packages/ui/src/Button/Button.tsx

@@ -19,10 +19,10 @@ type Props = Readonly<{
   addonPosition?: ButtonAddOnPosition;
   'aria-controls'?: string;
   className?: string;
+  disabled?: boolean;
   display?: ButtonDisplay;
   href?: UrlObject | string;
   icon?: (props: React.ComponentProps<'svg'>) => JSX.Element;
-  isDisabled?: boolean;
   isLabelHidden?: boolean;
   isLoading?: boolean;
   label: string;
@@ -92,7 +92,7 @@ export default function Button({
   display = 'inline',
   href,
   icon: Icon,
-  isDisabled = false,
+  disabled = false,
   isLabelHidden = false,
   isLoading = false,
   label,
@@ -133,13 +133,13 @@ export default function Button({
     className: clsx(
       display === 'block' ? 'flex w-full justify-center' : 'inline-flex',
       'whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
-      isDisabled ? variantDisabledClasses[variant] : variantClasses[variant],
+      disabled ? variantDisabledClasses[variant] : variantClasses[variant],
-      isDisabled && 'pointer-events-none',
+      disabled && 'pointer-events-none',
       isLabelHidden ? iconOnlySizeClasses[size] : sizeClasses[size],
       baseClasses[size],
       className,
     ),
-    disabled: isDisabled,
+    disabled,
     onClick,
   };