From 87ceccb424e66030ff188c8b631ed56574a6c92d Mon Sep 17 00:00:00 2001
From: Petar Basic <67655608+petar-basic@users.noreply.github.com>
Date: Thu, 14 Nov 2024 17:06:16 +0100
Subject: [PATCH] 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
---
 packages/ui/src/components/quick-reply/quick-reply.scss  | 9 +++++++++
 packages/ui/src/components/quick-reply/quick-reply.tsx   | 2 +-
 .../ui/src/components/text-message/text-message.test.tsx | 4 ++--
 packages/ui/src/components/text/readme.md                | 7 +++++++
 packages/ui/src/components/text/text.tsx                 | 2 +-
 5 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/quick-reply/quick-reply.scss b/packages/ui/src/components/quick-reply/quick-reply.scss
index 2f90389..9b2acde 100644
--- 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
index 5feb02c..8a34a5e 100644
--- 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
index 2e1ca95..4c5f13c 100644
--- 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
index 893f43f..b7dd6a5 100644
--- 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
index 6380f03..f54a161 100644
--- 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>
       );
     }