adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.83k stars 1.11k forks source link

ToggleButton - add HTMLButton props such as name and value #4403

Closed dax70 closed 1 year ago

dax70 commented 1 year ago

πŸ™‹ Feature Request

It would be helpful to be able to be able to use props available on button such as name, and value. The type prop is already supported. That way the button values are included when the form is submitted.

Alternatively, allow the spreading of arbitrary props into the component. That would enable wrapping the React-Aria-Components with new props supported in the underlying HTML element and or passed as RenderProps.

πŸ€” Expected Behavior

Add the following:

<ToggleButton name="foo" value="bar" >List</ToggleButton>
<button name="foo" value="bar">List</button>

😯 Current Behavior

Button props are excluded from being rendered.

πŸ’ Possible Solution

export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, "children" | "elementType">,
    SlotProps,
    RenderProps<ToggleButtonRenderProps> {
  /**
   * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
   */
  name?: string;
  /**
   * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
   */
  value?: string;
}
... 

πŸ”¦ Context

Being able to use Toggle buttons as regular button and inputs able to capture state is helpful.

πŸ’» Examples

One example is a set of toggles to convert a UI from grid view to a list view, etc. Similar to how Finder in macOS enables the switching. Submitting the form to a server or in an SPA using the form data values to determine the user selection.

🧒 Your Company/Team

Considering using react-aria-components for products. React-Aria is a very impressive project and this would reduce a lot of boiler plate and reimplementing many of the patterns already in the examples.

LFDanLu commented 1 year ago

In a similar vein to https://github.com/adobe/react-spectrum/issues/4377, I'll close this in favor of that issue.

dax70 commented 1 year ago

@LFDanLu Thanks for the quick response. Sounds good. Same problem, and perhaps one that all ButtonBaseProps can define or allow for extension of custom attributes.