fix(fuselage): Bubble missing text truncation (#1433)

RocketChat · Aug 29, 2024 · a214cfa · a214cfa
1 parent 0f393ff
commit a214cfa
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 0 deletions.
diff --git a/.changeset/thin-chairs-wash.md b/.changeset/thin-chairs-wash.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): Bubble missing text truncation
diff --git a/packages/fuselage/src/components/Bubble/Bubble.stories.tsx b/packages/fuselage/src/components/Bubble/Bubble.stories.tsx
@@ -58,6 +58,14 @@ WithoutAction.args = {
   secondary: true,
 };
 
+export const WithLargeText = Template.bind({});
+WithLargeText.args = {
+  children:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum libero viverra nulla varius, a consequat ante malesuada. Fusce bibendum, lacus sed fermentum sagittis, urna erat viverra lacus, eu pellentesque neque est nec nisl. Morbi in lobortis dui, ac consectetur mi.',
+  secondary: true,
+  onClick: action('click'),
+};
+
 export const Small = Template.bind({});
 Small.args = {
   children: '22 Nov 2023',

diff --git a/packages/fuselage/src/components/Bubble/Bubble.styles.scss b/packages/fuselage/src/components/Bubble/Bubble.styles.scss
@@ -49,6 +49,12 @@
 
     border-radius: lengths.border-radius(extra-large);
     column-gap: lengths.padding(8);
+
+    @include typography.use-with-truncated-text;
+
+    > span {
+      @include typography.use-with-truncated-text;
+    }
   }
 
   &:not(.rcx-bubble__group) &__item {

diff --git a/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap b/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap
@@ -142,6 +142,24 @@ exports[`[Bubble Rendering] renders Small without crashing 1`] = `
 </body>
 `;
 
+exports[`[Bubble Rendering] renders WithLargeText without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-bubble rcx-box rcx-box--full  "
+    >
+      <button
+        class="rcx-box rcx-box--full rcx-bubble__button rcx-bubble__button--secondary"
+      >
+        <span>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum libero viverra nulla varius, a consequat ante malesuada. Fusce bibendum, lacus sed fermentum sagittis, urna erat viverra lacus, eu pellentesque neque est nec nisl. Morbi in lobortis dui, ac consectetur mi.
+        </span>
+      </button>
+    </div>
+  </div>
+</body>
+`;
+
 exports[`[Bubble Rendering] renders WithoutAction without crashing 1`] = `
 <body>
   <div>