RAC: Allow form attributes in Button (#4452)

* expand Button prop types

* cleanup

* pass additional props and fix types

* revert types

* revert extra props merge

* remove | undefined

* Add test to verify we can pass through props

---------

Co-authored-by: Robert Snow <[email protected]>

Author: reidbarber

packages/react-aria-components/src/Button.tsx

@@ -11,6 +11,7 @@
  */
 import {AriaButtonProps, mergeProps, useButton, useFocusRing, useHover} from 'react-aria';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
+import {filterDOMProps} from '@react-aria/utils';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 
 export interface ButtonRenderProps {
@@ -41,11 +42,37 @@ export interface ButtonRenderProps {
   isDisabled: boolean
 }
 
-export interface ButtonProps extends Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>, SlotProps, RenderProps<ButtonRenderProps> {}
+export interface ButtonProps extends Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>, SlotProps, RenderProps<ButtonRenderProps> {
+  /** 
+   * The <form> element to associate the button with.
+   * The value of this attribute must be the id of a <form> in the same document.
+   */
+  form?: string,
+  /** 
+   * The URL that processes the information submitted by the button.
+   * Overrides the action attribute of the button's form owner.
+   */
+  formAction?: string,
+  /** Indicates how to encode the form data that is submitted. */
+  formEncType?: string,
+  /** Indicates the HTTP method used to submit the form. */
+  formMethod?: string,
+  /** Indicates that the form is not to be validated when it is submitted. */
+  formNoValidate?: boolean,
+  /** Overrides the target attribute of the button's form owner. */
+  formTarget?: string,
+  /** Submitted as a pair with the button's value as part of the form data. */
+  name?: string,
+  /** The value associated with the button's name when it's submitted with the form data. */
+  value?: string
+}
+
 interface ButtonContextValue extends ButtonProps {
   isPressed?: boolean
 }
 
+const additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);
+
 export const ButtonContext = createContext<ContextValue<ButtonContextValue, HTMLButtonElement>>({});
 
 function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
@@ -62,6 +89,7 @@ function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
 
   return (
     <button
+      {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}
       {...mergeProps(buttonProps, focusProps, hoverProps)}
       {...renderProps}
       ref={ref}

packages/react-aria-components/test/Button.test.js

@@ -34,6 +34,13 @@ describe('Button', () => {
     expect(button).toHaveAttribute('data-foo', 'bar');
   });
 
+  it('should support form props', () => {
+    let {getByRole} = render(<form id="foo"><Button form="foo" formMethod="post">Test</Button></form>);
+    let button = getByRole('button');
+    expect(button).toHaveAttribute('form', 'foo');
+    expect(button).toHaveAttribute('formMethod', 'post');
+  });
+
   it('should support slot', () => {
     let {getByRole} = render(
       <ButtonContext.Provider value={{slots: {test: {'aria-label': 'test'}}}}>
@@ -65,7 +72,7 @@ describe('Button', () => {
   it('should support focus ring', () => {
     let {getByRole} = render(<Button className={({isFocusVisible}) => isFocusVisible ? 'focus' : ''}>Test</Button>);
     let button = getByRole('button');
-    
+
     expect(button).not.toHaveAttribute('data-focus-visible');
     expect(button).not.toHaveClass('focus');
 
@@ -109,12 +116,12 @@ describe('Button', () => {
   it('should support render props', () => {
     let {getByRole} = render(<Button>{({isPressed}) => isPressed ? 'Pressed' : 'Test'}</Button>);
     let button = getByRole('button');
-    
+
     expect(button).toHaveTextContent('Test');
-    
+
     fireEvent.mouseDown(button);
     expect(button).toHaveTextContent('Pressed');
-    
+
     fireEvent.mouseUp(button);
     expect(button).toHaveTextContent('Test');
   });