fix: className prop passing in button components

daangn · Jan 4, 2025 · bfe9b13 · bfe9b13
1 parent d8726e9
commit bfe9b13
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 60 deletions.
diff --git a/docs/registry/ui/action-button.tsx b/docs/registry/ui/action-button.tsx
@@ -22,7 +22,6 @@ export const ActionButton = React.forwardRef<
 >(
   (
     {
-      className,
       loading = false,
       layout = "withText",
       prefixIcon,

diff --git a/docs/registry/ui/action-chip.tsx b/docs/registry/ui/action-chip.tsx
@@ -14,10 +14,7 @@ export interface ActionChipProps extends SeedActionChip.RootProps {
 }
 
 export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
-  (
-    { className, children, prefixIcon, suffixIcon, count, ...otherProps },
-    ref,
-  ) => {
+  ({ children, prefixIcon, suffixIcon, count, ...otherProps }, ref) => {
     return (
       <SeedActionChip.Root ref={ref} {...otherProps}>
         {otherProps.layout === "withText" ? (

diff --git a/docs/registry/ui/control-chip.tsx b/docs/registry/ui/control-chip.tsx
@@ -16,27 +16,22 @@ export interface ControlChipToggleProps extends SeedControlChip.RootProps {
 export const ControlChipToggle = React.forwardRef<
   HTMLLabelElement,
   ControlChipToggleProps
->(
-  (
-    { className, 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, ...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>
+  );
+});
 ControlChipToggle.displayName = "ControlChip.Toggle";
 
 export const ControlChip = Object.assign(

diff --git a/docs/registry/ui/extended-fab.tsx b/docs/registry/ui/extended-fab.tsx
@@ -15,7 +15,7 @@ export interface ExtendedFabProps extends SeedExtendedFab.RootProps {
 export const ExtendedFab = React.forwardRef<
   HTMLButtonElement,
   ExtendedFabProps
->(({ className, children, prefixIcon, ...otherProps }, ref) => {
+>(({ children, prefixIcon, ...otherProps }, ref) => {
   return (
     <SeedExtendedFab.Root ref={ref} {...otherProps}>
       {prefixIcon && <SeedExtendedFab.PrefixIcon svg={prefixIcon} />}

diff --git a/docs/registry/ui/fab.tsx b/docs/registry/ui/fab.tsx
@@ -11,7 +11,7 @@ export interface FabProps extends SeedFab.RootProps {}
  * @see https://v3.seed-design.io/docs/react/components/fab
  */
 export const Fab = React.forwardRef<HTMLButtonElement, FabProps>(
-  ({ className, children, ...otherProps }, ref) => {
+  ({ children, ...otherProps }, ref) => {
     if (!(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
       console.warn(
         "'aria-label' or 'aria-labelledby' should be provided in <Fab />.",

diff --git a/docs/registry/ui/reaction-button.tsx b/docs/registry/ui/reaction-button.tsx
@@ -19,21 +19,16 @@ export interface ReactionButtonProps extends SeedReactionButton.RootProps {
 export const ReactionButton = React.forwardRef<
   React.ElementRef<typeof SeedReactionButton.Root>,
   ReactionButtonProps
->(
-  (
-    { className, loading = false, prefixIcon, count, children, ...otherProps },
-    ref,
-  ) => {
-    return (
-      <SeedReactionButton.Root ref={ref} loading={loading} {...otherProps}>
-        {prefixIcon && <SeedReactionButton.PrefixIcon svg={prefixIcon} />}
-        <SeedReactionButton.Label>{children}</SeedReactionButton.Label>
-        <SeedReactionButton.Count>{count}</SeedReactionButton.Count>
-        {loading ? <SeedReactionButton.ProgressCircle /> : null}
-      </SeedReactionButton.Root>
-    );
-  },
-);
+>(({ loading = false, prefixIcon, count, children, ...otherProps }, ref) => {
+  return (
+    <SeedReactionButton.Root ref={ref} loading={loading} {...otherProps}>
+      {prefixIcon && <SeedReactionButton.PrefixIcon svg={prefixIcon} />}
+      <SeedReactionButton.Label>{children}</SeedReactionButton.Label>
+      <SeedReactionButton.Count>{count}</SeedReactionButton.Count>
+      {loading ? <SeedReactionButton.ProgressCircle /> : null}
+    </SeedReactionButton.Root>
+  );
+});
 ReactionButton.displayName = "ReactionButton";
 
 /**

diff --git a/docs/registry/ui/toggle-button.tsx b/docs/registry/ui/toggle-button.tsx
@@ -21,14 +21,7 @@ export const ToggleButton = React.forwardRef<
   ToggleButtonProps
 >(
   (
-    {
-      className,
-      loading = false,
-      prefixIcon,
-      suffixIcon,
-      children,
-      ...otherProps
-    },
+    { loading = false, prefixIcon, suffixIcon, children, ...otherProps },
     ref,
   ) => {
     return (

diff --git a/examples/stackflow-spa/src/design-system/ui/action-button.tsx b/examples/stackflow-spa/src/design-system/ui/action-button.tsx
@@ -21,15 +21,7 @@ export const ActionButton = React.forwardRef<
   ActionButtonProps
 >(
   (
-    {
-      className,
-      loading = false,
-      layout = "withText",
-      prefixIcon,
-      suffixIcon,
-      children,
-      ...otherProps
-    },
+    { loading = false, layout = "withText", prefixIcon, suffixIcon, children, ...otherProps },
     ref,
   ) => {
     return (