feat: Text Button 레시피에 cursor 속성 추가 (#503)

* feat: Text Button 레시피에 cursor 속성 추가 * refactor: Text Button styled 레이어 작성 * docs: Text Button 스토리 conditionMap 추가, status → state
daangn · Jan 8, 2025 · 814bd4e · 814bd4e
1 parent 22a13b9
commit 814bd4e
Show file tree

Hide file tree

Showing 12 changed files with 107 additions and 56 deletions.
diff --git 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`
 
-<ReactTypeTable path="./registry/ui/segmented-control.tsx" name="SegmentProps" />
+<ReactTypeTable
+  path="./registry/ui/segmented-control.tsx"
+  name="SegmentProps"
+/>
 
 ## 예제
 
-### Status
+### State
 
 #### Disabled
 

diff --git 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
 
 <ComponentExample name="text-button-small" />
 
-### 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
@@ -17,11 +17,14 @@ description: 사용자가 입력할 수 있는 텍스트를 받는 컴포넌트
 
 ### `TextFieldTextarea`
 
-<ReactTypeTable path="./registry/ui/text-field.tsx" name="TextFieldTextareaProps" />
+<ReactTypeTable
+  path="./registry/ui/text-field.tsx"
+  name="TextFieldTextareaProps"
+/>
 
 ## 예제
 
-### 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
@@ -17,11 +17,14 @@ description: 사용자가 입력할 수 있는 텍스트를 받는 컴포넌트
 
 ### `TextFieldInput`
 
-<ReactTypeTable path="./registry/ui/text-field.tsx" name="TextFieldInputProps" />
+<ReactTypeTable
+  path="./registry/ui/text-field.tsx"
+  name="TextFieldInputProps"
+/>
 
 ## 예제
 
-### Status
+### State
 
 #### Enabled
 

diff --git 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<HTMLButtonElement> &
-  ({
-    /**
-     * @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<HTMLButtonElement, TextButtonProps>(
-  (
-    {
-      asChild = false,
-      className,
-      tone = "brand",
-      size = "medium",
-      prefixIcon,
-      suffixIcon,
-      children,
-      ...otherProps
-    },
-    ref,
-  ) => {
-    const classNames = textButton({ tone, size });
-
+  ({ prefixIcon, suffixIcon, children, ...otherProps }, ref) => {
     return (
-      <button
-        ref={ref}
-        className={clsx(classNames.root, className)}
-        {...otherProps}
-      >
-        {prefixIcon && (
-          <Slot aria-hidden className={classNames.prefixIcon}>
-            {prefixIcon}
-          </Slot>
-        )}
-        <span className={classNames.label}>{children}</span>
-        {suffixIcon && (
-          <Slot aria-hidden className={classNames.suffixIcon}>
-            {suffixIcon}
-          </Slot>
-        )}
-      </button>
+      <SeedTextButton.Root ref={ref} {...otherProps}>
+        {prefixIcon && <SeedTextButton.PrefixIcon svg={prefixIcon} />}
+        <SeedTextButton.Label>{children}</SeedTextButton.Label>
+        {suffixIcon && <SeedTextButton.SuffixIcon svg={suffixIcon} />}
+      </SeedTextButton.Root>
     );
   },
 );

diff --git a/docs/stories/TextButton.stories.tsx b/docs/stories/TextButton.stories.tsx
@@ -16,13 +16,25 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const conditionMap = {
+  disabled: {
+    false: { disabled: false },
+    true: { disabled: true },
+  },
+};
+
 const CommonStoryTemplate: Story = {
   args: {
     children: "새 글",
     prefixIcon: <IconPlusCircleLine />,
   },
   render: (args) => (
-    <VariantTable Component={meta.component} variantMap={textButtonVariantMap} {...args} />
+    <VariantTable
+      Component={meta.component}
+      variantMap={textButtonVariantMap}
+      conditionMap={conditionMap}
+      {...args}
+    />
   ),
 };
 

diff --git 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
@@ -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
@@ -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<HTMLButtonElement> {}
+
+export const TextButtonRoot = withProvider<HTMLButtonElement, TextButtonRootProps>(
+  Primitive.button,
+  "root",
+);
+
+export interface TextButtonLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TextButtonLabel = withContext<HTMLSpanElement, TextButtonLabelProps>(
+  Primitive.span,
+  "label",
+);
+
+export interface TextButtonPrefixIconProps extends IconProps {}
+
+export const TextButtonPrefixIcon = withContext<SVGSVGElement, TextButtonPrefixIconProps>(
+  Icon,
+  "prefixIcon",
+);
+
+export interface TextButtonSuffixIconProps extends IconProps {}
+
+export const TextButtonSuffixIcon = withContext<SVGSVGElement, TextButtonSuffixIconProps>(
+  Icon,
+  "suffixIcon",
+);
diff --git a/packages/react/src/components/TextButton/index.ts 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
@@ -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
@@ -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);