Added shadow part for non parsed text, overflow ellipsis for text in …

…button (quick reply) (#92) * Added shadow part for non parsed text, overflow ellipsis for text in button (quick reply) * Updated tests
RasaHQ · Nov 14, 2024 · 87ceccb · 87ceccb
1 parent 839f336
commit 87ceccb
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 4 deletions.
diff --git a/packages/ui/src/components/quick-reply/quick-reply.scss b/packages/ui/src/components/quick-reply/quick-reply.scss
@@ -19,6 +19,15 @@
     flex-wrap: wrap;
     padding: 0 40px;
 
+    rasa-text::part(text) {
+      width: calc(100%);
+      max-width: 250px;
+      text-overflow: ellipsis;
+      display: inline-block;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
     &--disabled {
       pointer-events: none;
       opacity: 0.5;

diff --git a/packages/ui/src/components/quick-reply/quick-reply.tsx b/packages/ui/src/components/quick-reply/quick-reply.tsx
@@ -94,7 +94,7 @@ export class RasaQuickReply {
         {canShowText && this.quickReplyMessage.replies.length && (
           <div class={buttonsClassList}>
             {this.quickReplyMessage.replies.map((button, key) => (
-              <rasa-button {...button} key={key} isSelected={button.isSelected}>
+              <rasa-button {...button} key={key} isSelected={button.isSelected} title={button.text}>
                 <rasa-text value={button.text} disableParsing={true}></rasa-text>
               </rasa-button>
             ))}

diff --git a/packages/ui/src/components/text-message/text-message.test.tsx b/packages/ui/src/components/text-message/text-message.test.tsx
@@ -14,7 +14,7 @@ describe('rasa-text-message', () => {
     <mock:shadow-root>
       <rasa-text>
         <mock:shadow-root>
-          <span class="text">
+          <span class="text" part="text">
             Hello, World!
           </span>
         </mock:shadow-root>
@@ -56,7 +56,7 @@ describe('rasa-text-message', () => {
       <mock:shadow-root>
         <rasa-text>
           <mock:shadow-root>
-            <span class="text">
+            <span class="text" part="text">
               User message
             </span>
           </mock:shadow-root>

diff --git a/packages/ui/src/components/text/readme.md b/packages/ui/src/components/text/readme.md
@@ -23,6 +23,13 @@
 | `textStreamComplete` | Trigger on stream complete | `CustomEvent<{ value: true; }>` |
 
 
+## Shadow Parts
+
+| Part     | Description |
+| -------- | ----------- |
+| `"text"` |             |
+
+
 ## Dependencies
 
 ### Used by

diff --git a/packages/ui/src/components/text/text.tsx b/packages/ui/src/components/text/text.tsx
@@ -142,7 +142,7 @@ export class RasaText {
     if (this.disableParsing) {
       return (
         <Host>
-          <span class="text">{this.value}</span>
+          <span class="text" part="text">{this.value}</span>
         </Host>
       );
     }