mirror of
https://github.com/supabase/supabase.git
synced 2026-05-07 23:19:23 +08:00
36269df347
## What kind of change does this PR introduce? Chore that resolves DEPR-394. ## What is the current behavior? This stack is consolidating RHF field-array patterns in smaller reviewable steps. After the key/value work lands, repeated single-value inputs are still implemented separately across auth and SSO forms, and the design-system docs only document the key/value pattern. ## What is the new behavior? - adds a shared `SingleValueFieldArray` component in `ui-patterns` - migrates repeated single-value inputs in: - Redirect URL allow-list modal - OAuth app redirect URIs - SSO domains - SSO attribute mapping - documents the single-value pattern in the design system with: - a dedicated fragment page - updated forms guidance - updated form pattern demos - adds focused redirect URL modal coverage ## Additional context This is PR 3 of a 3-PR stack for DEPR-394. Base PR: #44058
42 lines
1.4 KiB
Plaintext
42 lines
1.4 KiB
Plaintext
---
|
|
title: Single Value Field Array
|
|
description: A shared form fragment for repeated single text inputs.
|
|
component: true
|
|
fragment: true
|
|
---
|
|
|
|
<ComponentPreview
|
|
name="single-value-field-array-demo"
|
|
description="A shared form fragment for repeated single text inputs."
|
|
peekCode
|
|
showDottedGrid
|
|
wide
|
|
/>
|
|
|
|
## Usage
|
|
|
|
Use `SingleValueFieldArray` when each row is a single text input backed by `react-hook-form`, such as redirect URIs, SSO domains, or repeated attribute mapping values.
|
|
|
|
```tsx
|
|
import { SingleValueFieldArray } from 'ui-patterns/form/SingleValueFieldArray/SingleValueFieldArray'
|
|
```
|
|
|
|
```tsx
|
|
<SingleValueFieldArray
|
|
control={form.control}
|
|
name="redirectUris"
|
|
valueFieldName="value"
|
|
createEmptyRow={() => ({ value: '' })}
|
|
placeholder="https://example.com/callback"
|
|
addLabel="Add redirect URI"
|
|
/>
|
|
```
|
|
|
|
`SingleValueFieldArray` owns the row add/remove behavior and renders the per-input form messages for you. Compose it inside `FormItemLayout` when you want the standard label, description, and message treatment around the entire section.
|
|
|
|
## When to use it
|
|
|
|
- Use `SingleValueFieldArray` for repeated single text values such as redirect URIs and domains.
|
|
- Use [Key/Value Field Array](./key-value-field-array) when each row is two text inputs.
|
|
- Build a custom row UI instead when each row mixes different controls, such as a text input paired with a `Select`.
|