fix: solve SfButton issue (#37)

Author: gioboa

packages/qwik-storefront-ui/src/components/SfButton/SfButton.tsx

@@ -18,14 +18,25 @@ export const getSizeClasses = (
 ) => {
   switch (size) {
     case SfButtonSize.sm:
-      return [square ? 'p-1.5' : 'leading-5 text-sm py-1.5 px-3', 'gap-1.5'];
+      return [
+        square ? 'p-1.5' : 'leading-5 text-sm py-1.5 px-3',
+        'gap-1.5',
+      ].join(' ');
     case SfButtonSize.lg:
-      return [square ? 'p-4' : 'py-3 leading-6 px-6', 'gap-3'];
+      return [square ? 'p-4' : 'py-3 leading-6 px-6', 'gap-3'].join(' ');
     default:
-      return [square ? 'p-2' : 'py-2 leading-6 px-4', 'gap-2'];
+      return [square ? 'p-2' : 'py-2 leading-6 px-4', 'gap-2'].join(' ');
   }
 };
 
+const Button = component$((attributes) => {
+  return (
+    <button {...attributes}>
+      <Slot />
+    </button>
+  );
+});
+
 export const SfButton = component$<SfButtonProps>(
   ({
     as,
@@ -36,18 +47,15 @@ export const SfButton = component$<SfButtonProps>(
     slotSuffix,
     variant = SfButtonVariant.primary,
     square,
+    type,
     ...attributes
   }) => {
-    const Tag = as || defaultButtonTag;
+    const Tag = as || Button;
 
     return (
       <Tag
         {...(ref ? { ref } : {})}
-        type={
-          typeof Tag === 'string' && Tag.toLowerCase() === 'button'
-            ? 'button'
-            : undefined
-        }
+        type={type}
         class={[
           'inline-flex items-center justify-center font-medium text-base focus-visible:outline focus-visible:outline-offset rounded-md disabled:text-disabled-500 disabled:bg-disabled-300 disabled:shadow-none disabled:ring-0 disabled:cursor-not-allowed',
           getSizeClasses(size, square),

packages/qwik-storefront-ui/src/components/SfButton/types.ts

@@ -5,16 +5,18 @@ import {
   Signal,
 } from '@builder.io/qwik';
 
-export type SfButtonProps = QwikIntrinsicElements['button'] &
-  QwikIntrinsicElements['a'] & {
+export type SfButtonProps = Omit<QwikIntrinsicElements['button'], 'type'> &
+  Omit<QwikIntrinsicElements['a'], 'type'> & {
     as?: any;
+    class?: string;
     ref?: Signal<Element | undefined>;
     size?: `${SfButtonSize}`;
     variant?: `${SfButtonVariant}`;
     slotPrefix?: boolean;
     slotSuffix?: boolean;
     disabled?: boolean;
     square?: boolean;
+    type?: 'button' | 'reset' | 'submit';
     onClick$?: PropFunction<
       (event: QwikMouseEvent<HTMLButtonElement, MouseEvent>) => void
     >;