RAC: docs improvements for render props (#4794)

reidbarber · web-flow · commit b4e1f1cb7d37 · 2023-07-19T17:35:24.000-05:00
* improve render props

* remove showOptional
diff --git a/packages/react-aria-components/docs/Checkbox.mdx b/packages/react-aria-components/docs/Checkbox.mdx
@@ -250,7 +250,7 @@ Render props may also be used as children to alter what elements are rendered ba
 
 The states, selectors, and render props for `Checkbox` are documented below.
 
-<StateTable properties={docs.exports.CheckboxRenderProps.properties} showOptional />
+<StateTable properties={docs.exports.CheckboxRenderProps.properties} />
 
 ## Reusable wrappers
 
diff --git a/packages/react-aria-components/docs/ComboBox.mdx b/packages/react-aria-components/docs/ComboBox.mdx
@@ -425,7 +425,7 @@ The states and selectors for each component used in a `ComboBox` are documented
 
 A `ComboBox` can be targeted with the `.react-aria-ComboBox` CSS selector, or by overriding with a custom `className`. It supports the following states:
 
-<StateTable properties={docs.exports.ComboBoxRenderProps.properties} showOptional />
+<StateTable properties={docs.exports.ComboBoxRenderProps.properties} />
 
 ### Label
 
diff --git a/packages/react-aria-components/docs/Meter.mdx b/packages/react-aria-components/docs/Meter.mdx
@@ -181,7 +181,7 @@ The selectors and render props for each component used in a `Meter` are document
 
 A `Meter` can be targeted with the `.react-aria-Meter` CSS selector, or by overriding with a custom `className`. It supports the following states and render props:
 
-<StateTable properties={docs.exports.MeterRenderProps.properties} showOptional />
+<StateTable properties={docs.exports.MeterRenderProps.properties} />
 
 ### Label
 
diff --git a/packages/react-aria-components/docs/NumberField.mdx b/packages/react-aria-components/docs/NumberField.mdx
@@ -287,7 +287,7 @@ The states, selectors, and render props for each component used in a `NumberFiel
 
 A `NumberField` can be targeted with the `.react-aria-NumberField` CSS selector, or by overriding with a custom `className`. It supports the following states:
 
-<StateTable properties={docs.exports.NumberFieldRenderProps.properties} showOptional />
+<StateTable properties={docs.exports.NumberFieldRenderProps.properties} />
 
 ### Label
 
diff --git a/packages/react-aria-components/docs/ProgressBar.mdx b/packages/react-aria-components/docs/ProgressBar.mdx
@@ -197,7 +197,7 @@ The selectors and render props for each component used in a `ProgressBar` are do
 
 A `ProgressBar` can be targeted with the `.react-aria-ProgressBar` CSS selector, or by overriding with a custom `className`. It supports the following states and render props:
 
-<StateTable properties={docs.exports.ProgressBarRenderProps.properties} showOptional />
+<StateTable properties={docs.exports.ProgressBarRenderProps.properties} />
 
 ### Label
 
diff --git a/packages/react-aria-components/docs/TextField.mdx b/packages/react-aria-components/docs/TextField.mdx
@@ -220,7 +220,7 @@ The states, selectors, and render props for each component used in a `TextField`
 
 A `TextField` can be targeted with the `.react-aria-TextField` CSS selector, or by overriding with a custom `className`. It supports the following states:
 
-<StateTable properties={docs.exports.TextFieldRenderProps.properties} showOptional />
+<StateTable properties={docs.exports.TextFieldRenderProps.properties} />
 
 ### Label
 
diff --git a/packages/react-aria-components/src/Calendar.tsx b/packages/react-aria-components/src/Calendar.tsx
@@ -32,7 +32,7 @@ export interface CalendarRenderProps {
   state: CalendarState,
   /**
    * Validation state of the date field.
-   * @selector [data-validation-state]
+   * @selector [data-validation-state="valid | invalid"]
    */
   validationState: ValidationState
 }
diff --git a/packages/react-aria-components/src/Checkbox.tsx b/packages/react-aria-components/src/Checkbox.tsx
@@ -92,7 +92,7 @@ export interface CheckboxRenderProps {
    * Whether the checkbox is valid or invalid.
    * @selector [data-validation-state="valid | invalid"]
    */
-  validationState?: ValidationState,
+  validationState: ValidationState | undefined,
   /**
    * Whether the checkbox is required.
    * @selector [data-required]
diff --git a/packages/react-aria-components/src/ComboBox.tsx b/packages/react-aria-components/src/ComboBox.tsx
@@ -35,9 +35,9 @@ export interface ComboBoxRenderProps {
   isDisabled: boolean,
   /**
    * Validation state of the combobox.
-   * @selector [data-validation-state]
+   * @selector [data-validation-state="valid | invalid"]
    */
-  validationState?: ValidationState,
+  validationState: ValidationState | undefined,
   /**
    * Whether the combobox is required.
    * @selector [data-required]
diff --git a/packages/react-aria-components/src/DateField.tsx b/packages/react-aria-components/src/DateField.tsx
@@ -25,7 +25,7 @@ export interface DateFieldRenderProps {
   state: DateFieldState,
   /**
    * Validation state of the date field.
-   * @selector [data-validation-state]
+   * @selector [data-validation-state="valid | invalid"]
    */
   validationState: ValidationState,
   /**
diff --git a/packages/react-aria-components/src/DatePicker.tsx b/packages/react-aria-components/src/DatePicker.tsx
@@ -46,7 +46,7 @@ export interface DatePickerRenderProps {
   state: DatePickerState,
   /**
    * Validation state of the date picker.
-   * @selector [data-validation-state]
+   * @selector [data-validation-state="valid | invalid"]
    */
   validationState: ValidationState
 }
diff --git a/packages/react-aria-components/src/Meter.tsx b/packages/react-aria-components/src/Meter.tsx
@@ -26,7 +26,7 @@ export interface MeterRenderProps {
    * A formatted version of the value.
    * @selector [aria-valuetext]
    */
-  valueText?: string
+  valueText: string | undefined
 }
 
 export const MeterContext = createContext<ContextValue<MeterProps, HTMLDivElement>>(null);
diff --git a/packages/react-aria-components/src/NumberField.tsx b/packages/react-aria-components/src/NumberField.tsx
@@ -29,9 +29,9 @@ export interface NumberFieldRenderProps {
   isDisabled: boolean,
   /**
    * Validation state of the number field.
-   * @selector [data-validation-state]
+   * @selector [data-validation-state="valid | invalid"]
    */
-  validationState?: ValidationState,
+  validationState: ValidationState | undefined,
   /**
    * State of the number field.
    */
diff --git a/packages/react-aria-components/src/ProgressBar.tsx b/packages/react-aria-components/src/ProgressBar.tsx
@@ -26,7 +26,7 @@ export interface ProgressBarRenderProps {
    * A formatted version of the value.
    * @selector [aria-valuetext]
    */
-  valueText?: string,
+  valueText: string | undefined,
   /**
    * Whether the progress bar is indeterminate.
    * @selector :not([aria-valuenow])
diff --git a/packages/react-aria-components/src/RadioGroup.tsx b/packages/react-aria-components/src/RadioGroup.tsx
@@ -44,7 +44,7 @@ export interface RadioGroupRenderProps {
   isRequired: boolean,
   /**
    * The validation state of the radio group.
-   * @selector [data-validation-state]
+   * @selector [data-validation-state="valid | invalid"]
    */
   validationState: ValidationState | null,
   /**
@@ -132,7 +132,8 @@ function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
       {...radioGroupProps}
       {...renderProps}
       ref={ref}
-      slot={props.slot}>
+      slot={props.slot}
+      data-validation-state={state.validationState || undefined}>
       <Provider
         values={[
           [InternalRadioContext, state],
diff --git a/packages/react-aria-components/src/SearchField.tsx b/packages/react-aria-components/src/SearchField.tsx
@@ -33,9 +33,9 @@ export interface SearchFieldRenderProps {
   isDisabled: boolean,
   /**
    * Validation state of the search field.
-   * @selector [data-validation-state]
+   * @selector [data-validation-state="valid | invalid"]
    */
-  validationState?: ValidationState,
+  validationState: ValidationState | undefined,
   /**
    * State of the search field.
    */
diff --git a/packages/react-aria-components/src/Select.tsx b/packages/react-aria-components/src/Select.tsx
@@ -45,9 +45,9 @@ export interface SelectRenderProps {
   isOpen: boolean,
   /**
    * Validation state of the select.
-   * @selector [data-validation-state]
+   * @selector [data-validation-state="valid | invalid"]
    */
-  validationState?: ValidationState,
+  validationState: ValidationState | undefined,
   /**
    * Whether the select is required.
    * @selector [data-required]
diff --git a/packages/react-aria-components/src/TextField.tsx b/packages/react-aria-components/src/TextField.tsx
@@ -28,9 +28,9 @@ export interface TextFieldRenderProps {
   isDisabled: boolean,
   /**
    * Validation state of the text field.
-   * @selector [data-validation-state]
+   * @selector [data-validation-state="valid | invalid"]
    */
-  validationState?: ValidationState
+  validationState: ValidationState | undefined
 }
 
 export interface TextFieldProps extends Omit<AriaTextFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage'>, Omit<DOMProps, 'style' | 'className' | 'children'>, SlotProps, RenderProps<TextFieldRenderProps> {}

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export interface CalendarRenderProps {`
`32`	`32`	`state: CalendarState,`
`33`	`33`	`/**`
`34`	`34`	`* Validation state of the date field.`
`35`		`- * @selector [data-validation-state]`
	`35`	`+ * @selector [data-validation-state="valid \| invalid"]`
`36`	`36`	`*/`
`37`	`37`	`validationState: ValidationState`
`38`	`38`	`}`