@linktr.ee/messaging-react 4.4.1-rc-1787614892 → 4.4.1-rc-1787616779

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.4.1-rc-1787614892",
+  "version": "4.4.1-rc-1787616779",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.6.0-rc-1787614892",
-    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1787614892",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1787616779",
+    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1787616779",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/MessageBubble/MessageBubble.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta = {
 export default meta
 
 const Canvas = ({ children }: { children: React.ReactNode }) => (
-  <div className="min-h-screen w-full space-y-6 bg-[#F9F7F4] p-12">
+  <div className="str-chat min-h-screen w-full space-y-6 bg-[#F9F7F4] p-12">
     {children}
   </div>
 )
@@ -27,7 +27,9 @@ const Row = ({
   <div>
     <p className="mb-2 text-xs font-medium text-black/40">{label}</p>
     <div
-      className={`flex ${align === 'end' ? 'justify-end' : 'justify-start'}`}
+      className={`str-chat__li str-chat__li--single ${
+        align === 'end' ? 'flex justify-end' : 'flex justify-start'
+      }`}
     >
       {children}
     </div>
@@ -43,29 +45,25 @@ const MULTILINE = 'Line one\nLine two\nLine three'
 export const Gallery: StoryFn = () => (
   <Canvas>
     <Row label="Received — short" align="start">
-      <MessageBubble.Received text={SHORT} className="w-fit" />
+      <MessageBubble.Received text={SHORT} />
     </Row>
     <Row label="Received — with header (sender name)" align="start">
-      <MessageBubble.Received
-        header="Brie"
-        text={LONG}
-        className="w-fit max-w-[520px]"
-      />
+      <MessageBubble.Received header="Brie" text={LONG} />
     </Row>
     <Row label="Received — no tail" align="start">
-      <MessageBubble.Received text={SHORT} tail={false} className="w-fit" />
+      <MessageBubble.Received text={SHORT} tail={false} />
     </Row>
     <Row label="Sent — short" align="end">
-      <MessageBubble.Sent text={SHORT} className="w-fit" />
+      <MessageBubble.Sent text={SHORT} />
     </Row>
     <Row label="Sent — long" align="end">
-      <MessageBubble.Sent text={LONG} className="w-fit max-w-[520px]" />
+      <MessageBubble.Sent text={LONG} />
     </Row>
     <Row label="Sent — multiline" align="end">
-      <MessageBubble.Sent text={MULTILINE} className="w-fit" />
+      <MessageBubble.Sent text={MULTILINE} />
     </Row>
     <Row label="Sent — no tail" align="end">
-      <MessageBubble.Sent text={SHORT} tail={false} className="w-fit" />
+      <MessageBubble.Sent text={SHORT} tail={false} />
     </Row>
   </Canvas>
 )
@@ -78,10 +76,7 @@ export const Gallery: StoryFn = () => (
 export const PreviewToRecipient: StoryFn = () => (
   <Canvas>
     <Row label="How your reply will look to the visitor" align="start">
-      <MessageBubble.Received
-        text="Thanks so much for the support — I just dropped a new track, hope you love it! 🎶"
-        className="w-fit max-w-[520px]"
-      />
+      <MessageBubble.Received text="Thanks so much for the support — I just dropped a new track, hope you love it! 🎶" />
     </Row>
   </Canvas>
 )
@@ -93,10 +88,7 @@ export const PreviewToRecipient: StoryFn = () => (
 export const PreviewInChannel: StoryFn = () => (
   <Canvas>
     <Row label="How your reply looks to you in the channel" align="end">
-      <MessageBubble.Sent
-        text="Thanks so much for the support — I just dropped a new track, hope you love it! 🎶"
-        className="w-fit max-w-[520px]"
-      />
+      <MessageBubble.Sent text="Thanks so much for the support — I just dropped a new track, hope you love it! 🎶" />
     </Row>
   </Canvas>
 )

package/src/components/MessageBubble/MessageBubble.test.tsx

@@ -22,12 +22,15 @@ describe('MessageBubble', () => {
     const { rerender } = renderWithProviders(
       <MessageBubble.Sent text="tailed" />
     )
-    // The bubble box wraps the text; its last child is the tail <span>.
-    const bubble = screen.getByText('tailed').parentElement as HTMLElement
+    const bubble = screen
+      .getByText('tailed')
+      .closest('.str-chat__message-bubble') as HTMLElement
     expect(bubble.querySelector('span[aria-hidden="true"]')).not.toBeNull()
 
     rerender(<MessageBubble.Sent text="tailed" tail={false} />)
-    const bubbleNoTail = screen.getByText('tailed').parentElement as HTMLElement
+    const bubbleNoTail = screen
+      .getByText('tailed')
+      .closest('.str-chat__message-bubble') as HTMLElement
     expect(bubbleNoTail.querySelector('span[aria-hidden="true"]')).toBeNull()
   })
 
@@ -47,13 +50,17 @@ describe('MessageBubble', () => {
 
   it('applies the sent and received surface treatments from theme vars', () => {
     const { rerender } = renderWithProviders(<MessageBubble.Sent text="mine" />)
-    const sent = screen.getByText('mine').parentElement as HTMLElement
+    const sent = screen
+      .getByText('mine')
+      .closest('.str-chat__message-bubble') as HTMLElement
     expect(sent.style.backgroundColor).toBe(
       'var(--str-chat__own-message-bubble-background-color, #1e2330)'
     )
 
     rerender(<MessageBubble.Received text="theirs" />)
-    const received = screen.getByText('theirs').parentElement as HTMLElement
+    const received = screen
+      .getByText('theirs')
+      .closest('.str-chat__message-bubble') as HTMLElement
     expect(received.style.backgroundColor).toBe(
       'var(--str-chat__message-bubble-background-color, #f1f0ee)'
     )
@@ -61,16 +68,20 @@ describe('MessageBubble', () => {
 
   it('masks message content from session replay by default', () => {
     renderWithProviders(<MessageBubble.Received header="Brie" text="secret" />)
-    const bubble = screen.getByText('secret').parentElement as HTMLElement
+    const bubble = screen
+      .getByText('secret')
+      .closest('.str-chat__message-bubble') as HTMLElement
     expect(bubble.getAttribute('data-dd-privacy')).toBe('mask')
   })
 
-  it('forwards width/className onto the bubble box (width is caller-controlled)', () => {
+  it('forwards width/className onto the outermost message wrapper', () => {
     renderWithProviders(
       <MessageBubble.Sent text="wide" className="w-fit max-w-[520px]" />
     )
-    const bubble = screen.getByText('wide').parentElement as HTMLElement
-    expect(bubble.classList.contains('w-fit')).toBe(true)
-    expect(bubble.className).toContain('max-w-[520px]')
+    const message = screen
+      .getByText('wide')
+      .closest('.str-chat__message') as HTMLElement
+    expect(message.classList.contains('w-fit')).toBe(true)
+    expect(message.className).toContain('max-w-[520px]')
   })
 })

package/src/components/MessageBubble/components/_shared/BubbleShell.tsx

@@ -15,8 +15,8 @@ export interface BubbleShellProps {
   /**
    * Width is caller-controlled — pass a width class in `className`
    * (`w-fit` to hug the text for chat/preview bubbles, `w-full` to fill the
-   * container for card-like list rows). With no width class the bubble is a
-   * block element and fills its container.
+   * container for card-like list rows). Applied to the outermost Stream
+   * message wrapper. With no width class the bubble fills its container.
    */
   className?: string
 }
@@ -65,25 +65,42 @@ const BubbleShell: React.FC<BubbleShellProps> = ({
   className,
 }) => (
   <div
-    data-dd-privacy="mask"
     className={classNames(
-      'relative px-4 py-3',
-      'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',
+      'str-chat__message',
+      variant === 'sent' ? 'str-chat__message--me' : 'str-chat__message--other',
       className
     )}
-    style={{
-      ...SURFACE_STYLE_BY_VARIANT[variant],
-      borderRadius: 'var(--str-chat__message-bubble-border-radius, 1.5rem)',
-      isolation: 'isolate',
-    }}
   >
-    {header != null && (
-      <div className="mb-1 font-medium" data-testid="message-bubble-header">
-        {header}
+    <div className="str-chat__message-inner">
+      <div
+        data-dd-privacy="mask"
+        className={classNames(
+          'str-chat__message-bubble',
+          'relative',
+          'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]'
+        )}
+        style={{
+          ...SURFACE_STYLE_BY_VARIANT[variant],
+          borderRadius: 'var(--str-chat__message-bubble-border-radius, 1.5rem)',
+          isolation: 'isolate',
+        }}
+      >
+        <div className="str-chat__message-text">
+          {header != null && (
+            <div
+              className="mb-1 font-medium"
+              data-testid="message-bubble-header"
+            >
+              {header}
+            </div>
+          )}
+          <p className="m-0 whitespace-pre-wrap break-words hyphens-manual">
+            {text}
+          </p>
+          {tail && <BubbleTail variant={variant} />}
+        </div>
       </div>
-    )}
-    <p className="m-0 whitespace-pre-wrap break-words hyphens-manual">{text}</p>
-    {tail && <BubbleTail variant={variant} />}
+    </div>
   </div>
 )
 

package/src/components/MessageBubble/components/_shared/bubbleTail.tsx

@@ -36,9 +36,9 @@ export const BubbleTail = ({ variant }: { variant: MessageBubbleVariant }) => (
     aria-hidden="true"
     className="pointer-events-none absolute bottom-0 z-[-1] h-[1.4375rem] w-5"
     style={{
-      insetInlineEnd: variant === 'sent' ? 'calc(-1 * 0.25rem)' : undefined,
+      insetInlineEnd: variant === 'sent' ? 'calc(-1 * 0.3125rem)' : undefined,
       insetInlineStart:
-        variant === 'received' ? 'calc(-1 * 0.25rem)' : undefined,
+        variant === 'received' ? 'calc(-1 * 0.3125rem)' : undefined,
       transform: variant === 'received' ? 'scaleX(-1)' : undefined,
       transformOrigin: 'center',
       backgroundColor: BG_VAR_BY_VARIANT[variant],

package/src/components/MessageBubble/types.ts

@@ -20,10 +20,10 @@ export interface MessageBubbleBaseProps {
    */
   tail?: boolean
   /**
-   * Extra classes on the outer bubble. Width is caller-controlled: pass
-   * `w-fit` to hug the text (chat/preview) or `w-full` to fill the container
-   * (card-like list rows). With no width class the bubble fills its
-   * container. Also where you'd set `max-w-[…]`.
+   * Extra classes on the outermost Stream message wrapper. Width is
+   * caller-controlled: pass `w-fit` to hug the text (chat/preview) or
+   * `w-full` to fill the container (card-like list rows). With no width
+   * class the bubble fills its container. Also where you'd set `max-w-[…]`.
    */
   className?: string
 }

package/src/components/RichCard/RichCard.stories.tsx

@@ -95,6 +95,13 @@ const COLLECTION: RichCardBaseProps = {
   imagePresentation: 'fan',
   actions: [secondaryLink('View collection', 'tr.ee/briesummer')],
 }
+const NEWLINE_SUBTITLE: RichCardBaseProps = {
+  ...OFFICIAL_WELCOME,
+  title: 'Start every conversation with a personal welcome message!',
+  subtitle:
+    '👋 Say hello as people arrive\n✨ Spark conversations\n💬 Add automated FAQs',
+  subtitleLines: 6,
+}
 
 const bothSides = (props: RichCardBaseProps) => (
   <>
@@ -113,7 +120,8 @@ const bothSides = (props: RichCardBaseProps) => (
  * The three real surfaces that converge on `linktree_rich_card`, each shown
  * Received (light) and Sent (dark). They differ only by knobs: the official
  * welcome card is `hero + primary`; a single-link broadcast is `hero +
- * secondary`; a collection is `fan + secondary`.
+ * secondary`; a collection is `fan + secondary`. A fourth row shows a
+ * newline-separated subtitle (the onboarding result-card shape).
  */
 export const Instances: StoryFn = () => (
   <Table>
@@ -131,6 +139,10 @@ export const Instances: StoryFn = () => (
         <RowLabel>Collection — fan · secondary</RowLabel>
         {bothSides(COLLECTION)}
       </tr>
+      <tr>
+        <RowLabel>Subtitle with newlines</RowLabel>
+        {bothSides(NEWLINE_SUBTITLE)}
+      </tr>
     </tbody>
   </Table>
 )

package/src/components/RichCard/RichCard.test.tsx

@@ -41,6 +41,26 @@ describe('RichCard', () => {
     expect(card).toHaveTextContent('👋 Say hello as people arrive')
     expect(card).toHaveTextContent('✨ Spark conversations')
     expect(card).toHaveTextContent('💬 Add automated FAQs')
+    expect(card.querySelectorAll('br')).toHaveLength(2)
+  })
+
+  it('does not insert line breaks when the subtitle is clamped to one line', async () => {
+    renderWithProviders(
+      <RichCard.Received
+        title="Welcome"
+        subtitle={
+          '👋 Say hello as people arrive\n✨ Spark conversations\n💬 Add automated FAQs'
+        }
+        subtitleLines={1}
+        images={[HERO]}
+      />
+    )
+
+    const card = await screen.findByTestId('rich-card')
+    expect(card.querySelectorAll('br')).toHaveLength(0)
+    expect(screen.getByText(/Say hello as people arrive/)).toHaveClass(
+      'truncate'
+    )
   })
 
   it('renders a single hero image for the hero presentation', async () => {

package/src/components/RichCard/RichCardBody.tsx

@@ -18,17 +18,27 @@ export interface RichCardBodyProps {
   actions?: RichCardActionButton[]
 }
 
-// Mirror LinkAttachment's `CardBody` type scales so the two cards read
-// identically (14/20 medium title, 12/16 subtitle). Colour is always supplied
-// via `chinTextColor`, so no per-variant text class is needed here.
-// `[text-wrap:balance]` evens the title's line lengths so a two-line title
-// doesn't drop a single word onto its own line; `[text-wrap:pretty]` does the
-// lighter last-line-widow fix for the longer subtitle prose. Arbitrary-property
-// form so the utilities generate regardless of the consumer's Tailwind version.
+// body/small from Figma. Title is medium; subtitle is regular. No
+// `text-wrap:balance` — it evened two-line titles by breaking mid-phrase.
 const TITLE_CLASS =
-  'line-clamp-2 text-[14px] font-medium leading-5 tracking-[0.28px] [text-wrap:balance]'
-const SUBTITLE_CLASS =
-  'text-[12px] leading-4 tracking-[0.24px] [text-wrap:pretty]'
+  'line-clamp-2 text-[14px] font-medium leading-5 tracking-[0.02em]'
+const SUBTITLE_CLASS = 'text-[14px] leading-5 tracking-[0.02em]'
+
+/** `<br>` ignores vertical margin; the spacer is the 6px Figma gap. */
+const LineBreak: React.FC = () => (
+  <>
+    <br />
+    <span aria-hidden className="block h-1.5" />
+  </>
+)
+
+const withLineBreaks = (text: string) =>
+  text.split(/\r?\n/).map((line, index, lines) => (
+    <React.Fragment key={index}>
+      {line}
+      {index < lines.length - 1 ? <LineBreak /> : null}
+    </React.Fragment>
+  ))
 
 /**
  * The action footer. `layout` (chosen by the first action's `variant` in
@@ -56,7 +66,7 @@ const RichCardFooter: React.FC<{
         // card's width; the button truncates within it and the copy yields
         // first. `stacked` keeps the full-width buttons-below layout.
         stacked
-          ? 'mt-3 flex-col'
+          ? 'mt-4 flex-col'
           : 'min-w-0 max-w-[60%] flex-row flex-wrap justify-end'
       )}
     >
@@ -111,7 +121,7 @@ const RichCardBody: React.FC<RichCardBodyProps> = ({
     hasActions && (actions?.[0]?.variant ?? 'primary') === 'secondary'
 
   const textBlock = (
-    <div className="flex min-w-0 flex-1 flex-col gap-[2px]">
+    <div className="flex min-w-0 flex-1 flex-col gap-4">
       {hasTitle && (
         <div className="flex min-w-0 items-center gap-2">
           {appIcon ? <span className="shrink-0">{appIcon}</span> : null}
@@ -128,12 +138,11 @@ const RichCardBody: React.FC<RichCardBodyProps> = ({
         <p
           className={classNames(
             SUBTITLE_CLASS,
-            subtitleLines > 1 && 'whitespace-pre-line',
             subtitleLines <= 1 && 'truncate'
           )}
           style={subtitleStyle}
         >
-          {subtitle}
+          {subtitleLines > 1 ? withLineBreaks(subtitle ?? '') : subtitle}
         </p>
       )}
     </div>