diff --git a/.changeset/thin-chairs-wash.md b/.changeset/thin-chairs-wash.md new file mode 100644 index 0000000000..634d7c6704 --- /dev/null +++ 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 index 74f16f2e42..538693fa38 100644 --- 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 index 19eae96cfd..c624272315 100644 --- 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 index 8efc3cac4e..546d9161a9 100644 --- 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`] = ` `; +exports[`[Bubble Rendering] renders WithLargeText without crashing 1`] = ` + +
+
+ +
+
+ +`; + exports[`[Bubble Rendering] renders WithoutAction without crashing 1`] = `