Skip to content

Commit c8e5578

Browse files
authored
modify default value of Button's disabled props to follow loading props (#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 -->
1 parent 9fc055d commit c8e5578

File tree

11 files changed

+31
-10
lines changed

11 files changed

+31
-10
lines changed

.changeset/dry-chairs-vanish.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@channel.io/bezier-react': patch
3+
---
4+
5+
If disabled is not passed from Button's props, disabled follows loading

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
7171
active,
7272
className,
7373
loading,
74+
disabled: disabledProp,
7475
...rest
7576
},
7677
forwardedRef
7778
) {
7879
const Comp = as as typeof BaseButton
7980

81+
const disabled = loading || disabledProp
82+
8083
return (
8184
<Comp
8285
ref={forwardedRef}
@@ -88,6 +91,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
8891
active && styles.active,
8992
className
9093
)}
94+
disabled={disabled}
9195
{...rest}
9296
>
9397
<div

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ interface ButtonOwnProps {
3232
text: string
3333

3434
/**
35-
* If `loading` is true, spinner will be shown, replacing the content.
35+
* If `loading` is true, spinner will be shown, replacing the content. Also, the button will be disabled.
3636
* @default false
3737
*/
3838
loading?: boolean

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,12 +72,14 @@ export const FloatingButton = forwardRef<
7272
size = 'm',
7373
active,
7474
className,
75-
loading,
75+
loading = false,
76+
disabled: disabledProp = false,
7677
...rest
7778
},
7879
forwardedRef
7980
) {
8081
const Comp = as as typeof BaseButton
82+
const disabled = loading || disabledProp
8183

8284
return (
8385
<Comp
@@ -90,6 +92,7 @@ export const FloatingButton = forwardRef<
9092
active && styles.active,
9193
className
9294
)}
95+
disabled={disabled}
9396
{...rest}
9497
>
9598
<div

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ interface FloatingButtonOwnProps {
3131
text: string
3232

3333
/**
34-
* If `loading` is true, spinner will be shown, replacing the content.
34+
* If `loading` is true, spinner will be shown, replacing the content. Also, the button will be disabled.
3535
* @default false
3636
*/
3737
loading?: boolean

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,15 @@ export const FloatingIconButton = forwardRef<
3636
size = 'm',
3737
active,
3838
content,
39-
loading,
39+
loading = false,
40+
disabled: disabledProp = false,
4041
className,
4142
...rest
4243
},
4344
forwardedRef
4445
) {
4546
const Comp = as as typeof BaseButton
47+
const disabled = loading || disabledProp
4648

4749
return (
4850
<Comp
@@ -55,6 +57,7 @@ export const FloatingIconButton = forwardRef<
5557
active && styles.active,
5658
className
5759
)}
60+
disabled={disabled}
5861
{...rest}
5962
>
6063
<div

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ type FloatingIconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'
2626

2727
interface FloatingIconButtonOwnProps {
2828
/**
29-
* If `loading` is true, spinner will be shown, replacing the content.
29+
* If `loading` is true, spinner will be shown, replacing the content. Also, the button will be disabled.
3030
* @default false
3131
*/
3232
loading?: boolean

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,17 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
3535
active,
3636
shape = 'rectangle',
3737
content,
38-
loading,
38+
loading = false,
39+
disabled: disabledProp = false,
3940
className,
4041
...rest
4142
},
4243
forwardedRef
4344
) {
4445
const Comp = as as typeof BaseButton
4546

47+
const disabled = loading || disabledProp
48+
4649
return (
4750
<Comp
4851
ref={forwardedRef}
@@ -55,6 +58,7 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
5558
active && styles.active,
5659
className
5760
)}
61+
disabled={disabled}
5862
{...rest}
5963
>
6064
<div

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ type IconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'
2727

2828
interface IconButtonOwnProps {
2929
/**
30-
* If `loading` is true, spinner will be shown, replacing the content.
30+
* If `loading` is true, spinner will be shown, replacing the content. Also, the button will be disabled.
3131
* @default false
3232
*/
3333
loading?: boolean

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
'use client'
1+
'use client'
22

33
import React, { forwardRef, useCallback } from 'react'
44

@@ -94,8 +94,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
9494
as = BaseButton,
9595
className,
9696
text,
97-
disabled = false,
9897
loading = false,
98+
disabled: disabledProp = false,
9999
active = false,
100100
size = 'm',
101101
styleVariant = 'primary',
@@ -109,6 +109,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
109109
) {
110110
const Comp = as as typeof BaseButton
111111

112+
const disabled = loading || disabledProp
113+
112114
const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
113115
(event) => {
114116
if (!disabled) {

0 commit comments

Comments
 (0)