Add end slot to spright chat conversation #2899
Conversation
OliverCosma
requested review from
jattasNI,
mollykreis,
msmithNI and
rajsite
as code owners
packages/react-workspace/react-client-app/src/components/App.tsx
Outdated
Show resolved
Hide resolved
| display: none; | ||
| } | ||
|
|
||
| .end { |
There was a problem hiding this comment.
I noticed that Figma shows a grey horizontal line between the disclaimer and the chat input. Could you add that? I think it could just be some border styling on the end div (though need to make sure it doesn't show up if nothing is slotted).
Current implementation
Figma
I originally went to Figma to see if it shows as much vertical padding above the disclaimer as we do. It turns out it does. It feels like a lot to me but I think we should follow the design and adjust if we get feedback.
There was a problem hiding this comment.
Added a border-top here. However, I was not that pleased with the vertical padding - it looked like the disclaimer had a larger height compared with the space between the input and the border so I've set the end slot' padding to be 2px - let me know what you think.
with 4px padding for disclaimer (as before) + border top
and with 2px + border top
I think we could "solve" this with a smaller font for the text, but I couldn't find something suitable and I don't think we should add a new one now.
packages/storybook/src/spright/chat/conversation/chat-conversation-matrix.stories.ts
Show resolved
Hide resolved
packages/spright-components/src/chat/conversation/tests/chat-conversation.spec.ts
Outdated
Show resolved
Hide resolved
2 participants
Pull Request
🤨 Rationale
Adding an "end" slot in spright conversation so that consumer apps can add content aligned below the input slot (such as disclaimers, privacy policies)
👩💻 Implementation
used start slot as reference
🧪 Testing
Added tests + manually checked in storybook
✅ Checklist