Repository navigation
fix(ChatbotWelcomePrompt): Wrap text - #920
Conversation
1773c21 to
c25017c
Compare
|
Preview: https://chatbot-pr-chatbot-920.surge.sh A11y report: https://chatbot-pr-chatbot-920-a11y.surge.sh |
3b9949b to
6db8f97
Compare
Text was not wrapping properly; added additional CSS to make sure Flex layout functions as desired. Fixes patternfly#910
mcoker
left a comment
mcoker
left a comment
There was a problem hiding this comment.
LGTM. Left a couple of nits, but it's 👍 as is.
| overflow: visible; | ||
| height: 100%; | ||
| min-width: 0; | ||
| overflow-wrap: anywhere; |
There was a problem hiding this comment.
I would only apply it to the whole element like this if you're 100% the children (always cards I'm assuming?) only have text. Otherwise I would target the text parts of the children specifically. Applying overflow-wrap: anywhere; on containers with lots of children and layouts can have adverse effects.
There was a problem hiding this comment.
Moved to body; thank you!
| .pf-chatbot__prompt-suggestion-title { | ||
| overflow-wrap: anywhere; |
There was a problem hiding this comment.
This is fine but just a nit - to avoid specificity issues in the future, since there is a var for this style, I would use the var and apply it to the card wrapper. --pf-v6-c-card__title-text--OverflowWrap: anywhere;
If you wanted to do that, looks like you could apply it to .pf-chatbot__prompt-suggestions > * above.
There was a problem hiding this comment.
Adjusted this here - the variable doesn't work on the body section for whatever reason.
6db8f97 to
c252288
Compare
c252288 to
95d06a1
Compare
|
🎉 This PR is included in version 6.9.0-prerelease.9 🎉 The release is available on: Your semantic-release bot 📦🚀 |
4 participants
Text was not wrapping properly; added additional CSS to make sure Flex layout functions as desired.
The ticket asks for truncation. In talking to other folks, I don't think we want to do this right now, but we shouldn't be breaking the default Card text wrap with our flex layout. I am adding classes you can target if you want to wrap the text differently instead.
You can reproduce/test at https://chatbot-pr-chatbot-920.surge.sh/extensions/chatbot/ui#welcome-prompt.
Addresses #910