diff --git a/.changeset/array-edit-button-and-dismiss.md b/.changeset/array-edit-button-and-dismiss.md new file mode 100644 index 000000000..61f292692 --- /dev/null +++ b/.changeset/array-edit-button-and-dismiss.md @@ -0,0 +1,5 @@ +--- +'@keystatic/core': patch +--- + +Array fields: add a visible "Edit" button to each list row (next to "Delete", and with an accessible name on both icon buttons), and make the "Edit item" dialog dismissable with a close button or by clicking outside. The "Add item" dialog is unchanged and keeps its "Cancel" button. diff --git a/packages/keystatic/src/form/fields/array/ui.tsx b/packages/keystatic/src/form/fields/array/ui.tsx index a9209d1bd..5f172e3be 100644 --- a/packages/keystatic/src/form/fields/array/ui.tsx +++ b/packages/keystatic/src/form/fields/array/ui.tsx @@ -7,8 +7,9 @@ import { } from '@keystar/ui/drag-and-drop'; import { FieldDescription, FieldLabel, FieldMessage } from '@keystar/ui/field'; import { Icon } from '@keystar/ui/icon'; +import { pencilIcon } from '@keystar/ui/icon/icons/pencilIcon'; import { trash2Icon } from '@keystar/ui/icon/icons/trash2Icon'; -import { VStack } from '@keystar/ui/layout'; +import { Flex, VStack } from '@keystar/ui/layout'; import { Item, ListView } from '@keystar/ui/list-view'; import { Content } from '@keystar/ui/slots'; import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip'; @@ -93,7 +94,14 @@ export function ArrayFieldInput( {errorMessage} )} + {/* + Editing is live (changes apply as you type, "Done" only closes the + dialog), so the edit dialog can safely be dismissed with a close button + or by clicking outside. The "add" dialog has its own "Cancel" button and + is not dismissable, to avoid discarding a half-filled item by accident. + */} { setModalState({ state: 'closed' }); }} @@ -397,16 +405,30 @@ export function ArrayFieldListView( return ( {label} - - { - onRemoveKey(item.key); - }} - > - - - {stringFormatter.format('delete')} - + + + { + props.onOpenItem(props.elements.indexOf(item)); + }} + > + + + {stringFormatter.format('edit')} + + + { + onRemoveKey(item.key); + }} + > + + + {stringFormatter.format('delete')} + + ); }}