PDS proposals
← All proposals

Composer

A labelled textarea with a toolbar inside the same bordered box:

Net-new componentOpen in Storybook

proposals/Composer/custom.md27 lines · View on GitHub

Custom and net-new: Composer

Everything in this proposal that is not plain PDS v2. npm run check:tokens reads this file: each net-new class, custom CSS variable and raw value found in the code must appear here in backticks.

Net-new components

  • .pds-composer — Textarea-style field with a toolbar inside it (aboveField, fieldHeader, actionsStart / actionsEnd slots).
    • Parts and modifiers: .pds-composer--compact, .pds-composer--m, .pds-composer__above-field, .pds-composer__actions, .pds-composer__actions-end, .pds-composer__actions-start, .pds-composer__drop-label, .pds-composer__field-header, .pds-composer__row, .pds-composer__field, .pds-composer__textarea

Additions to existing PDS components

None.

Net-new props

All props of ComposerProps are new (net-new component), including dropLabel and onFilesDrop (drag and drop of files).

The pds-is-drag-over state class is new, following the pds-is-resizable / pds-is-disabled pattern.

Custom CSS variables

  • --composer-padding — set on .pds-composer

Raw values kept on purpose

None.