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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.4.1-rc-1787614546",
+  "version": "4.4.1",
   "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-1787614546",
-    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1787614546",
+    "@linktr.ee/messaging-core": "^2.6.0",
+    "@linktr.ee/messaging-taxonomy": "^0.11.0",
     "@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="str-chat min-h-screen w-full space-y-6 bg-[#F9F7F4] p-12">
+  <div className="min-h-screen w-full space-y-6 bg-[#F9F7F4] p-12">
     {children}
   </div>
 )
@@ -26,14 +26,10 @@ const Row = ({
 }) => (
   <div>
     <p className="mb-2 text-xs font-medium text-black/40">{label}</p>
-    <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
+      className={`flex ${align === 'end' ? 'justify-end' : 'justify-start'}`}
+    >
+      {children}
     </div>
   </div>
 )

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

@@ -22,15 +22,12 @@ describe('MessageBubble', () => {
     const { rerender } = renderWithProviders(
       <MessageBubble.Sent text="tailed" />
     )
-    const bubble = screen
-      .getByText('tailed')
-      .closest('.str-chat__message-bubble') as HTMLElement
+    // The bubble box wraps the text; its last child is the tail <span>.
+    const bubble = screen.getByText('tailed').parentElement as HTMLElement
     expect(bubble.querySelector('span[aria-hidden="true"]')).not.toBeNull()
 
     rerender(<MessageBubble.Sent text="tailed" tail={false} />)
-    const bubbleNoTail = screen
-      .getByText('tailed')
-      .closest('.str-chat__message-bubble') as HTMLElement
+    const bubbleNoTail = screen.getByText('tailed').parentElement as HTMLElement
     expect(bubbleNoTail.querySelector('span[aria-hidden="true"]')).toBeNull()
   })
 
@@ -50,17 +47,13 @@ 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')
-      .closest('.str-chat__message-bubble') as HTMLElement
+    const sent = screen.getByText('mine').parentElement 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')
-      .closest('.str-chat__message-bubble') as HTMLElement
+    const received = screen.getByText('theirs').parentElement as HTMLElement
     expect(received.style.backgroundColor).toBe(
       'var(--str-chat__message-bubble-background-color, #f1f0ee)'
     )
@@ -68,9 +61,7 @@ describe('MessageBubble', () => {
 
   it('masks message content from session replay by default', () => {
     renderWithProviders(<MessageBubble.Received header="Brie" text="secret" />)
-    const bubble = screen
-      .getByText('secret')
-      .closest('.str-chat__message-bubble') as HTMLElement
+    const bubble = screen.getByText('secret').parentElement as HTMLElement
     expect(bubble.getAttribute('data-dd-privacy')).toBe('mask')
   })
 
@@ -78,9 +69,7 @@ describe('MessageBubble', () => {
     renderWithProviders(
       <MessageBubble.Sent text="wide" className="w-fit max-w-[520px]" />
     )
-    const bubble = screen
-      .getByText('wide')
-      .closest('.str-chat__message-bubble') as HTMLElement
+    const bubble = screen.getByText('wide').parentElement 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,8 +67,7 @@ const BubbleShell: React.FC<BubbleShellProps> = ({
   <div
     data-dd-privacy="mask"
     className={classNames(
-      'str-chat__message-bubble',
-      'relative',
+      'relative px-4 py-3',
       'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',
       className
     )}
@@ -78,17 +77,13 @@ const BubbleShell: React.FC<BubbleShellProps> = ({
       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>
+    {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>
 )
 

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.3125rem)' : undefined,
+      insetInlineEnd: variant === 'sent' ? 'calc(-1 * 0.25rem)' : undefined,
       insetInlineStart:
-        variant === 'received' ? 'calc(-1 * 0.3125rem)' : undefined,
+        variant === 'received' ? 'calc(-1 * 0.25rem)' : undefined,
       transform: variant === 'received' ? 'scaleX(-1)' : undefined,
       transformOrigin: 'center',
       backgroundColor: BG_VAR_BY_VARIANT[variant],

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

@@ -95,13 +95,6 @@ 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) => (
   <>
@@ -120,8 +113,7 @@ 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`. A fourth row shows a
- * newline-separated subtitle (the onboarding result-card shape).
+ * secondary`; a collection is `fan + secondary`.
  */
 export const Instances: StoryFn = () => (
   <Table>
@@ -139,10 +131,6 @@ 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,26 +41,6 @@ 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,27 +18,17 @@ export interface RichCardBodyProps {
   actions?: RichCardActionButton[]
 }
 
-// body/small from Figma. Title is medium; subtitle is regular. No
-// `text-wrap:balance` — it evened two-line titles by breaking mid-phrase.
+// 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.
 const TITLE_CLASS =
-  '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>
-  ))
+  '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]'
 
 /**
  * The action footer. `layout` (chosen by the first action's `variant` in
@@ -66,7 +56,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-4 flex-col'
+          ? 'mt-3 flex-col'
           : 'min-w-0 max-w-[60%] flex-row flex-wrap justify-end'
       )}
     >
@@ -121,7 +111,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-4">
+    <div className="flex min-w-0 flex-1 flex-col gap-[2px]">
       {hasTitle && (
         <div className="flex min-w-0 items-center gap-2">
           {appIcon ? <span className="shrink-0">{appIcon}</span> : null}
@@ -138,11 +128,12 @@ const RichCardBody: React.FC<RichCardBodyProps> = ({
         <p
           className={classNames(
             SUBTITLE_CLASS,
+            subtitleLines > 1 && 'whitespace-pre-line',
             subtitleLines <= 1 && 'truncate'
           )}
           style={subtitleStyle}
         >
-          {subtitleLines > 1 ? withLineBreaks(subtitle ?? '') : subtitle}
+          {subtitle}
         </p>
       )}
     </div>