From 67a4c8ff1bef1af51406ae04d56228d10fb0435f Mon Sep 17 00:00:00 2001 From: jintak0401 Date: Thu, 28 Nov 2024 22:13:13 +0900 Subject: [PATCH 01/10] feat(Button): if disabled is not specified, modify loading to follow --- packages/bezier-react/src/components/Button/Button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/bezier-react/src/components/Button/Button.tsx b/packages/bezier-react/src/components/Button/Button.tsx index 7f075bdd2..4877d4cac 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( as = BaseButton, className, text, - disabled = false, loading = false, + disabled = loading, active = false, size = 'm', styleVariant = 'primary', From 59a814f9b288a6d153bd3c97d0181782ce7a8695 Mon Sep 17 00:00:00 2001 From: jintak0401 Date: Thu, 28 Nov 2024 22:16:47 +0900 Subject: [PATCH 02/10] chore: add changeset --- .changeset/dry-chairs-vanish.md | 5 +++++ 1 file changed, 5 insertions(+) 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 000000000..39ba3b403 --- /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 From bbba46eb585119c3b520236a7afb6a6bd033bd2e Mon Sep 17 00:00:00 2001 From: jintak0401 Date: Mon, 2 Dec 2024 13:54:54 +0900 Subject: [PATCH 03/10] fix(Button): update disabled prop logic to consider loading state --- packages/bezier-react/src/components/Button/Button.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/bezier-react/src/components/Button/Button.tsx b/packages/bezier-react/src/components/Button/Button.tsx index 4877d4cac..eda44c580 100644 --- a/packages/bezier-react/src/components/Button/Button.tsx +++ b/packages/bezier-react/src/components/Button/Button.tsx @@ -95,7 +95,7 @@ export const Button = forwardRef( className, text, loading = false, - disabled = loading, + disabled: disabledProp = false, active = false, size = 'm', styleVariant = 'primary', @@ -109,6 +109,8 @@ export const Button = forwardRef( ) { const Comp = as as typeof BaseButton + const disabled = loading || disabledProp + const handleClick = useCallback>( (event) => { if (!disabled) { From 32c8f0018327c34f44cae1d00a018e61f67ac5d0 Mon Sep 17 00:00:00 2001 From: jintak0401 Date: Mon, 2 Dec 2024 13:56:47 +0900 Subject: [PATCH 04/10] docs(Button.types): update loading prop description to indicate button will be disabled --- packages/bezier-react/src/components/Button/Button.types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/bezier-react/src/components/Button/Button.types.ts b/packages/bezier-react/src/components/Button/Button.types.ts index 747f3ce4a..6f253eaad 100644 --- a/packages/bezier-react/src/components/Button/Button.types.ts +++ b/packages/bezier-react/src/components/Button/Button.types.ts @@ -53,6 +53,7 @@ interface ButtonOwnProps { /** * If `loading` is true, spinner will be shown, replacing the content. + * Also, the button will be disabled. * @default false */ loading?: boolean From 9df67df45498edd028d1dda298cda37efdc23455 Mon Sep 17 00:00:00 2001 From: jintak0401 Date: Mon, 2 Dec 2024 14:04:39 +0900 Subject: [PATCH 05/10] feat(AlphaButton): enhance disabled prop logic to account for loading state --- packages/bezier-react/src/components/AlphaButton/Button.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/bezier-react/src/components/AlphaButton/Button.tsx b/packages/bezier-react/src/components/AlphaButton/Button.tsx index 0e7c7b434..844860fb0 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( active, className, loading, + disabled: disabledProp, ...rest }, forwardedRef ) { const Comp = as as typeof BaseButton + const disabled = loading || disabledProp + return ( ( active && styles.active, className )} + disabled={disabled} {...rest} >
Date: Mon, 2 Dec 2024 14:05:15 +0900 Subject: [PATCH 06/10] docs(Button.types): update loading prop description to clarify button will be disabled when loading --- .../bezier-react/src/components/AlphaButton/Button.types.ts | 2 +- packages/bezier-react/src/components/Button/Button.types.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/bezier-react/src/components/AlphaButton/Button.types.ts b/packages/bezier-react/src/components/AlphaButton/Button.types.ts index 0e15b089c..26ae19fce 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/Button/Button.types.ts b/packages/bezier-react/src/components/Button/Button.types.ts index 6f253eaad..b893340f5 100644 --- a/packages/bezier-react/src/components/Button/Button.types.ts +++ b/packages/bezier-react/src/components/Button/Button.types.ts @@ -52,8 +52,7 @@ interface ButtonOwnProps { text?: string /** - * If `loading` is true, spinner will be shown, replacing the content. - * Also, the button will be disabled. + * If `loading` is true, spinner will be shown, replacing the content. Also, the button will be disabled. * @default false */ loading?: boolean From 81b7b79235ec52e4b273a9a972b0eedc115f37ef Mon Sep 17 00:00:00 2001 From: jintak0401 Date: Thu, 5 Dec 2024 13:40:24 +0900 Subject: [PATCH 07/10] feat(FloatingButton): enhance disabled prop logic to include loading state --- .../src/components/AlphaFloatingButton/FloatingButton.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx b/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx index d55905572..2c4ac9437 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 (
Date: Thu, 5 Dec 2024 13:40:44 +0900 Subject: [PATCH 08/10] feat(FloatingIconButton): improve disabled state handling by incorporating loading prop --- .../AlphaFloatingIconButton/FloatingIconButton.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx index 363e1469d..fc1c1326b 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 (
Date: Thu, 5 Dec 2024 13:41:01 +0900 Subject: [PATCH 09/10] feat(IconButton): enhance disabled state handling by incorporating loading props --- .../src/components/AlphaIconButton/IconButton.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx b/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx index 110bb772e..585522f0b 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( active, shape = 'rectangle', content, - loading, + loading = false, + disabled: disabledProp = false, className, ...rest }, @@ -43,6 +44,8 @@ export const IconButton = forwardRef( ) { const Comp = as as typeof BaseButton + const disabled = loading || disabledProp + return ( ( active && styles.active, className )} + disabled={disabled} {...rest} >
Date: Thu, 5 Dec 2024 13:46:25 +0900 Subject: [PATCH 10/10] docs(Button.types): update loading prop description about disabled prop --- .../src/components/AlphaFloatingButton/FloatingButton.types.ts | 2 +- .../AlphaFloatingIconButton/FloatingIconButton.types.ts | 2 +- .../src/components/AlphaIconButton/IconButton.types.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.types.ts b/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.types.ts index 927eba30b..032cf2ab5 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.types.ts b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.types.ts index 20fcc85d3..43db95ad5 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.types.ts b/packages/bezier-react/src/components/AlphaIconButton/IconButton.types.ts index acc4f487d..83b36d956 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