fix: chip snippet layout default

daangn · Jan 4, 2025 · 9843e61 · 9843e61
1 parent 654491c
commit 9843e61
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 25 deletions.
diff --git a/docs/registry/ui/action-chip.tsx b/docs/registry/ui/action-chip.tsx
@@ -14,10 +14,20 @@ export interface ActionChipProps extends SeedActionChip.RootProps {
 }
 
 export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
-  ({ children, prefixIcon, suffixIcon, count, ...otherProps }, ref) => {
+  (
+    {
+      children,
+      prefixIcon,
+      suffixIcon,
+      count,
+      layout = "withText",
+      ...otherProps
+    },
+    ref,
+  ) => {
     return (
-      <SeedActionChip.Root ref={ref} {...otherProps}>
-        {otherProps.layout === "withText" ? (
+      <SeedActionChip.Root ref={ref} layout={layout} {...otherProps}>
+        {layout === "withText" ? (
           <>
             {prefixIcon && <SeedActionChip.PrefixIcon svg={prefixIcon} />}
             <SeedActionChip.Label>{children}</SeedActionChip.Label>

diff --git a/docs/registry/ui/control-chip.tsx b/docs/registry/ui/control-chip.tsx
@@ -16,22 +16,34 @@ export interface ControlChipToggleProps extends SeedControlChip.RootProps {
 export const ControlChipToggle = React.forwardRef<
   HTMLLabelElement,
   ControlChipToggleProps
->(({ children, prefixIcon, suffixIcon, count, ...otherProps }, ref) => {
-  return (
-    <SeedControlChip.Root ref={ref} {...otherProps}>
-      {otherProps.layout === "withText" ? (
-        <>
-          {prefixIcon && <SeedControlChip.PrefixIcon svg={prefixIcon} />}
-          <SeedControlChip.Label>{children}</SeedControlChip.Label>
-          {count && <SeedControlChip.Count>{count}</SeedControlChip.Count>}
-          {suffixIcon && <SeedControlChip.SuffixIcon svg={suffixIcon} />}
-        </>
-      ) : (
-        <SeedControlChip.Icon svg={children} />
-      )}
-    </SeedControlChip.Root>
-  );
-});
+>(
+  (
+    {
+      children,
+      prefixIcon,
+      suffixIcon,
+      count,
+      layout = "withText",
+      ...otherProps
+    },
+    ref,
+  ) => {
+    return (
+      <SeedControlChip.Root ref={ref} layout={layout} {...otherProps}>
+        {layout === "withText" ? (
+          <>
+            {prefixIcon && <SeedControlChip.PrefixIcon svg={prefixIcon} />}
+            <SeedControlChip.Label>{children}</SeedControlChip.Label>
+            {count && <SeedControlChip.Count>{count}</SeedControlChip.Count>}
+            {suffixIcon && <SeedControlChip.SuffixIcon svg={suffixIcon} />}
+          </>
+        ) : (
+          <SeedControlChip.Icon svg={children} />
+        )}
+      </SeedControlChip.Root>
+    );
+  },
+);
 ControlChipToggle.displayName = "ControlChip.Toggle";
 
 export const ControlChip = Object.assign(

diff --git a/examples/stackflow-spa/src/design-system/ui/action-chip.tsx b/examples/stackflow-spa/src/design-system/ui/action-chip.tsx
@@ -14,10 +14,10 @@ export interface ActionChipProps extends SeedActionChip.RootProps {
 }
 
 export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
-  ({ className, children, prefixIcon, suffixIcon, count, ...otherProps }, ref) => {
+  ({ children, prefixIcon, suffixIcon, count, layout = "withText", ...otherProps }, ref) => {
     return (
-      <SeedActionChip.Root ref={ref} {...otherProps}>
-        {otherProps.layout === "withText" ? (
+      <SeedActionChip.Root ref={ref} layout={layout} {...otherProps}>
+        {layout === "withText" ? (
           <>
             {prefixIcon && <SeedActionChip.PrefixIcon svg={prefixIcon} />}
             <SeedActionChip.Label>{children}</SeedActionChip.Label>

diff --git a/examples/stackflow-spa/src/design-system/ui/control-chip.tsx b/examples/stackflow-spa/src/design-system/ui/control-chip.tsx
@@ -14,10 +14,10 @@ export interface ControlChipToggleProps extends SeedControlChip.RootProps {
 }
 
 export const ControlChipToggle = React.forwardRef<HTMLLabelElement, ControlChipToggleProps>(
-  ({ className, children, prefixIcon, suffixIcon, count, ...otherProps }, ref) => {
+  ({ children, prefixIcon, suffixIcon, count, layout = "withText", ...otherProps }, ref) => {
     return (
-      <SeedControlChip.Root ref={ref} {...otherProps}>
-        {otherProps.layout === "withText" ? (
+      <SeedControlChip.Root ref={ref} layout={layout} {...otherProps}>
+        {layout === "withText" ? (
           <>
             {prefixIcon && <SeedControlChip.PrefixIcon svg={prefixIcon} />}
             <SeedControlChip.Label>{children}</SeedControlChip.Label>