From c8e5578508cc2bed49ddd803dfe7c39cb29700c4 Mon Sep 17 00:00:00 2001
From: Gambit <32933980+jintak0401@users.noreply.github.com>
Date: Thu, 5 Dec 2024 16:12:47 +0900
Subject: [PATCH] modify default value of Button's disabled props to follow
 loading props (#2510)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  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                             | 5 +++++
 packages/bezier-react/src/components/AlphaButton/Button.tsx | 4 ++++
 .../bezier-react/src/components/AlphaButton/Button.types.ts | 2 +-
 .../src/components/AlphaFloatingButton/FloatingButton.tsx   | 5 ++++-
 .../components/AlphaFloatingButton/FloatingButton.types.ts  | 2 +-
 .../AlphaFloatingIconButton/FloatingIconButton.tsx          | 5 ++++-
 .../AlphaFloatingIconButton/FloatingIconButton.types.ts     | 2 +-
 .../src/components/AlphaIconButton/IconButton.tsx           | 6 +++++-
 .../src/components/AlphaIconButton/IconButton.types.ts      | 2 +-
 packages/bezier-react/src/components/Button/Button.tsx      | 6 ++++--
 packages/bezier-react/src/components/Button/Button.types.ts | 2 +-
 11 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/dry-chairs-vanish.md

diff --git a/.changeset/dry-chairs-vanish.md b/.changeset/dry-chairs-vanish.md
new file mode 100644
index 0000000000..39ba3b403d
--- /dev/null
+++ b/.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
diff --git a/packages/bezier-react/src/components/AlphaButton/Button.tsx b/packages/bezier-react/src/components/AlphaButton/Button.tsx
index 0e7c7b4343..844860fb00 100644
--- a/packages/bezier-react/src/components/AlphaButton/Button.tsx
+++ b/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
diff --git a/packages/bezier-react/src/components/AlphaButton/Button.types.ts b/packages/bezier-react/src/components/AlphaButton/Button.types.ts
index 0e15b089c3..26ae19fcec 100644
--- a/packages/bezier-react/src/components/AlphaButton/Button.types.ts
+++ b/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
diff --git a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx b/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx
index d559055727..2c4ac9437e 100644
--- a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx
+++ b/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
diff --git a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.types.ts b/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.types.ts
index 927eba30ba..032cf2ab5b 100644
--- a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.types.ts
+++ b/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
diff --git a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx
index 363e1469df..fc1c1326b0 100644
--- a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx
+++ b/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
diff --git a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.types.ts b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.types.ts
index 20fcc85d35..43db95ad52 100644
--- a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.types.ts
+++ b/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
diff --git a/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx b/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx
index 110bb772ec..585522f0b0 100644
--- a/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx
+++ b/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx
@@ -35,7 +35,8 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
       active,
       shape = 'rectangle',
       content,
-      loading,
+      loading = false,
+      disabled: disabledProp = false,
       className,
       ...rest
     },
@@ -43,6 +44,8 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
   ) {
     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
diff --git a/packages/bezier-react/src/components/AlphaIconButton/IconButton.types.ts b/packages/bezier-react/src/components/AlphaIconButton/IconButton.types.ts
index acc4f487db..83b36d956f 100644
--- a/packages/bezier-react/src/components/AlphaIconButton/IconButton.types.ts
+++ b/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
diff --git a/packages/bezier-react/src/components/Button/Button.tsx b/packages/bezier-react/src/components/Button/Button.tsx
index 7f075bdd2f..eda44c5800 100644
--- a/packages/bezier-react/src/components/Button/Button.tsx
+++ b/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) {
diff --git a/packages/bezier-react/src/components/Button/Button.types.ts b/packages/bezier-react/src/components/Button/Button.types.ts
index 747f3ce4ab..b893340f51 100644
--- a/packages/bezier-react/src/components/Button/Button.types.ts
+++ b/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