[minor] New Message Input component implementation - #2504
[minor] New Message Input component implementation#2504PelayoFelgueroso wants to merge 30 commits into
Conversation
…lds error message
…xc-technology/halstack-react into PelayoFelgueroso/message-input
| `; | ||
|
|
||
| const TranscriptOverlay = styled.div` | ||
| position: absolute; |
There was a problem hiding this comment.
If you keep talking and allowing the transcript to grow it covers the stop button, which does not allow the user to stop the transcript. It also affects the scrollbar behavior.
| padding: var(--spacing-padding-m) var(--spacing-padding-xs); | ||
| background-color: var(--color-bg-neutral-lightest); | ||
| box-shadow: 0 -24px 10px 4px rgba(255, 255, 255, 0.6); | ||
| ${({ disabled, error, focus }) => inputStylesByStatePromptInput(disabled, error, focus)} |
There was a problem hiding this comment.
This function injects a different background color than the one defined a few lines above.
| `; | ||
|
|
||
| const FilesContainer = styled.div` | ||
| min-height: 32px; |
There was a problem hiding this comment.
This should not be needed since the trigger is already 32 px
| width: ${({ size = "medium" }) => sizes[size]}; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--spacing-gap-xs); |
There was a problem hiding this comment.
This gap is unnecessary, the error message does already have 4px of separation.
|
|
||
| border-radius: var(--border-radius-l); | ||
|
|
||
| border: ${!disabled && error ? "var(--border-width-m)" : "var(--border-width-s)"} var(--border-style-default) |
There was a problem hiding this comment.
in disabled state it does have a different bordero color
| <DxcMessageInput placeholder="Ask me anything..." error="Error Message" /> | ||
| </ExampleContainer> | ||
|
|
||
| <Title title="Validation" theme="light" level={2} /> |
There was a problem hiding this comment.
These two do not really make sense as visual tests
| onClick={handleInputContainerOnClick} | ||
| onMouseDown={handleInputContainerOnMouseDown} | ||
| > | ||
| {files && typeof callbackFile === "function" && ( |
There was a problem hiding this comment.
Thinking about it even if it is controlled, users can define files as undefined first.
There was a problem hiding this comment.
I would add an explanation on how to enable files in the component.
2 participants
Checklist
(Check off all the items before submitting)
/libdirectory./websiteas needed.Purpose
Implemente the new message input component based on the design.