From 976f3b9d6bf3d33610f44353ff999d808abe282f Mon Sep 17 00:00:00 2001 From: SeieunYoo Date: Fri, 28 Jun 2024 20:31:53 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat=20:=20label=20,=20reactnode=20?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Checkbox/Checkbox.stories.tsx | 24 +++---------------- .../src/components/Checkbox/Checkbox.test.tsx | 6 +---- .../wow-ui/src/components/Checkbox/index.tsx | 17 ++++++------- .../src/components/RadioGroup/RadioButton.tsx | 13 ++++++---- 4 files changed, 20 insertions(+), 40 deletions(-) diff --git a/packages/wow-ui/src/components/Checkbox/Checkbox.stories.tsx b/packages/wow-ui/src/components/Checkbox/Checkbox.stories.tsx index b69cb803..c53e3e0d 100644 --- a/packages/wow-ui/src/components/Checkbox/Checkbox.stories.tsx +++ b/packages/wow-ui/src/components/Checkbox/Checkbox.stories.tsx @@ -41,11 +41,10 @@ const meta = { type: "boolean", }, }, - children: { + label: { description: "체크박스 오른쪽이나 위쪽에 들어갈 텍스트입니다.", table: { type: { summary: "ReactNode" }, - defaultValue: { summary: null }, }, control: false, }, @@ -53,7 +52,6 @@ const meta = { description: "외부 활성 상태가 변경될 때 호출되는 함수입니다.", table: { type: { summary: "() => void" }, - defaultValue: { summary: null }, control: { type: "function", }, @@ -63,10 +61,6 @@ const meta = { description: "체크박스 클릭 시 호출되는 함수입니다.", table: { type: { summary: "() => void" }, - defaultValue: { summary: null }, - control: { - type: "function", - }, }, }, onKeyDown: { @@ -74,30 +68,18 @@ const meta = { "체크박스에 포커스 됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 호출되는 함수입니다.", table: { type: { summary: "() => void" }, - defaultValue: { summary: null }, - control: { - type: "function", - }, }, }, onMouseEnter: { description: "마우스가 체크박스 위로 진입할 때 호출되는 함수입니다.", table: { type: { summary: "() => void" }, - defaultValue: { summary: null }, - }, - control: { - type: "function", }, }, onMouseLeave: { description: "마우스가 체크박스에서 벗어날 때 호출되는 함수입니다.", table: { type: { summary: "() => void" }, - defaultValue: { summary: null }, - }, - control: { - type: "function", }, }, position: { @@ -169,7 +151,7 @@ export const Disabled: Story = { export const Vertical: Story = { args: { checked: true, - children: "string", + label: "string", position: "vertical", value: "checkbox", }, @@ -178,7 +160,7 @@ export const Vertical: Story = { export const Horizontal: Story = { args: { checked: true, - children: "string", + label: "string", position: "horizontal", value: "checkbox", }, diff --git a/packages/wow-ui/src/components/Checkbox/Checkbox.test.tsx b/packages/wow-ui/src/components/Checkbox/Checkbox.test.tsx index 0cd5c543..4d4b8006 100644 --- a/packages/wow-ui/src/components/Checkbox/Checkbox.test.tsx +++ b/packages/wow-ui/src/components/Checkbox/Checkbox.test.tsx @@ -7,11 +7,7 @@ import Checkbox from "./index"; describe("Checkbox component", () => { const renderCheckbox = (props: Partial = {}): RenderResult => { - return render( - - Text - - ); + return render(); }; test("toggles checked state when clicked", async () => { diff --git a/packages/wow-ui/src/components/Checkbox/index.tsx b/packages/wow-ui/src/components/Checkbox/index.tsx index 48d5bf1a..65917a49 100644 --- a/packages/wow-ui/src/components/Checkbox/index.tsx +++ b/packages/wow-ui/src/components/Checkbox/index.tsx @@ -2,11 +2,7 @@ import { cva } from "@styled-system/css"; import { styled } from "@styled-system/jsx"; -import type { - CSSProperties, - InputHTMLAttributes, - PropsWithChildren, -} from "react"; +import type { CSSProperties, InputHTMLAttributes, ReactNode } from "react"; import { forwardRef, useId } from "react"; import { Check as CheckIcon } from "wowds-icons"; @@ -19,6 +15,7 @@ import { useCheckedState } from "@/hooks"; * @param {boolean} [disabled=false] 체크박스가 비활성화되어 있는지 여부. * @param {boolean} [checked] 외부에서 제어할 활성 상태. * @param {string} value 체크박스 값. + * @param {ReactNode} [label] 체크박스 오른쪽이나 위쪽에 들어갈 텍스트. * @param {() => void} [onChange] 외부 활성 상태가 변경될 때 호출되는 함수. * @param {() => void} [onClick] 체크박스 클릭 시 호출되는 함수. * @param {() => void} [onKeyDown] 체크박스에 포커스 됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 호출되는 함수. @@ -28,15 +25,15 @@ import { useCheckedState } from "@/hooks"; * @param {InputHTMLAttributes} [inputProps] 체크박스의 기본 input 요소에 전달할 추가 속성들. * @param {CSSProperties} [style] 체크박스의 커스텀 스타일. * @param {string} [className] 체크박스에 전달하는 커스텀 클래스. - * @param {React.ReactNode} [children] 체크박스 오른쪽이나 위쪽에 들어갈 텍스트. * @param {ComponentPropsWithoutRef} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props. * @param {ComponentPropsWithRef["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref. */ -export interface CheckboxProps extends PropsWithChildren { +export interface CheckboxProps { defaultChecked?: boolean; disabled?: boolean; checked?: boolean; value?: string; + label?: ReactNode; onChange?: () => void; onClick?: () => void; onKeyDown?: () => void; @@ -57,7 +54,7 @@ const Checkbox = forwardRef( value = "checkbox", onClick, onChange, - children, + label, position = "horizontal", inputProps, onKeyDown, @@ -93,7 +90,7 @@ const Checkbox = forwardRef( cursor={disabled ? "none" : "pointer"} display="flex" flexDirection={position === "vertical" ? "column-reverse" : "row"} - gap={children ? "xs" : "0px"} + gap={label ? "xs" : "0px"} htmlFor={id} pointerEvents={disabled ? "none" : "auto"} width="fit-content" @@ -132,7 +129,7 @@ const Checkbox = forwardRef( )} - {children} + {label} ); diff --git a/packages/wow-ui/src/components/RadioGroup/RadioButton.tsx b/packages/wow-ui/src/components/RadioGroup/RadioButton.tsx index 05c749d7..9d1f9106 100644 --- a/packages/wow-ui/src/components/RadioGroup/RadioButton.tsx +++ b/packages/wow-ui/src/components/RadioGroup/RadioButton.tsx @@ -2,7 +2,12 @@ import { cva } from "@styled-system/css/cva"; import { styled } from "@styled-system/jsx"; -import type { CSSProperties, InputHTMLAttributes, KeyboardEvent } from "react"; +import type { + CSSProperties, + InputHTMLAttributes, + KeyboardEvent, + ReactNode, +} from "react"; import { forwardRef, useCallback, useContext, useState } from "react"; import RadioContext from "@/components/RadioGroup/RadioContext"; @@ -12,7 +17,7 @@ import RadioContext from "@/components/RadioGroup/RadioContext"; * * @param {boolean} [disabled] - 라디오 버튼이 비활성화되어 있는지 여부. * @param {string} value - 라디오 버튼의 값. - * @param {string} [label] - 라디오 버튼의 라벨. + * @param {ReactNode} [label] - 라디오 버튼의 라벨. * @param {CSSProperties} [style] - 라디오 버튼의 커스텀 스타일. * @param {string} [className] - 라디오 버튼에 전달하는 커스텀 클래스. * @param {InputHTMLAttributes} [inputProps] - 라디오 버튼의 기본 input 요소에 전달할 추가 속성들. @@ -23,7 +28,7 @@ import RadioContext from "@/components/RadioGroup/RadioContext"; export interface RadioButtonProps { disabled?: boolean; value: string; - label?: string; + label?: ReactNode; style?: CSSProperties; className?: string; inputProps?: InputHTMLAttributes; @@ -80,7 +85,7 @@ const RadioButton = forwardRef( Date: Fri, 28 Jun 2024 20:51:53 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat=20:=20label=20prop=20=EB=B0=98?= =?UTF-8?q?=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wow-docs/app/page.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/wow-docs/app/page.tsx b/apps/wow-docs/app/page.tsx index d45e09b4..282a6da3 100644 --- a/apps/wow-docs/app/page.tsx +++ b/apps/wow-docs/app/page.tsx @@ -22,10 +22,10 @@ const Home = () => { - - - - + + + + From 90edc7c8d9db9ccaf8b9d48df371a91de7ca9426 Mon Sep 17 00:00:00 2001 From: SeieunYoo Date: Fri, 28 Jun 2024 22:06:49 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix=20:=20label=20prop=20=EC=9C=BC=EB=A1=9C?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/MultiGroup/MultiGroup.test.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/wow-ui/src/components/MultiGroup/MultiGroup.test.tsx b/packages/wow-ui/src/components/MultiGroup/MultiGroup.test.tsx index 2bde8262..722465c8 100644 --- a/packages/wow-ui/src/components/MultiGroup/MultiGroup.test.tsx +++ b/packages/wow-ui/src/components/MultiGroup/MultiGroup.test.tsx @@ -10,9 +10,9 @@ describe("multi group with checkbox", () => { it("should render checkbox components with children", () => { render( - - - + + + ); const checkbox1 = screen.getByText("checkbox1"); @@ -27,9 +27,9 @@ describe("multi group with checkbox", () => { it("should render checkbox components with its own state", () => { const rendered = render( - - - + + + ); const checkboxes = rendered.getAllByRole("checkbox");