fix: add type="button" to button with no asChild

Author: ivan-dalmet

app/components/ui/button.tsx

@@ -72,6 +72,7 @@ function Button({
   return (
     <Comp
       data-slot="button"
+      type={!asChild ? 'button' : undefined}
       className={cn(buttonVariants({ variant, size, className }))}
       disabled={loading || disabled}
       {...props}

app/components/ui/calendar.tsx

@@ -209,7 +209,6 @@ function Nav({ className }: NavProps) {
       <Button
         variant="secondary"
         className="absolute left-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100"
-        type="button"
         tabIndex={isPreviousDisabled ? undefined : -1}
         disabled={isPreviousDisabled}
         aria-label={labelPrevious(previousMonth)}
@@ -221,7 +220,6 @@ function Nav({ className }: NavProps) {
       <Button
         variant="secondary"
         className="absolute right-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100"
-        type="button"
         tabIndex={isNextDisabled ? undefined : -1}
         disabled={isNextDisabled}
         aria-label={labelNext(nextMonth)}

app/components/ui/confirm-responsive-drawer.stories.tsx

@@ -11,7 +11,7 @@ export default {
 export function Default() {
   return (
     <ConfirmResponsiveDrawer onConfirm={() => alert('Custom Action')}>
-      <Button type="button">Confirm</Button>
+      <Button>Confirm</Button>
     </ConfirmResponsiveDrawer>
   );
 }
@@ -25,7 +25,7 @@ export function WithCustomProps() {
       confirmText="Custom Text"
       confirmVariant="destructive"
     >
-      <Button type="button">Trigger Modal</Button>
+      <Button>Trigger Modal</Button>
     </ConfirmResponsiveDrawer>
   );
 }
@@ -46,7 +46,7 @@ export function EnabledProps() {
         onConfirm={() => alert('Custom Action')}
         enabled={enabled}
       >
-        <Button type="button">{enabled ? 'Confirm' : 'Without confirm'}</Button>
+        <Button>{enabled ? 'Confirm' : 'Without confirm'}</Button>
       </ConfirmResponsiveDrawer>
     </div>
   );
@@ -57,7 +57,7 @@ export function WithPromise() {
     <ConfirmResponsiveDrawer
       onConfirm={async () => new Promise((r) => setTimeout(r, 2000))}
     >
-      <Button type="button">Confirm</Button>
+      <Button>Confirm</Button>
     </ConfirmResponsiveDrawer>
   );
 }

app/components/ui/confirm-responsive-drawer.tsx

@@ -98,18 +98,12 @@ export const ConfirmResponsiveDrawer = (props: {
           </ResponsiveDrawerHeader>
           <ResponsiveDrawerFooter>
             <ResponsiveDrawerClose asChild>
-              <Button
-                type="button"
-                size="lg"
-                variant="secondary"
-                className="max-sm:w-full"
-              >
+              <Button size="lg" variant="secondary" className="max-sm:w-full">
                 {props.cancelText ??
                   t('components:confirmResponsiveDrawer.cancelText')}
               </Button>
             </ResponsiveDrawerClose>
             <Button
-              type="button"
               size="lg"
               variant={props.confirmVariant ?? 'default'}
               className="max-sm:w-full"

app/components/ui/datalist.stories.tsx

@@ -189,7 +189,7 @@ export const EmptyState = () => {
         <DataListEmptyState>
           <div className="flex flex-col items-center justify-center gap-x-2 gap-y-1">
             <p className="self-center">Let&apos;s add your first user</p>
-            <Button type="button" variant="ghost" size="sm">
+            <Button variant="ghost" size="sm">
               <PlusIcon />
               New User
             </Button>
@@ -269,7 +269,7 @@ const ExampleMenu = () => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button type="button" size="icon-sm" variant="ghost" className="-m-1">
+        <Button size="icon-sm" variant="ghost" className="-m-1">
           <EllipsisIcon />
         </Button>
       </DropdownMenuTrigger>

app/components/ui/datalist.tsx

@@ -142,7 +142,7 @@ export const DataListErrorState = ({
           <div className="flex w-full flex-col items-center gap-x-2 gap-y-1 text-muted-foreground">
             {!!children && <div className="text-sm">{children}</div>}
             {!!retry && (
-              <Button type="button" variant="ghost" size="sm" onClick={retry}>
+              <Button variant="ghost" size="sm" onClick={retry}>
                 <LucideRefreshCw />
                 {t('components:datalist.retry')}
               </Button>
@@ -169,7 +169,6 @@ export const DataListRowResults = (props: {
           </DataListText>
           {!!props.withClearButton && (
             <Button
-              type="button"
               variant="ghost"
               size="xs"
               onClick={() => {

app/components/ui/dropdown-menu.stories.tsx

@@ -18,9 +18,7 @@ export const Default = () => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="secondary" type="button">
-          Open
-        </Button>
+        <Button variant="secondary">Open</Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuLabel>My Account</DropdownMenuLabel>

app/components/ui/local-switcher.tsx

@@ -19,7 +19,6 @@ export const LocalSwitcher = (props: { iconOnly?: boolean }) => {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
-          type="button"
           variant={props.iconOnly ? 'ghost' : 'link'}
           size={props.iconOnly ? 'icon' : 'default'}
         >

app/components/ui/search-button.tsx

@@ -41,7 +41,7 @@ const SearchButtonComponent = ({
       }}
     >
       <DrawerTrigger asChild>
-        <Button type="button" size="icon" variant="ghost" {...props}>
+        <Button size="icon" variant="ghost" {...props}>
           {loading ? <Spinner /> : <SearchIcon />}
           <span className="sr-only">Search</span> {/* TODO translation */}
         </Button>

app/components/ui/theme-switcher.tsx

@@ -40,7 +40,6 @@ export const ThemeSwitcher = (props: { iconOnly?: boolean }) => {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
-          type="button"
           variant={props.iconOnly ? 'ghost' : 'link'}
           size={props.iconOnly ? 'icon' : 'default'}
         >