You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/spright-components/src/chat/specs/README.md
+22-13Lines changed: 22 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -74,24 +74,20 @@ The component also contains the following features:
74
74
75
75
#### Chat input
76
76
77
-
##### In scope
78
-
79
77
1. Accepts text input in a text area
80
78
- the text area height is a single line initially but grows its height to fit the entered text up to its max-height
81
79
- the text area has configurable placeholder text
82
80
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
84
82
- pressing Enter while the text area has focus will behave the same as clicking "Send"
85
83
- 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
93
85
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
94
89
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
95
91
1. Displays errors via the standard red `!` icon and error text
96
92
97
93
### Risks and Challenges
@@ -208,16 +204,27 @@ richText.markdown = 'Welcome **Homer**, how can I help?';
208
204
209
205
- _Component Name_ `spright-chat-input`
210
206
- _Props/Attrs_
207
+
- `processing` - boolean attribute that causes the "Stop" button to be shown rather than the "Send" button
211
208
- `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
213
213
- _Methods_
214
+
- `resetInput()` - clears the text input and gives it focus
214
215
- _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.
216
218
- _CSS Classes and CSS Custom Properties that affect the component_
- Clients can set the input width using normal CSS rules. The input will have a default minimum width that clients are discouraged from overriding.
219
221
- 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.
220
222
- _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
+
221
228
222
229
### Anatomy
223
230
@@ -261,6 +268,8 @@ Other than setting a background, a conversation has no appearance of its own and
261
268
262
269
The input contains a native `textarea` and a `nimble-button`. The code below is simplified to omit some classes / refs and ARIA info.
263
270
271
+
Not yet shown: "Stop" button, `footer-actions` slot, `attachments` slot, error text and icon.
272
+
264
273
```html
265
274
<div class="container">
266
275
<textarea
@@ -344,7 +353,7 @@ _Consider the accessibility of the component, including:_
344
353
345
354
The text field and button will each be keyboard focusable. This will be reflected visually to the user in accordance with the design spec.
346
355
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:
0 commit comments