Repository navigation
fix(ChatbotWelcomePrompt): Wrap text - #920
rebeccaalpert wants to merge 1 commit into
Conversation
1773c21 to
c25017c
Compare
|
Preview: https://chatbot-pr-chatbot-920.surge.sh A11y report: https://chatbot-pr-chatbot-920-a11y.surge.sh |
Text was not wrapping properly; added additional CSS to make sure Flex layout functions as desired. Fixes patternfly#910
3b9949b to
6db8f97
Compare
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.
| .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.
3 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