Merge pull request #295 from rebeccaalpert/list-fix

fix(TextMessage): Allow for more complex list output
patternfly · Nov 7, 2024 · 3944512 · 3944512
2 parents bc655e6 + 3985618
commit 3944512
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/...tternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/BotMessage.tsx b/...tternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/BotMessage.tsx
@@ -48,6 +48,18 @@ export default MessageLoading;
   * Item 2
   * Item 3`;
 
+  const moreComplexList = `You may be wondering whether you can display more complex lists with formatting. In response to your question, I will explain how to spread butter on toast.
+
+1. **Using a \`toaster\`:**
+
+   - Place \`bread\` in a \`toaster\`
+   - Once \`bread\` is lightly browned, remove from \`toaster\`
+
+2. **Using a \`knife\`:**
+
+     Acquire 1 tablespoon of room temperature \`butter\`. Use \`knife\` to spread butter on \`toast\`. Bon appétit!
+ `;
+
   return (
     <>
       <Message
@@ -60,6 +72,7 @@ export default MessageLoading;
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content={markdown} />
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content={orderedList} />
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content={unorderedList} />
+      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={moreComplexList} />
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
     </>
   );

diff --git a/packages/module/src/Message/TextMessage/TextMessage.scss b/packages/module/src/Message/TextMessage/TextMessage.scss
@@ -2,6 +2,14 @@
 // Chatbot Main - Message - Content - Text
 // ============================================================================
 
+.pf-chatbot__message-and-actions {
+  blockquote {
+    .pf-chatbot__message-text {
+      display: inline-block;
+    }
+  }
+}
+
 // Need to inline shorter text
 .pf-chatbot__message-text {
   width: fit-content;
@@ -16,10 +24,6 @@
     --pf-v6-c-content--FontSize: var(--pf-t--chatbot--font-size);
   }
 
-  p {
-    display: inline-block;
-  }
-
   code {
     background-color: var(--pf-t--chatbot-message--type--background--color--default);
     font-size: var(--pf-t--global--font--size--body--default);

diff --git a/packages/module/src/Message/TextMessage/TextMessage.tsx b/packages/module/src/Message/TextMessage/TextMessage.tsx
@@ -7,11 +7,11 @@ import { ExtraProps } from 'react-markdown';
 import { Content, ContentVariants } from '@patternfly/react-core';
 
 const TextMessage = ({ children, ...props }: JSX.IntrinsicElements['p'] & ExtraProps) => (
-  <div className="pf-chatbot__message-text">
+  <span className="pf-chatbot__message-text">
     <Content component={ContentVariants.p} {...props}>
       {children}
     </Content>
-  </div>
+  </span>
 );
 
 export default TextMessage;