@hyphen/hyphen-components 4.1.0 → 4.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/Button/Button.mdx

@@ -18,9 +18,6 @@ Actions almost always occur on the same page.
 
 <ArgTypes of={Button} />
 
-## As Child
-
-Apply the `asChild` prop to apply the button styles to a child element.
 
 <Canvas of={Stories.AsChild} />
 
@@ -76,3 +73,6 @@ The interface should make it clear why the button is disabled and what needs to
 
 <Canvas of={Stories.Disabled} />
 
+## As Child
+
+Apply the `asChild` prop to apply the button styles to a child element.

package/src/components/Button/Button.test.tsx

@@ -392,6 +392,15 @@ describe('Button', () => {
       expect(linkElement).toBeInTheDocument();
       expect(linkElement).toHaveAttribute('href', 'https://ux.hyphen.ai');
     });
+
+    test('does not render type prop when asChild is true', () => {
+      renderButton({
+        asChild: true,
+        children: <a href="https://ux.hyphen.ai">Link Button</a>,
+      });
+      const linkElement = screen.getByRole('link');
+      expect(linkElement).not.toHaveAttribute('type');
+    });
   });
 
   describe('Button Type', () => {

package/src/components/Button/Button.tsx

@@ -49,6 +49,11 @@ export interface BaseButtonProps {
    * Size of the button.
    */
   size?: ButtonSize | ResponsiveProp<ButtonSize>;
+  /**
+   * The type of button
+   *
+   */
+  type?: 'button' | 'submit' | 'reset';
   /**
    * Visual variant of the button
    */
@@ -74,6 +79,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onFocus,
       shadow,
       size = 'md',
+      type = 'button',
       variant = 'primary',
       ...restProps
     },
@@ -113,6 +119,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         onBlur={handleBlur}
         onFocus={handleFocus}
         ref={ref}
+        {...(!asChild && {
+          type,
+        })}
         {...restProps}
       >
         {isLoading && <Spinner className={styles['spinner-wrapper']} />}

package/src/components/Modal/components/ModalHeader/ModalHeader.tsx

@@ -47,6 +47,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
           onClick={onDismiss}
           iconPrefix="remove"
           size="sm"
+          type="button"
         />
       )}
     </Box>