Skip to content

Commit 33e29c9

Browse files
committed
New API
1 parent 8d90f52 commit 33e29c9

File tree

1 file changed

+22
-13
lines changed
  • packages/spright-components/src/chat/specs

1 file changed

+22
-13
lines changed

packages/spright-components/src/chat/specs/README.md

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -74,24 +74,20 @@ The component also contains the following features:
7474

7575
#### Chat input
7676

77-
##### In scope
78-
7977
1. Accepts text input in a text area
8078
- the text area height is a single line initially but grows its height to fit the entered text up to its max-height
8179
- the text area has configurable placeholder text
8280
1. Includes a "Send" button for the user to submit the current input text
83-
- fires an event containing the current input content and then clears the content and sets keyboard focus back to the input
81+
- fires an event containing the current input content
8482
- pressing Enter while the text area has focus will behave the same as clicking "Send"
8583
- pressing Shift-Enter will create a newline
86-
- the button is disabled and Enter has no effect if the input text is empty
87-
1. Styling for default, focus, and rollover states
88-
89-
##### Future work
90-
91-
This is included for informational purposes but doesn't yet have a proposed implementation in the Design section below.
92-
84+
- the button is disabled and Enter has no effect if the input text and attachments slot are both empty or if the client has set an attribute to explicitly disable it
9385
1. Includes a "Stop" button for the user to abort an action that was triggered in response to a sent message (e.g. a file upload or incoming response)
86+
- fires an event when clicked. This event contains no data. Does not fire an event if the user presses Enter in the text area while this button is visible.
87+
- only one of the "Stop" or "Send" buttons will be visible at a given time
88+
- when it's visible, this button is always enabled
9489
1. Includes slots for specifying additional content like a button for attaching files and chips for viewing/clearing attached files
90+
1. Styling for default, focus, and rollover states
9591
1. Displays errors via the standard red `!` icon and error text
9692

9793
### Risks and Challenges
@@ -208,16 +204,27 @@ richText.markdown = 'Welcome **Homer**, how can I help?';
208204
209205
- _Component Name_ `spright-chat-input`
210206
- _Props/Attrs_
207+
- `processing` - boolean attribute that causes the "Stop" button to be shown rather than the "Send" button
211208
- `placeholder` - text to display in the text area when no text has been entered
212-
- `send-button-label` - text to use for a `title` and ARIA attributes on the send button. See Accessibility section for more info.
209+
- `send-button-label` - text to use for a `title` and ARIA attributes on the "Send" button. See Accessibility section for more info.
210+
- `stop-button-label` - text to use for a `title` and ARIA attributes on the "Stop" button. See Accessibility section for more info.
211+
- `send-disabled` - boolean attribute that causes the "Send" button to be disabled even if there is text or other slotted content
212+
- `error-visible` and `error-text` - standard attributes for showing an error icon and red text below the control
213213
- _Methods_
214+
- `resetInput()` - clears the text input and gives it focus
214215
- _Events_
215-
- `send` - emitted when the user clicks the button or presses Enter with text present. Includes `ChatInputSendEventDetail` which is an object with a `text` field containing the input contents.
216+
- `send` - emitted when the user clicks the "send" button or presses Enter with text present. Includes `ChatInputSendEventDetail` which is an object with a `text` field containing the input contents. Not cancelable.
217+
- `stop` - emitted when the user clicks the "stop" button. Not cancelable.
216218
- _CSS Classes and CSS Custom Properties that affect the component_
217219
- _How native CSS Properties (height, width, etc.) affect the component_
218220
- Clients can set the input width using normal CSS rules. The input will have a default minimum width that clients are discouraged from overriding.
219221
- The input will have a default height to fit one line of text and will grow its height to fit more lines, up to a max-height. After that limit it will show a vertical scrollbar.
220222
- _Slots_
223+
- `footer-actions`
224+
- Action buttons to display left of the send/stop button.
225+
- `attachments`
226+
- An area to slot arbitrary content adjacent to the text input area. Intended to be used for adding chips that represent attached files.
227+
221228
222229
### Anatomy
223230
@@ -261,6 +268,8 @@ Other than setting a background, a conversation has no appearance of its own and
261268
262269
The input contains a native `textarea` and a `nimble-button`. The code below is simplified to omit some classes / refs and ARIA info.
263270
271+
Not yet shown: "Stop" button, `footer-actions` slot, `attachments` slot, error text and icon.
272+
264273
```html
265274
<div class="container">
266275
<textarea
@@ -344,7 +353,7 @@ _Consider the accessibility of the component, including:_
344353

345354
The text field and button will each be keyboard focusable. This will be reflected visually to the user in accordance with the design spec.
346355

347-
The Design team has requested a non-standard appearance for the "Send" button: icon-only but rectangular shape. Nimble buttons support square icon-only buttons with an accessible label via `content-hidden` or rectangular buttons with text content visible. We will achieve the desired appearance by using a `nimble-button` with the following settings:
356+
The Design team has requested a non-standard appearance for the "Send" and "Stop" buttons: icon-only but rectangular shape. Nimble buttons support square icon-only buttons with an accessible label via `content-hidden` or rectangular buttons with text content visible. We will achieve the desired appearance by using a `nimble-button` with the following settings:
348357

349358
- adding icon content in the `start` slot
350359
- not setting `content-hidden`

0 commit comments

Comments
 (0)