fix: add type property to buttons (#1970)

### What does it do?

Buttons elements should have a default type set to button to avoid
catching the focus when hitting Enter in forms.
Made it a prop so it's still possible to change it manually for `submit`
or `reset`.

### Why is it needed?

Currently in the CMS, when we hit the Enter key on a field, it's
triggering the first button of the form (which is the Fill in from
another locale modal in the case of a localized entry or the first
button that could be pretty much anything in the form in all other
cases).

### How to test it?

- Go to Storybook > Components > Button, IconButton or TextButton
(LinkButton are not concerned because they are <a> tags)
- Inspect the button element
-> The element should have a `type="button"` attribute by default

### Related issue(s)/PR(s)

Will be part of the fix for
strapi/strapi#21377

🚀

Author: HichamELBSI

packages/design-system/src/components/Button/Button.tsx

@@ -20,6 +20,7 @@ type ButtonProps<C extends React.ElementType = 'button'> = FlexProps<C> & {
   size?: ButtonSize;
   startIcon?: React.ReactNode;
   variant?: ButtonVariant;
+  type?: 'button' | 'submit' | 'reset';
 };
 
 const Button = forwardRef(
@@ -34,6 +35,7 @@ const Button = forwardRef(
       size = BUTTON_SIZES[1],
       loading = false,
       fullWidth = false,
+      type = 'button',
       ...props
     }: ButtonProps<C>,
     ref: PolymorphicRef<C>,
@@ -46,6 +48,10 @@ const Button = forwardRef(
       }
     };
 
+    // Only forward the `type` attribute when we actually render a native button
+    const asTag = (props as { tag?: React.ElementType }).tag ?? 'button';
+    const buttonType = asTag === 'button' || asTag === 'input' ? type : undefined;
+
     return (
       <ButtonWrapper
         ref={ref}
@@ -64,6 +70,7 @@ const Button = forwardRef(
         paddingLeft={4}
         paddingRight={4}
         cursor="pointer"
+        type={buttonType}
         {...props}
       >
         {(startIcon || loading) && (

packages/design-system/src/components/IconButton/IconButton.tsx

@@ -11,7 +11,7 @@ import { getActiveStyle, getDisabledStyle, getHoverStyle, getVariantStyle } from
 import { Tooltip } from '../Tooltip';
 
 type IconButtonProps<C extends React.ElementType = 'button'> = FlexProps<C> &
-  Pick<ButtonProps, 'size' | 'variant'> & {
+  Pick<ButtonProps, 'size' | 'variant' | 'type'> & {
     children: React.ReactNode;
     disabled?: boolean;
     /**
@@ -36,6 +36,7 @@ const IconButton = forwardRef(
       size = 'S',
       variant = 'tertiary',
       withTooltip = true,
+      type = 'button',
       ...restProps
     }: IconButtonProps<C>,
     ref: PolymorphicRef<C>,
@@ -60,6 +61,7 @@ const IconButton = forwardRef(
         $size={size}
         onClick={handleClick}
         $variant={variant}
+        type={type}
       >
         <AccessibleIcon label={label}>{children}</AccessibleIcon>
       </IconButtonWrapper>

packages/design-system/src/components/TextButton/TextButton.tsx

@@ -14,11 +14,12 @@ type TextButtonProps<C extends React.ElementType = 'button'> = FlexProps<C> & {
   endIcon?: React.ReactNode;
   loading?: boolean;
   startIcon?: React.ReactNode;
+  type?: 'button' | 'submit' | 'reset';
 };
 
 const TextButton = forwardRef(
   <C extends React.ElementType = 'button'>(
-    { children, startIcon, endIcon, disabled = false, loading = false, ...props }: TextButtonProps<C>,
+    { children, startIcon, endIcon, disabled = false, loading = false, type = 'button', ...props }: TextButtonProps<C>,
     ref: PolymorphicRef<C>,
   ) => {
     const isDisabled = disabled || loading;
@@ -29,7 +30,7 @@ const TextButton = forwardRef(
         disabled={isDisabled}
         aria-disabled={isDisabled}
         tag="button"
-        type="button"
+        type={type}
         gap={2}
         {...props}
       >