From 814bd4e39022d865f0d7f4ff79ff704ce55ddb68 Mon Sep 17 00:00:00 2001 From: Joo Chanhwi <56245920+te6-in@users.noreply.github.com> Date: Wed, 8 Jan 2025 11:07:01 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20Text=20Button=20=EB=A0=88=EC=8B=9C?= =?UTF-8?q?=ED=94=BC=EC=97=90=20cursor=20=EC=86=8D=EC=84=B1=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20(#503)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Text Button 레시피에 cursor 속성 추가 * refactor: Text Button styled 레이어 작성 * docs: Text Button 스토리 conditionMap 추가, status → state --- .../react/components/segmented-control.mdx | 7 ++- .../docs/react/components/text-button.mdx | 4 +- .../text-fields/multiline-text-field.mdx | 7 ++- .../components/text-fields/text-field.mdx | 7 ++- docs/registry/ui/text-button.tsx | 57 ++++--------------- docs/stories/TextButton.stories.tsx | 14 ++++- .../qvism-preset/src/text-button.recipe.ts | 2 + .../TextButton/TextButton.namespace.ts | 10 ++++ .../src/components/TextButton/TextButton.tsx | 41 +++++++++++++ .../react/src/components/TextButton/index.ts | 12 ++++ packages/react/src/components/index.ts | 1 + packages/stylesheet/textButton.css | 1 + 12 files changed, 107 insertions(+), 56 deletions(-) create mode 100644 packages/react/src/components/TextButton/TextButton.namespace.ts create mode 100644 packages/react/src/components/TextButton/TextButton.tsx create mode 100644 packages/react/src/components/TextButton/index.ts diff --git a/docs/content/docs/react/components/segmented-control.mdx b/docs/content/docs/react/components/segmented-control.mdx index 326f39f27..491b1d6db 100644 --- a/docs/content/docs/react/components/segmented-control.mdx +++ b/docs/content/docs/react/components/segmented-control.mdx @@ -25,11 +25,14 @@ title: Segmented Control ### `Segment` - + ## 예제 -### Status +### State #### Disabled diff --git a/docs/content/docs/react/components/text-button.mdx b/docs/content/docs/react/components/text-button.mdx index 1c3903ec1..96581e0d3 100644 --- a/docs/content/docs/react/components/text-button.mdx +++ b/docs/content/docs/react/components/text-button.mdx @@ -14,7 +14,7 @@ title: Text Button ## 예제 -### Status +### State #### Disabled @@ -44,7 +44,7 @@ title: Text Button -### Variant +### Tone #### Brand diff --git a/docs/content/docs/react/components/text-fields/multiline-text-field.mdx b/docs/content/docs/react/components/text-fields/multiline-text-field.mdx index af321c26c..7bd4b8b3c 100644 --- a/docs/content/docs/react/components/text-fields/multiline-text-field.mdx +++ b/docs/content/docs/react/components/text-fields/multiline-text-field.mdx @@ -17,11 +17,14 @@ description: 사용자가 입력할 수 있는 텍스트를 받는 컴포넌트 ### `TextFieldTextarea` - + ## 예제 -### Status +### State #### Enabled diff --git a/docs/content/docs/react/components/text-fields/text-field.mdx b/docs/content/docs/react/components/text-fields/text-field.mdx index df7e48dd1..19b164df0 100644 --- a/docs/content/docs/react/components/text-fields/text-field.mdx +++ b/docs/content/docs/react/components/text-fields/text-field.mdx @@ -17,11 +17,14 @@ description: 사용자가 입력할 수 있는 텍스트를 받는 컴포넌트 ### `TextFieldInput` - + ## 예제 -### Status +### State #### Enabled diff --git a/docs/registry/ui/text-button.tsx b/docs/registry/ui/text-button.tsx index ab4a8d5d9..b9de30bb8 100644 --- a/docs/registry/ui/text-button.tsx +++ b/docs/registry/ui/text-button.tsx @@ -2,63 +2,26 @@ import "@seed-design/stylesheet/textButton.css"; +import { TextButton as SeedTextButton } from "@seed-design/react"; import * as React from "react"; -import clsx from "clsx"; -import { - textButton, - type TextButtonVariantProps, -} from "@seed-design/recipe/textButton"; -import { Slot } from "@radix-ui/react-slot"; -export type TextButtonProps = TextButtonVariantProps & - React.ButtonHTMLAttributes & - ({ - /** - * @default false - */ - asChild?: boolean; - } & ( +export type TextButtonProps = SeedTextButton.RootProps & + ( | { prefixIcon: React.ReactNode; suffixIcon?: never } | { prefixIcon?: never; suffixIcon: React.ReactNode } - )); + ); /** * @see https://v3.seed-design.io/docs/react/components/text-button */ export const TextButton = React.forwardRef( - ( - { - asChild = false, - className, - tone = "brand", - size = "medium", - prefixIcon, - suffixIcon, - children, - ...otherProps - }, - ref, - ) => { - const classNames = textButton({ tone, size }); - + ({ prefixIcon, suffixIcon, children, ...otherProps }, ref) => { return ( - + + {prefixIcon && } + {children} + {suffixIcon && } + ); }, ); diff --git a/docs/stories/TextButton.stories.tsx b/docs/stories/TextButton.stories.tsx index eaeb9e622..6c95d874e 100644 --- a/docs/stories/TextButton.stories.tsx +++ b/docs/stories/TextButton.stories.tsx @@ -16,13 +16,25 @@ export default meta; type Story = StoryObj; +const conditionMap = { + disabled: { + false: { disabled: false }, + true: { disabled: true }, + }, +}; + const CommonStoryTemplate: Story = { args: { children: "새 글", prefixIcon: , }, render: (args) => ( - + ), }; diff --git a/packages/qvism-preset/src/text-button.recipe.ts b/packages/qvism-preset/src/text-button.recipe.ts index e64e4bbf9..3c17537a9 100644 --- a/packages/qvism-preset/src/text-button.recipe.ts +++ b/packages/qvism-preset/src/text-button.recipe.ts @@ -23,6 +23,8 @@ const textButton = defineRecipe({ WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale", + cursor: "pointer", + [pseudo(disabled)]: { color: vars.base.disabled.root.color, cursor: "not-allowed", diff --git a/packages/react/src/components/TextButton/TextButton.namespace.ts b/packages/react/src/components/TextButton/TextButton.namespace.ts new file mode 100644 index 000000000..f2007cfdd --- /dev/null +++ b/packages/react/src/components/TextButton/TextButton.namespace.ts @@ -0,0 +1,10 @@ +export { + TextButtonLabel as Label, + TextButtonPrefixIcon as PrefixIcon, + TextButtonRoot as Root, + TextButtonSuffixIcon as SuffixIcon, + type TextButtonLabelProps as LabelProps, + type TextButtonPrefixIconProps as PrefixIconProps, + type TextButtonRootProps as RootProps, + type TextButtonSuffixIconProps as SuffixIconProps, +} from "./TextButton"; diff --git a/packages/react/src/components/TextButton/TextButton.tsx b/packages/react/src/components/TextButton/TextButton.tsx new file mode 100644 index 000000000..79f502c9b --- /dev/null +++ b/packages/react/src/components/TextButton/TextButton.tsx @@ -0,0 +1,41 @@ +import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive"; +import { textButton, type TextButtonVariantProps } from "@seed-design/recipe/textButton"; +import { createStyleContext } from "../../utils/createStyleContext"; +import { Icon, type IconProps } from "../private/Icon"; + +import type * as React from "react"; + +const { withProvider, withContext } = createStyleContext(textButton); + +export interface TextButtonRootProps + extends TextButtonVariantProps, + PrimitiveProps, + React.ButtonHTMLAttributes {} + +export const TextButtonRoot = withProvider( + Primitive.button, + "root", +); + +export interface TextButtonLabelProps + extends PrimitiveProps, + React.HTMLAttributes {} + +export const TextButtonLabel = withContext( + Primitive.span, + "label", +); + +export interface TextButtonPrefixIconProps extends IconProps {} + +export const TextButtonPrefixIcon = withContext( + Icon, + "prefixIcon", +); + +export interface TextButtonSuffixIconProps extends IconProps {} + +export const TextButtonSuffixIcon = withContext( + Icon, + "suffixIcon", +); diff --git a/packages/react/src/components/TextButton/index.ts b/packages/react/src/components/TextButton/index.ts new file mode 100644 index 000000000..e6a6171bd --- /dev/null +++ b/packages/react/src/components/TextButton/index.ts @@ -0,0 +1,12 @@ +export { + TextButtonLabel, + TextButtonPrefixIcon, + TextButtonRoot, + TextButtonSuffixIcon, + type TextButtonLabelProps, + type TextButtonPrefixIconProps, + type TextButtonRootProps, + type TextButtonSuffixIconProps, +} from "./TextButton"; + +export * as TextButton from "./TextButton.namespace"; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 49e8e9346..61781bcd5 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -17,6 +17,7 @@ export * from "./SelectBox"; export * from "./Skeleton"; export * from "./Switch"; export * from "./Text"; +export * from "./TextButton"; export * from "./TextField"; export * from "./ToggleButton"; export * from "./VisuallyHidden"; diff --git a/packages/stylesheet/textButton.css b/packages/stylesheet/textButton.css index 8a2cc261f..c9c46b08d 100644 --- a/packages/stylesheet/textButton.css +++ b/packages/stylesheet/textButton.css @@ -10,6 +10,7 @@ border-style: solid; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + cursor: pointer; } .textButton__root:is(:disabled, [disabled], [data-disabled]) { color: var(--seed-v3-color-fg-disabled);