proposals/Dropzone/decisions.md28 lines · View on GitHub
Decisions: Dropzone
A new component, not an extension of the File Upload (2026-10-21)
Decision:Dropzone is a new component. The PDS File Upload is a form field (label, message, validation, a "Choose file" button and the chosen file name) with no drag and drop; the reference is a compact drop area with one line of text. Different anatomy and purpose.
Why: extending the File Upload would mean hiding most of its parts. A Dropzone can sit next to a File Upload, or in a chat, a request form or a panel.
Port impact: a new component (npm run generate:component). It reuses no PDS component except the Icon (upload).
Anatomy and text (2026-10-21)
Decision: a dashed rounded outline (--pds-border-radius-input) with an upload icon, a label and a browse button. The sentence is two props, label ("Drop an image or brief, or") and browseLabel ("browse"), both required, so each half can be translated and the button is a real button. The text is Copy S in the secondary text color; browse is the link color, semibold, underlined on hover.
Why: no content is hardcoded in the component, and wrapping the button in its own element keeps page translation safe.
Port impact: none.
Behavior (2026-10-21)
Decision: a drop or the dialog calls onFilesDrop(files); the files are filtered by accept (extensions, types and type/* wildcards, as on a file input) and cut to one unless multiple. While a file is dragged over, the outline turns solid with the interactive focus color and the selected background. The hidden file input is reset after each change so the same file can be chosen again. The zone shows no files: the screen owns the list.
Drag counting:dragenter and dragleave fire for each child the pointer crosses, so they are counted (as in the Chat Panel) to know when the pointer has really left.
Keyboard: dropping is a pointer shortcut; keyboard and screen reader users press browse. The zone itself is not focusable.
Port impact: the matchesAccept helper is local; the port may move it to a util.
Open questions
A validation or error state (a rejected file type or size)? Not built; the screen can show a message below.
A size or file-count limit?
A taller, multi-line version for pages where the dropzone is the main content?
Should the drag-over highlight reuse the Chat Panel's drop overlay look?