feat: Add render prop to allow customizing DOM element (#9499)

* prototype: Add render prop to allow customizing DOM element

* Implement all components

* Omit from Spectrum

* Add render props as a second argument

* review comments

Author: devongovett

packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx

@@ -22,9 +22,9 @@ const meta: Meta = {
 
 export default meta;
 
-export type AccordionStory = StoryObj<SpectrumAccordionProps>;
+export type AccordionStory = StoryObj<Partial<SpectrumAccordionProps>>;
 
-export const Template = (args: SpectrumAccordionProps): JSX.Element => (
+export const Template = (args: Partial<SpectrumAccordionProps>): JSX.Element => (
   <Accordion {...args}>
     <Disclosure id="files">
       <DisclosureTitle>

packages/@react-spectrum/accordion/src/Accordion.tsx

@@ -20,7 +20,7 @@ import styles from '@adobe/spectrum-css-temp/components/accordion/vars.css';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-export interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'>, StyleProps, DOMProps {
+export interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'render' | 'children'>, StyleProps, DOMProps {
   /** Whether the Accordion should be displayed with a quiet style. */
   isQuiet?: boolean,
   /** The disclosures within the accordion group. */
@@ -47,7 +47,7 @@ export const Accordion = /*#__PURE__*/(forwardRef as forwardRefType)(function Ac
   );
 });
 
-export interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'className' | 'style' | 'children'>, AriaLabelingProps, StyleProps {
+export interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'className' | 'style' | 'render' | 'children'>, AriaLabelingProps, StyleProps {
   /** Whether the Disclosure should be displayed with a quiet style. */
   isQuiet?: boolean,
   /** The contents of the disclosure. The first child should be the header, and the second child should be the panel. */
@@ -76,7 +76,7 @@ export const Disclosure = /*#__PURE__*/(forwardRef as forwardRefType)(function D
   );
 });
 
-export interface SpectrumDisclosurePanelProps extends Omit<DisclosurePanelProps, 'className' | 'style' | 'children'>, DOMProps, AriaLabelingProps, StyleProps {
+export interface SpectrumDisclosurePanelProps extends Omit<DisclosurePanelProps, 'className' | 'style' | 'render' | 'children'>, DOMProps, AriaLabelingProps, StyleProps {
   /** The contents of the accordion panel. */
   children: React.ReactNode
 }

packages/@react-spectrum/dropzone/src/DropZone.tsx

@@ -20,7 +20,7 @@ import React, {ReactNode} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/dropzone/vars.css';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
-export interface SpectrumDropZoneProps extends Omit<DropZoneProps, 'onHoverStart' | 'onHoverChange' | 'onHoverEnd' | 'isDisabled' | 'className' | 'style'>, DOMProps, StyleProps, AriaLabelingProps {
+export interface SpectrumDropZoneProps extends Omit<DropZoneProps, 'onHoverStart' | 'onHoverChange' | 'onHoverEnd' | 'isDisabled' | 'className' | 'style' | 'render'>, DOMProps, StyleProps, AriaLabelingProps {
   /** The content to display in the drop zone. */
   children: ReactNode,
   /** Whether the drop zone has been filled. */

packages/@react-spectrum/s2/src/Accordion.tsx

@@ -122,7 +122,7 @@ export interface AccordionItemRenderProps {
   state: AccordionItemState
 }
 
-export interface AccordionItemProps extends Omit<RenderProps<AccordionItemRenderProps>, 'className' | 'style'>, SlotProps, StyleProps {
+export interface AccordionItemProps extends Omit<RenderProps<AccordionItemRenderProps>, 'className' | 'style' | 'render'>, SlotProps, StyleProps {
   /**
    * The size of the accordion item.
    * @default 'M'

packages/@react-spectrum/s2/src/ActionButton.tsx

@@ -59,7 +59,7 @@ interface ActionGroupItemStyleProps {
   isJustified?: boolean
 }
 
-export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ActionButtonStyleProps {
+export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ActionButtonStyleProps {
   /** The content to display in the ActionButton. */
   children: ReactNode
 }

packages/@react-spectrum/s2/src/Breadcrumbs.tsx

@@ -63,7 +63,7 @@ interface BreadcrumbsStyleProps {
   // TODO: showRoot?: boolean,
 }
 
-export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>, BreadcrumbsStyleProps, StyleProps {
+export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes>, BreadcrumbsStyleProps, StyleProps {
   /** The children of the Breadcrumbs. */
   children: ReactNode | ((item: T) => ReactNode)
 }
@@ -296,7 +296,7 @@ const heading = style({
   fontWeight: 'extra-bold'
 });
 
-export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus' | 'onClick' | keyof GlobalDOMAttributes>, LinkDOMProps {
+export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'render' | 'autoFocus' | 'onClick' | keyof GlobalDOMAttributes>, LinkDOMProps {
   /** The children of the breadcrumb item. */
   children: ReactNode
 }

packages/@react-spectrum/s2/src/Button.tsx

@@ -52,12 +52,12 @@ interface ButtonStyleProps {
   staticColor?: 'white' | 'black' | 'auto'
 }
 
-export interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ButtonStyleProps {
+export interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ButtonStyleProps {
   /** The content to display in the Button. */
   children: ReactNode
 }
 
-export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ButtonStyleProps {
+export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'render' | 'children' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ButtonStyleProps {
   /** The content to display in the Button. */
   children: ReactNode
 }

packages/@react-spectrum/s2/src/Calendar.tsx

@@ -55,7 +55,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface CalendarProps<T extends DateValue>
-  extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'styles' | 'children' | keyof GlobalDOMAttributes>,
+  extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'render' | 'styles' | 'children' | keyof GlobalDOMAttributes>,
   StyleProps {
   /**
    * The error message to display when the calendar is invalid.

packages/@react-spectrum/s2/src/Card.tsx

@@ -36,7 +36,7 @@ interface CardRenderProps {
   size: 'XS' | 'S' | 'M' | 'L' | 'XL'
 }
 
-export interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
+export interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'render' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
   /** The children of the Card. */
   children: ReactNode | ((renderProps: CardRenderProps) => ReactNode),
   /**

packages/@react-spectrum/s2/src/CardView.tsx

@@ -34,7 +34,7 @@ import {useDOMRef} from '@react-spectrum/utils';
 import {useEffectEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style' | 'isLoading' | keyof GlobalDOMAttributes>, UnsafeStyles {
+export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style' | 'render' | 'isLoading' | keyof GlobalDOMAttributes>, UnsafeStyles {
   /**
    * The layout of the cards.
    * @default 'grid'