From 7eb30b0c665b748125492b646c3b39f220b4585a Mon Sep 17 00:00:00 2001 From: hamo-o Date: Wed, 7 Aug 2024 17:19:00 +0900 Subject: [PATCH 1/7] =?UTF-8?q?design:=20large=20button=20disabled=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Button/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index 9210c7db..5f26f02e 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -145,7 +145,8 @@ const ButtonStyle = cva({ color: "textWhite", _disabled: { - background: "darkDisabled", + background: "monoBackgroundPressed", + color: "outline", cursor: "not-allowed", }, _hover: { From 3cbe2b192ba66a6ce26a98320250f5e2e6f59166 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Wed, 7 Aug 2024 17:29:11 +0900 Subject: [PATCH 2/7] =?UTF-8?q?fix:=20shadow=20=ED=86=A0=ED=81=B0=20?= =?UTF-8?q?=EC=88=9C=ED=99=98=EC=B0=B8=EC=A1=B0=20=EB=AC=B8=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-tokens/src/shadow.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/wow-tokens/src/shadow.ts b/packages/wow-tokens/src/shadow.ts index c2d6a276..3a0e7829 100644 --- a/packages/wow-tokens/src/shadow.ts +++ b/packages/wow-tokens/src/shadow.ts @@ -1,4 +1,4 @@ -import { color } from "./index.ts"; +import * as color from "./color.ts"; export const blue = { offsetX: 0, From 7793315281e03b1c6ccacc28763b852c8d990f08 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 13 Aug 2024 00:25:27 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20prop=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Button/Button.stories.tsx | 18 ++++++++++++++++++ .../wow-ui/src/components/Button/index.tsx | 9 +++++++++ 2 files changed, 27 insertions(+) diff --git a/packages/wow-ui/src/components/Button/Button.stories.tsx b/packages/wow-ui/src/components/Button/Button.stories.tsx index c19c9ef7..3ef7c8d9 100644 --- a/packages/wow-ui/src/components/Button/Button.stories.tsx +++ b/packages/wow-ui/src/components/Button/Button.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react"; +import { Help } from "wowds-icons"; import Button from "@/components/Button"; @@ -166,3 +167,20 @@ export const SmallOutline: Story = { variant: "outline", }, }; + +export const LargeWithIcon: Story = { + args: { + children: "버튼", + variant: "solid", + icon: , + }, +}; + +export const SmallWithIcon: Story = { + args: { + children: "버튼", + size: "sm", + variant: "solid", + icon: , + }, +}; diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index 5f26f02e..319fe428 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -19,6 +19,7 @@ import type { * @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부. * @param {"lg" | "sm"} [size] - 버튼의 크기. * @param {"solid" | "outline"} [variant] - 버튼의 종류. + * @param {ReactNode} [icon] - 버튼의 좌측에 들어갈 아이콘. * @param {() => void} [onKeyUp] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트. * @param {() => void} [onKeyDown] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트. * @param {() => void} [onMouseLeave] - 버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트. @@ -35,6 +36,7 @@ export interface CustomButtonProps { disabled?: boolean; size?: "lg" | "sm"; variant?: "solid" | "outline"; + icon?: ReactNode; onKeyUp?: () => void; onKeyDown?: () => void; onMouseLeave?: () => void; @@ -61,6 +63,7 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( disabled = false, size = "lg", variant = "solid", + icon, onKeyUp, onKeyDown, onMouseLeave, @@ -105,6 +108,7 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( onPointerUp={handlePointerUp} {...rest} > + {icon} Date: Tue, 13 Aug 2024 01:02:03 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20subText=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Button/Button.stories.tsx | 9 +++++ .../wow-ui/src/components/Button/index.tsx | 40 +++++++++++++------ 2 files changed, 37 insertions(+), 12 deletions(-) diff --git a/packages/wow-ui/src/components/Button/Button.stories.tsx b/packages/wow-ui/src/components/Button/Button.stories.tsx index 3ef7c8d9..4e732016 100644 --- a/packages/wow-ui/src/components/Button/Button.stories.tsx +++ b/packages/wow-ui/src/components/Button/Button.stories.tsx @@ -184,3 +184,12 @@ export const SmallWithIcon: Story = { icon: , }, }; + +export const LargeWithSubText: Story = { + args: { + children: "버튼", + variant: "solid", + subText: "최종 수정 일시 : 2024년 5월 23일 23:11", + icon: , + }, +}; diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index 319fe428..062f054e 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -16,6 +16,7 @@ import type { * @description 버튼 컴포넌트의 속성을 정의합니다. * * @param {ReactNode} children - 버튼의 자식 요소. + * @param {string} subText - 버튼의 하단에 위치할 보조 텍스트. * @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부. * @param {"lg" | "sm"} [size] - 버튼의 크기. * @param {"solid" | "outline"} [variant] - 버튼의 종류. @@ -33,6 +34,7 @@ import type { export interface CustomButtonProps { children: ReactNode; + subText?: string; disabled?: boolean; size?: "lg" | "sm"; variant?: "solid" | "outline"; @@ -60,6 +62,7 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( { as, children, + subText, disabled = false, size = "lg", variant = "solid", @@ -108,14 +111,11 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( onPointerUp={handlePointerUp} {...rest} > - {icon} - + + {icon} {children} + {subText && {subText}} ); } @@ -124,8 +124,10 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( const ButtonStyle = cva({ base: { display: "flex", + flexDirection: "column", alignItems: "center", justifyContent: "center", + gap: "xs", cursor: "pointer", }, @@ -134,16 +136,10 @@ const ButtonStyle = cva({ lg: { width: "100%", maxWidth: { lgOnly: 316 }, - height: "3rem", - - gap: "xs", - padding: "1rem", borderRadius: "md", }, sm: { - gap: "xxs", - padding: "0.75rem 1.25rem", borderRadius: "full", }, @@ -212,5 +208,25 @@ const ButtonStyle = cva({ ], }); +const ContentStyle = cva({ + base: { + display: "flex", + alignItems: "center", + justifyContent: "center", + }, + variants: { + size: { + lg: { + gap: "xs", + textStyle: "label1", + }, + sm: { + gap: "xxs", + textStyle: "label2", + }, + }, + }, +}); + Button.displayName = "Button"; export default Button; From 2d91f52ef10453f74f3656abaebb6082c18ed068 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 13 Aug 2024 01:16:37 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20sub=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Button/Button.stories.tsx | 8 +++++++ .../wow-ui/src/components/Button/index.tsx | 21 ++++++++++++++++--- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/packages/wow-ui/src/components/Button/Button.stories.tsx b/packages/wow-ui/src/components/Button/Button.stories.tsx index 4e732016..5b043ede 100644 --- a/packages/wow-ui/src/components/Button/Button.stories.tsx +++ b/packages/wow-ui/src/components/Button/Button.stories.tsx @@ -168,6 +168,14 @@ export const SmallOutline: Story = { }, }; +export const SmallSub: Story = { + args: { + children: "버튼", + size: "sm", + variant: "sub", + }, +}; + export const LargeWithIcon: Story = { args: { children: "버튼", diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index 062f054e..eed0bfb2 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -19,7 +19,7 @@ import type { * @param {string} subText - 버튼의 하단에 위치할 보조 텍스트. * @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부. * @param {"lg" | "sm"} [size] - 버튼의 크기. - * @param {"solid" | "outline"} [variant] - 버튼의 종류. + * @param {"solid" | "outline" | "sub"} [variant] - 버튼의 종류. * @param {ReactNode} [icon] - 버튼의 좌측에 들어갈 아이콘. * @param {() => void} [onKeyUp] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트. * @param {() => void} [onKeyDown] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트. @@ -37,7 +37,7 @@ export interface CustomButtonProps { subText?: string; disabled?: boolean; size?: "lg" | "sm"; - variant?: "solid" | "outline"; + variant?: "solid" | "outline" | "sub"; icon?: ReactNode; onKeyUp?: () => void; onKeyDown?: () => void; @@ -101,7 +101,7 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( disabled={disabled} ref={ref} className={ButtonStyle({ - size, + size: variant === "sub" ? "sm" : size, variant, })} onKeyDown={handleKeyDown} @@ -184,6 +184,21 @@ const ButtonStyle = cva({ color: "bluePressed", }, }, + sub: { + background: "blueBackgroundPressed", + color: "primary", + + _disabled: { + color: "blueDisabled", + cursor: "not-allowed", + }, + _hover: { + shadow: "blue", + }, + _pressed: { + background: "blueDisabled", + }, + }, }, }, compoundVariants: [ From bc97d7f8bff5ce1cd76e09a3b0d997cf720524d1 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 13 Aug 2024 01:30:04 +0900 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20jsDoc=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Button/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index eed0bfb2..a8529843 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -16,7 +16,7 @@ import type { * @description 버튼 컴포넌트의 속성을 정의합니다. * * @param {ReactNode} children - 버튼의 자식 요소. - * @param {string} subText - 버튼의 하단에 위치할 보조 텍스트. + * @param {string} [subText] - 버튼의 하단에 위치할 보조 텍스트. * @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부. * @param {"lg" | "sm"} [size] - 버튼의 크기. * @param {"solid" | "outline" | "sub"} [variant] - 버튼의 종류. From 936c0e033cf113fc2c1f787875266196284ccb59 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 13 Aug 2024 17:42:10 +0900 Subject: [PATCH 7/7] =?UTF-8?q?chore:=20changeset=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/stupid-carrots-study.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/stupid-carrots-study.md diff --git a/.changeset/stupid-carrots-study.md b/.changeset/stupid-carrots-study.md new file mode 100644 index 00000000..b9d387ae --- /dev/null +++ b/.changeset/stupid-carrots-study.md @@ -0,0 +1,6 @@ +--- +"wowds-tokens": patch +"wowds-ui": patch +--- + +Button 컴포넌트의 추가 스펙을 구현합니다.