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] aria-pressed 속성 active 대체 및 useButton 훅 삭제 #149

Merged
merged 2 commits into from
Aug 23, 2024
Merged

[Fix] aria-pressed 속성 active 대체 및 useButton 훅 삭제 #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dfaf20b
fix: pressed 속성 active 속성으로 변경
hamo-o Aug 22, 2024
5240727
remove: useButton 훅 삭제
hamo-o Aug 22, 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
3 changes: 0 additions & 3 deletions packages/wow-ui/panda.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,4 @@ export default defineConfig({
},
},
outdir: "styled-system",
conditions: {
hover: "&[aria-pressed=false]:not(:disabled):hover",
},
});
40 changes: 0 additions & 40 deletions packages/wow-ui/src/components/Button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,46 +65,6 @@ const meta = {
options: ["solid", "outline"],
},
},
onKeyDown: {
description:
"버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onKeyUp: {
description:
"버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onMouseLeave: {
description:
"버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onPointerDown: {
description:
"버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onPointerUp: {
description:
"버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
style: {
description: "버튼의 커스텀 스타일을 나타냅니다.",
table: {
Expand Down
41 changes: 4 additions & 37 deletions packages/wow-ui/src/components/Button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { styled } from "@styled-system/jsx";
import type { CSSProperties, ElementType, ReactNode } from "react";
import { forwardRef } from "react";

import useButton from "@/hooks/useButton";
import type {
PolymorphicComponentProps,
PolymorphicComponentPropsWithRef,
Expand All @@ -21,11 +20,6 @@ import type {
* @param {"lg" | "sm"} [size] - 버튼의 크기.
* @param {"solid" | "outline" | "sub"} [variant] - 버튼의 종류.
* @param {ReactNode} [icon] - 버튼의 좌측에 들어갈 아이콘.
* @param {() => void} [onKeyUp] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트.
* @param {() => void} [onKeyDown] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트.
* @param {() => void} [onMouseLeave] - 버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트.
* @param {() => void} [onPointerDown] - 버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트.
* @param {() => void} [onPointerUp] - 버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트.
* @param {CSSProperties} [style] - 버튼의 커스텀 스타일.
* @param {string} [className] - 버튼에 전달하는 커스텀 클래스.
* @param {ComponentPropsWithoutRef<T>} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props.
Expand Down Expand Up @@ -67,48 +61,21 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef(
size = "lg",
variant = "solid",
icon,
onKeyUp,
onKeyDown,
onMouseLeave,
onPointerDown,
onPointerUp,
...rest
}: ButtonProps<C>,
ref?: PolymorphicRef<C>
) => {
const Component = asProp || "button";

const {
pressed,
handleKeyDown,
handleKeyUp,
handlePointerDown,
handlePointerUp,
handleMouseLeave,
} = useButton({
disabled,
onMouseLeave,
onKeyUp,
onKeyDown,
onPointerDown,
onPointerUp,
});

return (
<Component
aria-disabled={disabled}
aria-pressed={pressed}
disabled={disabled}
ref={ref}
className={ButtonStyle({
size: variant === "sub" ? "sm" : size,
variant,
})}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
onMouseLeave={handleMouseLeave}
onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp}
{...rest}
>
<styled.span className={ContentStyle({ size })}>
Expand Down Expand Up @@ -157,7 +124,7 @@ const ButtonStyle = cva({
_hover: {
shadow: "blue",
},
_pressed: {
_active: {
background: "bluePressed",
},
},
Expand All @@ -178,7 +145,7 @@ const ButtonStyle = cva({
borderColor: "blueHover",
color: "blueHover",
},
_pressed: {
_active: {
borderColor: "bluePressed",
background: "blueBackgroundPressed",
color: "bluePressed",
Expand All @@ -195,7 +162,7 @@ const ButtonStyle = cva({
_hover: {
shadow: "blue",
},
_pressed: {
_active: {
background: "blueDisabled",
},
},
Expand All @@ -213,7 +180,7 @@ const ButtonStyle = cva({
borderColor: "textBlack",
color: "textBlack",
},
_pressed: {
_active: {
borderColor: "outline",
background: "monoBackgroundPressed",
color: "textBlack",
Expand Down
40 changes: 0 additions & 40 deletions packages/wow-ui/src/components/TextButton/TextButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,46 +47,6 @@ const meta = {
options: ["lg", "sm"],
},
},
onKeyDown: {
description:
"텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onKeyUp: {
description:
"텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onMouseLeave: {
description:
"텍스트 버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onPointerDown: {
description:
"텍스트 버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onPointerUp: {
description:
"텍스트 버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
style: {
description: "텍스트 버튼의 커스텀 스타일을 나타냅니다.",
table: {
Expand Down
47 changes: 2 additions & 45 deletions packages/wow-ui/src/components/TextButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { styled } from "@styled-system/jsx";
import type { CSSProperties, ElementType, ReactNode } from "react";
import { forwardRef } from "react";

import useButton from "@/hooks/useButton";
import type {
PolymorphicComponentProps,
PolymorphicComponentPropsWithRef,
Expand All @@ -18,10 +17,6 @@ import type {
* @param {string} text - 텍스트 버튼의 라벨.
* @param {boolean} [disabled] - 텍스트 버튼이 비활성화되어 있는지 여부.
* @param {"lg" | "sm"} [size] - 텍스트 버튼의 크기.
* @param {() => void} [onKeyDown] - 텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트.
* @param {() => void} [onMouseLeave] - 텍스트 버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트.
* @param {() => void} [onPointerDown] - 텍스트 버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트.
* @param {() => void} [onPointerUp] - 텍스트 버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트.
* @param {CSSProperties} [style] - 텍스트 버튼의 커스텀 스타일.
* @param {string} [className] - 텍스트 버튼에 전달하는 커스텀 클래스.
* @param {ComponentPropsWithoutRef<T>} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props.
Expand All @@ -32,11 +27,6 @@ export interface CustomButtonProps {
text: string;
disabled?: boolean;
size?: "lg" | "sm";
onKeyUp?: () => void;
onKeyDown?: () => void;
onMouseLeave?: () => void;
onPointerDown?: () => void;
onPointerUp?: () => void;
style?: CSSProperties;
className?: string;
}
Expand All @@ -52,50 +42,17 @@ type ButtonComponent = <C extends ElementType = "button">(

const TextButton: ButtonComponent & { displayName?: string } = forwardRef(
<C extends ElementType = "button">(
{
asProp,
text,
disabled = false,
size = "lg",
onKeyUp,
onKeyDown,
onMouseLeave,
onPointerDown,
onPointerUp,
...rest
}: ButtonProps<C>,
{ asProp, text, disabled = false, size = "lg", ...rest }: ButtonProps<C>,
ref?: PolymorphicRef<C>
) => {
const Component = asProp || "button";

const {
pressed,
handleKeyDown,
handleKeyUp,
handlePointerDown,
handlePointerUp,
handleMouseLeave,
} = useButton({
disabled,
onKeyUp,
onKeyDown,
onMouseLeave,
onPointerDown,
onPointerUp,
});

return (
<Component
aria-disabled={disabled}
aria-pressed={pressed}
className={TextButtonStyle}
disabled={disabled}
ref={ref}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
onMouseLeave={handleMouseLeave}
onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp}
{...rest}
>
<styled.span
Expand Down Expand Up @@ -124,7 +81,7 @@ const TextButtonStyle = css({
_hover: {
color: "textBlack",
},
_pressed: {
_active: {
background: "monoBackgroundPressed",
color: "sub",
},
Expand Down
70 changes: 0 additions & 70 deletions packages/wow-ui/src/hooks/useButton.ts
View file
Open in desktop

This file was deleted.

Loading