Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] Checkbox 컴포넌트의 children label prop으로 수정, ReactNode 타입으로 수정 #66

Merged
merged 3 commits into from
Jun 30, 2024
Merged

[Fix] Checkbox 컴포넌트의 children label prop으로 수정, ReactNode 타입으로 수정 #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
976f3b9
feat : label , reactnode 로 수정
SeieunYoo Jun 28, 2024
8dc1ca3
feat : label prop 반영
SeieunYoo Jun 28, 2024
90edc7c
fix : label prop 으로 변경
SeieunYoo Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions apps/wow-docs/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ const Home = () => {
<DropDownOption text="option 1" value="option 2" />
</DropDown>
<MultiGroup variant="checkbox">
<Checkbox children="checkbox1" value="checkbox1" />
<Checkbox children="checkbox2" value="checkbox2" />
<Checkbox children="checkbox3" value="checkbox3" />
<Checkbox children="checkbox4" value="checkbox4" />
<Checkbox label="checkbox1" value="checkbox1" />
<Checkbox label="checkbox2" value="checkbox2" />
<Checkbox label="checkbox3" value="checkbox3" />
<Checkbox label="checkbox4" value="checkbox4" />
</MultiGroup>
<MultiGroup variant="switch">
<Switch label="switch1" value="switch1" />
Expand Down
24 changes: 3 additions & 21 deletions packages/wow-ui/src/components/Checkbox/Checkbox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,19 +41,17 @@ const meta = {
type: "boolean",
},
},
children: {
label: {
description: "체크박스 오른쪽이나 위쪽에 들어갈 텍스트입니다.",
table: {
type: { summary: "ReactNode" },
defaultValue: { summary: null },
},
control: false,
},
onChange: {
description: "외부 활성 상태가 변경될 때 호출되는 함수입니다.",
table: {
type: { summary: "() => void" },
defaultValue: { summary: null },
control: {
type: "function",
},
Expand All @@ -63,41 +61,25 @@ const meta = {
description: "체크박스 클릭 시 호출되는 함수입니다.",
table: {
type: { summary: "() => void" },
defaultValue: { summary: null },
control: {
type: "function",
},
},
},
onKeyDown: {
description:
"체크박스에 포커스 됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 호출되는 함수입니다.",
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: {
Expand Down Expand Up @@ -169,7 +151,7 @@ export const Disabled: Story = {
export const Vertical: Story = {
args: {
checked: true,
children: "string",
label: "string",
position: "vertical",
value: "checkbox",
},
Expand All @@ -178,7 +160,7 @@ export const Vertical: Story = {
export const Horizontal: Story = {
args: {
checked: true,
children: "string",
label: "string",
position: "horizontal",
value: "checkbox",
},
Expand Down
6 changes: 1 addition & 5 deletions packages/wow-ui/src/components/Checkbox/Checkbox.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,7 @@ import Checkbox from "./index";

describe("Checkbox component", () => {
const renderCheckbox = (props: Partial<CheckboxProps> = {}): RenderResult => {
return render(
<Checkbox value="checkbox" {...props}>
Text
</Checkbox>
);
return render(<Checkbox value="checkbox" {...props} label="checkbox" />);
};

test("toggles checked state when clicked", async () => {
Expand Down
17 changes: 7 additions & 10 deletions packages/wow-ui/src/components/Checkbox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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] 체크박스에 포커스 됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 호출되는 함수.
Expand All @@ -28,15 +25,15 @@ import { useCheckedState } from "@/hooks";
* @param {InputHTMLAttributes<HTMLInputElement>} [inputProps] 체크박스의 기본 input 요소에 전달할 추가 속성들.
* @param {CSSProperties} [style] 체크박스의 커스텀 스타일.
* @param {string} [className] 체크박스에 전달하는 커스텀 클래스.
* @param {React.ReactNode} [children] 체크박스 오른쪽이나 위쪽에 들어갈 텍스트.
* @param {ComponentPropsWithoutRef<T>} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props.
* @param {ComponentPropsWithRef<T>["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;
Expand All @@ -57,7 +54,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
value = "checkbox",
onClick,
onChange,
children,
label,
position = "horizontal",
inputProps,
onKeyDown,
Expand Down Expand Up @@ -93,7 +90,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
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"
Expand Down Expand Up @@ -132,7 +129,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
)}
</styled.span>
<styled.span color={checked ? "textBlack" : "sub"} textStyle="body1">
{children}
{label}
</styled.span>
</styled.label>
);
Expand Down
12 changes: 6 additions & 6 deletions packages/wow-ui/src/components/MultiGroup/MultiGroup.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ describe("multi group with checkbox", () => {
it("should render checkbox components with children", () => {
render(
<MultiGroup variant="checkbox">
<Checkbox children="checkbox1" value="checkbox1" />
<Checkbox disabled children="checkbox2" value="checkbox2" />
<Checkbox children="checkbox3" value="checkbox3" />
<Checkbox label="checkbox1" value="checkbox1" />
<Checkbox disabled label="checkbox2" value="checkbox2" />
<Checkbox label="checkbox3" value="checkbox3" />
</MultiGroup>
);
const checkbox1 = screen.getByText("checkbox1");
Expand All @@ -27,9 +27,9 @@ describe("multi group with checkbox", () => {
it("should render checkbox components with its own state", () => {
const rendered = render(
<MultiGroup variant="checkbox">
<Checkbox children="checkbox1" value="checkbox1" />
<Checkbox disabled children="checkbox2" value="checkbox2" />
<Checkbox children="checkbox3" value="checkbox3" />
<Checkbox label="checkbox1" value="checkbox1" />
<Checkbox disabled label="checkbox2" value="checkbox2" />
<Checkbox label="checkbox3" value="checkbox3" />
</MultiGroup>
);
const checkboxes = rendered.getAllByRole("checkbox");
Expand Down
13 changes: 9 additions & 4 deletions packages/wow-ui/src/components/RadioGroup/RadioButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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<HTMLInputElement>} [inputProps] - 라디오 버튼의 기본 input 요소에 전달할 추가 속성들.
Expand All @@ -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<HTMLInputElement>;
Expand Down Expand Up @@ -80,7 +85,7 @@ const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
<styled.input
aria-checked={selected}
aria-disabled={group.disabled || disabled}
aria-label={label}
aria-label={typeof label === "string" ? label : "radio-button"}
checked={selected}
data-pressed={pressed}
data-readonly={(group.disabled || disabled) && selected}
Expand Down
Loading