PDS proposals
← All proposals

Chat Input

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

Net-new componentOpen in Storybook

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

Custom and net-new: ChatInput

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-chat-input — Textarea-style field with a toolbar inside it (actionsStart / actionsEnd slots).
    • Parts and modifiers: .pds-chat-input--compact, .pds-chat-input--m, .pds-chat-input__actions, .pds-chat-input__actions-end, .pds-chat-input__actions-start, .pds-chat-input__drop-label, .pds-chat-input__field, .pds-chat-input__textarea

Additions to existing PDS components

None.

Net-new props

All props of ChatInputProps 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

  • --chat-input-padding — set on .pds-chat-input

Raw values kept on purpose

None.