feat: add omit signal class util

Co-authored-by: Naor Peled <[email protected]>
Co-authored-by: Wout Mertens <[email protected]>

Author: 3 people

packages/kit-fluffy/src/components/button/button.tsx

@@ -56,25 +56,25 @@ export const buttonVariants = cva(
         primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        link: 'text-primary underline-offset-4 hover:underline'
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       look: {
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground'
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
       },
       size: {
         default: 'h-10 px-4 py-2',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10'
-      }
+        icon: 'h-10 w-10',
+      },
     },
     defaultVariants: {
       intent: 'primary',
-      size: 'default'
-    }
-  }
+      size: 'default',
+    },
+  },
 );
 
 export type ButtonProps = AddVariantPropsTo<'button', typeof buttonVariants>;

packages/kit-tailwind/src/components/button-group/button-group.tsx

@@ -1,7 +1,9 @@
-import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
+import { HTMLAttributes, Slot, component$ } from '@builder.io/qwik';
 import { ButtonGroup as HeadlessButtonGroup } from '@qwik-ui/headless';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import type { OmitSignalClass } from '../../../../shared/src/utils';
 
-export type ButtonGroupProps = HTMLAttributes<HTMLElement>;
+export type ButtonGroupProps = OmitSignalClass<HTMLAttributes<HTMLElement>>;
 
 // TODO: discuss this
 

packages/kit-tailwind/src/components/button/button.tsx

@@ -50,22 +50,22 @@ export const Button = component$((props: ButtonProps) => {
   return (
     <button
       {...rest}
-      // class={[
-      //   'btn',
-      //   variants[variant],
-      //   sizes[size],
-      //   {
-      //     [options.active]: active,
-      //     [options.outline]: outline,
-      //     [options.disabled]: disabled,
-      //     [options.glass]: glass,
-      //     [options.loading]: loading,
-      //     [options.noAnimation]: noAnimation,
-      //     [options.circle]: circle,
-      //     [options.square]: square,
-      //   },
-      //   classNames,
-      // ]}
+      class={[
+        'btn',
+        variants[variant],
+        sizes[size],
+        {
+          [options.active]: active,
+          [options.outline]: outline,
+          [options.disabled]: disabled,
+          [options.glass]: glass,
+          [options.loading]: loading,
+          [options.noAnimation]: noAnimation,
+          [options.circle]: circle,
+          [options.square]: square,
+        },
+        classNames,
+      ]}
     >
       <Slot />
     </button>

packages/shared/src/utils/omit-signal-class.ts

@@ -0,0 +1,3 @@
+import { ClassList } from '@builder.io/qwik';
+
+export type OmitSignalClass<T> = Omit<T, 'class'> & { class?: ClassList };