@linktr.ee/messaging-react 4.4.0 → 4.4.1-rc-1787614546

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.4.0",
+  "version": "4.4.1-rc-1787614546",
   "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.5.0",
-    "@linktr.ee/messaging-taxonomy": "^0.11.0",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1787614546",
+    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1787614546",
     "@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>
 )
@@ -26,10 +26,14 @@ 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'}`}
-    >
-      {children}
+    <div className="str-chat__li str-chat__li--single">
+      <div
+        className={`str-chat__message ${
+          align === 'end' ? 'str-chat__message--me' : 'str-chat__message--other'
+        }`}
+      >
+        <div className="str-chat__message-inner">{children}</div>
+      </div>
     </div>
   </div>
 )

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,7 +68,9 @@ 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')
   })
 
@@ -69,7 +78,9 @@ describe('MessageBubble', () => {
     renderWithProviders(
       <MessageBubble.Sent text="wide" className="w-fit max-w-[520px]" />
     )
-    const bubble = screen.getByText('wide').parentElement as HTMLElement
+    const bubble = screen
+      .getByText('wide')
+      .closest('.str-chat__message-bubble') as HTMLElement
     expect(bubble.classList.contains('w-fit')).toBe(true)
     expect(bubble.className).toContain('max-w-[520px]')
   })

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

@@ -67,7 +67,8 @@ const BubbleShell: React.FC<BubbleShellProps> = ({
   <div
     data-dd-privacy="mask"
     className={classNames(
-      'relative px-4 py-3',
+      'str-chat__message-bubble',
+      'relative',
       'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',
       className
     )}
@@ -77,13 +78,17 @@ const BubbleShell: React.FC<BubbleShellProps> = ({
       isolation: 'isolate',
     }}
   >
-    {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 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>
 )
 

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/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>