fix chips

daangn · Oct 10, 2024 · ab396e3 · ab396e3
1 parent 8ea3c2e
commit ab396e3
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 11 deletions.
diff --git a/component-docs/public/__mdx__/component/action-chip.mdx b/component-docs/public/__mdx__/component/action-chip.mdx
@@ -12,6 +12,8 @@ export interface ActionChipProps
   prefixIcon?: React.ReactNode;
 
   suffixIcon?: React.ReactNode;
+
+  asChild?: boolean;
 }
 
 export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
@@ -23,21 +25,23 @@ export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
       children,
       prefixIcon,
       suffixIcon,
+      asChild = false,
       ...otherProps
     },
     ref,
   ) => {
+    const Comp = asChild ? Slot : "button";
     const classNames = actionChip({ size, layout });
     return (
-      <button ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
+      <Comp ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
         {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}
         {layout === "withText" ? (
           <span className={classNames.label}>{children}</span>
         ) : (
           <Slot className={classNames.icon}>{children}</Slot>
         )}
         {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}
-      </button>
+      </Comp>
     );
   },
 );

diff --git a/component-docs/public/__mdx__/component/control-chip.mdx b/component-docs/public/__mdx__/component/control-chip.mdx
@@ -31,16 +31,28 @@ const ControlChipToggle = React.forwardRef<HTMLInputElement, ControlChipTogglePr
     ref,
   ) => {
     const classNames = controlChip({ size, layout });
-    const { rootProps, hiddenInputProps, restProps } = useCheckbox(otherProps);
+    const { rootProps, hiddenInputProps, stateProps, restProps } = useCheckbox(otherProps);
     return (
       <label {...rootProps} className={clsx(classNames.root, className)}>
-        {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}
+        {prefixIcon && (
+          <Slot {...stateProps} className={classNames.prefix}>
+            {prefixIcon}
+          </Slot>
+        )}
         {layout === "withText" ? (
-          <span className={classNames.label}>{children}</span>
+          <span {...stateProps} className={classNames.label}>
+            {children}
+          </span>
         ) : (
-          <Slot className={classNames.icon}>{children}</Slot>
+          <Slot {...stateProps} className={classNames.icon}>
+            {children}
+          </Slot>
+        )}
+        {suffixIcon && (
+          <Slot {...stateProps} className={classNames.suffix}>
+            {suffixIcon}
+          </Slot>
         )}
-        {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}
         <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />
       </label>
     );

diff --git a/component-docs/public/__registry__/component/action-chip.json b/component-docs/public/__registry__/component/action-chip.json
@@ -6,7 +6,7 @@
   "registries": [
     {
       "name": "action-chip.tsx",
-      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { actionChip, type ActionChipVariantProps } from \"@seed-design/recipe/actionChip\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/actionChip.css\";\n\nexport interface ActionChipProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    ActionChipVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n}\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  (\n    {\n      className,\n      size = \"medium\",\n      layout = \"withText\",\n      children,\n      prefixIcon,\n      suffixIcon,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const classNames = actionChip({ size, layout });\n    return (\n      <button ref={ref} className={clsx(classNames.root, className)} {...otherProps}>\n        {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}\n        {layout === \"withText\" ? (\n          <span className={classNames.label}>{children}</span>\n        ) : (\n          <Slot className={classNames.icon}>{children}</Slot>\n        )}\n        {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}\n      </button>\n    );\n  },\n);\nActionChip.displayName = \"ActionChip\";\n"
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { actionChip, type ActionChipVariantProps } from \"@seed-design/recipe/actionChip\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/actionChip.css\";\n\nexport interface ActionChipProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    ActionChipVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n\n  asChild?: boolean;\n}\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  (\n    {\n      className,\n      size = \"medium\",\n      layout = \"withText\",\n      children,\n      prefixIcon,\n      suffixIcon,\n      asChild = false,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const classNames = actionChip({ size, layout });\n    return (\n      <Comp ref={ref} className={clsx(classNames.root, className)} {...otherProps}>\n        {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}\n        {layout === \"withText\" ? (\n          <span className={classNames.label}>{children}</span>\n        ) : (\n          <Slot className={classNames.icon}>{children}</Slot>\n        )}\n        {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}\n      </Comp>\n    );\n  },\n);\nActionChip.displayName = \"ActionChip\";\n"
     }
   ],
   "type": "component"

diff --git a/component-docs/public/__registry__/component/control-chip.json b/component-docs/public/__registry__/component/control-chip.json
@@ -6,7 +6,7 @@
   "registries": [
     {
       "name": "control-chip.tsx",
-      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { controlChip, type ControlChipVariantProps } from \"@seed-design/recipe/controlChip\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/controlChip.css\";\nimport { UseCheckboxProps, useCheckbox } from \"@seed-design/react-checkbox\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nexport interface ControlChipToggleProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    UseCheckboxProps,\n    ControlChipVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n}\n\nconst ControlChipToggle = React.forwardRef<HTMLInputElement, ControlChipToggleProps>(\n  (\n    {\n      className,\n      size = \"medium\",\n      layout = \"withText\",\n      children,\n      prefixIcon,\n      suffixIcon,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const classNames = controlChip({ size, layout });\n    const { rootProps, hiddenInputProps, restProps } = useCheckbox(otherProps);\n    return (\n      <label {...rootProps} className={clsx(classNames.root, className)}>\n        {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}\n        {layout === \"withText\" ? (\n          <span className={classNames.label}>{children}</span>\n        ) : (\n          <Slot className={classNames.icon}>{children}</Slot>\n        )}\n        {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}\n        <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />\n      </label>\n    );\n  },\n);\nControlChipToggle.displayName = \"ControlChip.Toggle\";\n\nexport const ControlChip = Object.assign(\n  () => {\n    console.warn(\n      \"ControlChip is a base component and should not be rendered. Use ControlChip.Toggle or ControlChip.Radio instead.\",\n    );\n  },\n  {\n    Toggle: ControlChipToggle,\n  },\n);\n"
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { controlChip, type ControlChipVariantProps } from \"@seed-design/recipe/controlChip\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/controlChip.css\";\nimport { UseCheckboxProps, useCheckbox } from \"@seed-design/react-checkbox\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nexport interface ControlChipToggleProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    UseCheckboxProps,\n    ControlChipVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n}\n\nconst ControlChipToggle = React.forwardRef<HTMLInputElement, ControlChipToggleProps>(\n  (\n    {\n      className,\n      size = \"medium\",\n      layout = \"withText\",\n      children,\n      prefixIcon,\n      suffixIcon,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const classNames = controlChip({ size, layout });\n    const { rootProps, hiddenInputProps, stateProps, restProps } = useCheckbox(otherProps);\n    return (\n      <label {...rootProps} className={clsx(classNames.root, className)}>\n        {prefixIcon && (\n          <Slot {...stateProps} className={classNames.prefix}>\n            {prefixIcon}\n          </Slot>\n        )}\n        {layout === \"withText\" ? (\n          <span {...stateProps} className={classNames.label}>\n            {children}\n          </span>\n        ) : (\n          <Slot {...stateProps} className={classNames.icon}>\n            {children}\n          </Slot>\n        )}\n        {suffixIcon && (\n          <Slot {...stateProps} className={classNames.suffix}>\n            {suffixIcon}\n          </Slot>\n        )}\n        <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />\n      </label>\n    );\n  },\n);\nControlChipToggle.displayName = \"ControlChip.Toggle\";\n\nexport const ControlChip = Object.assign(\n  () => {\n    console.warn(\n      \"ControlChip is a base component and should not be rendered. Use ControlChip.Toggle or ControlChip.Radio instead.\",\n    );\n  },\n  {\n    Toggle: ControlChipToggle,\n  },\n);\n"
     }
   ],
   "type": "component"

diff --git a/component-docs/snippets/component/action-chip.tsx b/component-docs/snippets/component/action-chip.tsx
@@ -11,6 +11,8 @@ export interface ActionChipProps
   prefixIcon?: React.ReactNode;
 
   suffixIcon?: React.ReactNode;
+
+  asChild?: boolean;
 }
 
 export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
@@ -22,21 +24,23 @@ export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
       children,
       prefixIcon,
       suffixIcon,
+      asChild = false,
       ...otherProps
     },
     ref,
   ) => {
+    const Comp = asChild ? Slot : "button";
     const classNames = actionChip({ size, layout });
     return (
-      <button ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
+      <Comp ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
         {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}
         {layout === "withText" ? (
           <span className={classNames.label}>{children}</span>
         ) : (
           <Slot className={classNames.icon}>{children}</Slot>
         )}
         {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}
-      </button>
+      </Comp>
     );
   },
 );