modify default value of Button's disabled props to follow loading pro…

…ps (#2510)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [ ] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [ ] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [ ] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue

#2299 

<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

## Summary

<!-- Please brief explanation of the changes made -->

- Button 의 disabled 의 기본값을 false 에서 loading 을 따라가도록 수정합니다. 

## Details

<!-- Please elaborate description of the changes -->

- loading: true, disabled: undefined -> disabled: true
- loading: true, disabled: false -> disabled: false


https://github.com/user-attachments/assets/c05e5848-91c5-46bc-bf0e-c7cfdab2002b

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

No

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->

.changeset/dry-chairs-vanish.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+If disabled is not passed from Button's props, disabled follows loading

packages/bezier-react/src/components/AlphaButton/Button.tsx

@@ -71,12 +71,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       active,
       className,
       loading,
+      disabled: disabledProp,
       ...rest
     },
     forwardedRef
   ) {
     const Comp = as as typeof BaseButton
 
+    const disabled = loading || disabledProp
+
     return (
       <Comp
         ref={forwardedRef}
@@ -88,6 +91,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           active && styles.active,
           className
         )}
+        disabled={disabled}
         {...rest}
       >
         <div

packages/bezier-react/src/components/AlphaButton/Button.types.ts

@@ -32,7 +32,7 @@ interface ButtonOwnProps {
   text: string
 
   /**
-   * If `loading` is true, spinner will be shown, replacing the content.
+   * If `loading` is true, spinner will be shown, replacing the content. Also, the button will be disabled.
    * @default false
    */
   loading?: boolean

packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx

@@ -72,12 +72,14 @@ export const FloatingButton = forwardRef<
     size = 'm',
     active,
     className,
-    loading,
+    loading = false,
+    disabled: disabledProp = false,
     ...rest
   },
   forwardedRef
 ) {
   const Comp = as as typeof BaseButton
+  const disabled = loading || disabledProp
 
   return (
     <Comp
@@ -90,6 +92,7 @@ export const FloatingButton = forwardRef<
         active && styles.active,
         className
       )}
+      disabled={disabled}
       {...rest}
     >
       <div

packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.types.ts

@@ -31,7 +31,7 @@ interface FloatingButtonOwnProps {
   text: string
 
   /**
-   * If `loading` is true, spinner will be shown, replacing the content.
+   * If `loading` is true, spinner will be shown, replacing the content. Also, the button will be disabled.
    * @default false
    */
   loading?: boolean

packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx

@@ -36,13 +36,15 @@ export const FloatingIconButton = forwardRef<
     size = 'm',
     active,
     content,
-    loading,
+    loading = false,
+    disabled: disabledProp = false,
     className,
     ...rest
   },
   forwardedRef
 ) {
   const Comp = as as typeof BaseButton
+  const disabled = loading || disabledProp
 
   return (
     <Comp
@@ -55,6 +57,7 @@ export const FloatingIconButton = forwardRef<
         active && styles.active,
         className
       )}
+      disabled={disabled}
       {...rest}
     >
       <div

packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.types.ts

@@ -26,7 +26,7 @@ type FloatingIconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'
 
 interface FloatingIconButtonOwnProps {
   /**
-   * If `loading` is true, spinner will be shown, replacing the content.
+   * If `loading` is true, spinner will be shown, replacing the content. Also, the button will be disabled.
    * @default false
    */
   loading?: boolean

packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx

@@ -35,14 +35,17 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
       active,
       shape = 'rectangle',
       content,
-      loading,
+      loading = false,
+      disabled: disabledProp = false,
       className,
       ...rest
     },
     forwardedRef
   ) {
     const Comp = as as typeof BaseButton
 
+    const disabled = loading || disabledProp
+
     return (
       <Comp
         ref={forwardedRef}
@@ -55,6 +58,7 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
           active && styles.active,
           className
         )}
+        disabled={disabled}
         {...rest}
       >
         <div

packages/bezier-react/src/components/AlphaIconButton/IconButton.types.ts

@@ -27,7 +27,7 @@ type IconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'
 
 interface IconButtonOwnProps {
   /**
-   * If `loading` is true, spinner will be shown, replacing the content.
+   * If `loading` is true, spinner will be shown, replacing the content. Also, the button will be disabled.
    * @default false
    */
   loading?: boolean

packages/bezier-react/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-'use client' 
+'use client'
 
 import React, { forwardRef, useCallback } from 'react'
 
@@ -94,8 +94,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       as = BaseButton,
       className,
       text,
-      disabled = false,
       loading = false,
+      disabled: disabledProp = false,
       active = false,
       size = 'm',
       styleVariant = 'primary',
@@ -109,6 +109,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ) {
     const Comp = as as typeof BaseButton
 
+    const disabled = loading || disabledProp
+
     const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
       (event) => {
         if (!disabled) {

packages/bezier-react/src/components/Button/Button.types.ts

@@ -52,7 +52,7 @@ interface ButtonOwnProps {
   text?: string
 
   /**
-   * If `loading` is true, spinner will be shown, replacing the content.
+   * If `loading` is true, spinner will be shown, replacing the content. Also, the button will be disabled.
    * @default false
    */
   loading?: boolean