[CLOV-1347] Add BpkChatBubble component by RichardSyq · Pull Request #4315 · Skyscanner/backpack

Richard-Shen (RichardSyq) · 2026-03-24T07:54:15Z

Summary

Migrated the Bubble chat component from carhire-homepage's unstable_backpack/Bubble/ into a new official Backpack component: bpk-component-chat-bubble
Removed all carhire-specific dependencies (tracking hooks, i18n, IntersectionObserver)
Simplified API to flat props with children: ReactNode for content

New Component: `BpkChatBubble`

Supports four bubble types:

user — right-aligned user message bubble
bot — left-aligned bot/assistant message bubble
retry — retry action bubble
suggestion — suggestion chip bubble

Key Changes

No app-specific dependencies: removed useChatbotTracking, IntersectionObserverWrapper, useI18n, and formatChatMessage
Flat props API: consumers pass children directly instead of a ChatBubble data object
BEM-compliant SCSS: animation, RTL support, and sequential message corner-radius changes preserved
Full test suite: unit tests + accessibility tests
Storybook stories: all variants documented

Jira

https://skyscanner.atlassian.net/browse/CLOV-1347

🤖 Generated with Claude Code

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Remove role="presentation" from chat bubble div (WCAG SC 1.3.1 / 4.1.2) - Guard showFeedback rendering to bot type only - Fix systemPosition CSS classes to apply only to bot type (not retry) - Remove hardcoded English default for retryLabel - Remove non-descriptive aria-label default for suggestionAriaLabel - Replace raw :hover with utils.bpk-hover mixin (touch device guard) - Replace magic 0.2s/0.22s with tokens.$bpk-duration-sm - Replace $bpk-text-secondary-day with $bpk-line-day in box-shadow - Replace font-size: inherit with typography.bpk-body-default mixin - Add tests for showFeedback not rendering on user/retry types - Regenerate snapshots Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-24T08:05:50Z

Visit https://backpack.github.io/storybook-prs/4315 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-24T08:13:44Z

Visit https://backpack.github.io/storybook-prs/4315 to see this build running in a browser.

@include

Move gap declaration before @include to satisfy order/order rule Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-24T08:29:37Z

Visit https://backpack.github.io/storybook-prs/4315 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-24T08:31:20Z

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against abdfde8

- Use bpk-canvas-contrast-day background so white bot bubbles are visible - Rewrite MixedExample as single container for proper chat flow layout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-24T09:17:49Z

Visit https://backpack.github.io/storybook-prs/4315 to see this build running in a browser.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-24T09:32:27Z

Visit https://backpack.github.io/storybook-prs/4315 to see this build running in a browser.

Copilot

Pull request overview

Adds a new official Backpack web component package, bpk-component-chat-bubble, migrated from the car hire homepage implementation with a simplified, app-agnostic API.

Changes:

Introduces BpkChatBubble supporting user, bot, retry, and suggestion variants with sequencing + animation delay support.
Adds styling via new SCSS module (BEM modifiers, RTL, entrance animation, sequencing corner radii).
Adds unit tests, accessibility (jest-axe) tests, Storybook examples, and snapshots.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/bpk-component-chat-bubble/src/BpkChatBubble.tsx	New component implementation and props API.
packages/bpk-component-chat-bubble/src/BpkChatBubble.module.scss	Visual styling, RTL, animations, and sequencing modifiers.
packages/bpk-component-chat-bubble/src/BpkChatBubble-test.tsx	Unit test suite for rendering and interactions.
packages/bpk-component-chat-bubble/src/accessibility-test.tsx	jest-axe coverage for all variants.
packages/bpk-component-chat-bubble/src/snapshots/BpkChatBubble-test.tsx.snap	Snapshots for rendered variants.
packages/bpk-component-chat-bubble/index.ts	Package entrypoint + type exports.
packages/bpk-component-chat-bubble/README.md	Public documentation (installation/usage/props).
examples/bpk-component-chat-bubble/stories.tsx	Storybook stories registration.
examples/bpk-component-chat-bubble/examples.tsx	Story implementations for each variant/sequence.
examples/bpk-component-chat-bubble/examples.module.scss	Example layout styling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-25T06:59:55Z

packages/bpk-component-chat-bubble/src/BpkChatBubble.module.scss

+      cubic-bezier(0.2, 0, 0, 1) forwards;
+    animation-delay: var(--anim-delay, 0ms);
+
+    @media (prefers-reduced-motion: reduce) {


In the prefers-reduced-motion branch you swap to an opacity-only keyframe, but the base transform: translateY(...) scale(...) remains. This means reduced-motion users may see the bubble stay permanently shifted/scaled. Consider also resetting transform to the final state (e.g. translateY(0) scale(1) / none) within the reduced-motion media query.

Suggested change

@media (prefers-reduced-motion: reduce) {

@media (prefers-reduced-motion: reduce) {

transform: translateY(0) scale(1);

Copilot · 2026-03-25T06:59:55Z

packages/bpk-component-chat-bubble/src/BpkChatBubble.module.scss

+    align-items: center;
+    gap: tokens.bpk-spacing-base();
+
+    > span {


.bpk-chat-bubble__thumbs > span { ... } doesn’t match the current DOM (thumb buttons render as <button> elements, not wrapped in spans), so this rule is dead code. Consider removing it or updating the selector to target the actual child element if a style override is still needed.

Suggested change

> span {

> button {

Copilot · 2026-03-25T06:59:55Z

packages/bpk-component-chat-bubble/README.md

+| retryLabel         | string                                | false    | 'Try again'   |
+| onSuggestionClick  | () => void                            | false    | -             |
+| suggestionAriaLabel | string                               | false    | 'suggestion'  |


Copilot · 2026-03-25T06:59:56Z

examples/bpk-component-chat-bubble/examples.tsx

+export const BotBubbleExample = () => (
+  <div className={getClassName('bpk-chat-bubble-examples')}>
+    <BpkChatBubble type="bot">
+      {"Hey! I'm your car hire assistant. Feel free to ask me anything about renting a car, and I\u0027ll put my thinking cap on."}


BotBubbleExample contains a JSX string literal with a \u0027 escape sequence, which makes the example hard to read and is inconsistent with the rest of the examples using '. Consider rewriting this as normal JSX text (or a regular string) and escaping apostrophes consistently.

Suggested change

{"Hey! I'm your car hire assistant. Feel free to ask me anything about renting a car, and I\u0027ll put my thinking cap on."}

Hey! I'm your car hire assistant. Feel free to ask me anything about renting a car, and I'll put my thinking cap on.

Copilot · 2026-03-25T06:59:56Z

packages/bpk-component-chat-bubble/src/BpkChatBubble.tsx

+  const v = Math.min(ms, max);
+  return Math.round(v / 50) * 50;


clampAndSnap only clamps the upper bound. If a consumer passes a negative animationDelay (or NaN), the computed CSS variable can become a negative/invalid animation-delay, which contradicts the documented 0–300ms contract. Consider clamping to a minimum of 0 (and handling non-finite numbers) before snapping.

Suggested change

const v = Math.min(ms, max);

return Math.round(v / 50) * 50;

const safeMs = Number.isFinite(ms) ? ms : 0;

const clamped = Math.min(Math.max(safeMs, 0), max);

return Math.round(clamped / 50) * 50;

Copilot · 2026-03-25T06:59:56Z

packages/bpk-component-chat-bubble/src/BpkChatBubble.tsx

+    isBot && systemPosition === 'first' && 'bpk-chat-bubble--system-first',
+    isBot && systemPosition === 'middle' && 'bpk-chat-bubble--system-middle',
+    isBot && systemPosition === 'last' && 'bpk-chat-bubble--system-last',


systemPosition classes are only applied when type === 'bot', but the SCSS modifiers (bpk-chat-bubble--system-*) aren’t bot-specific and a retry bubble is also rendered left-aligned like a system message. If retry bubbles should participate in sequencing, consider applying systemPosition modifiers for retry as well (or rename the prop to reflect bot-only behavior).

Suggested change

isBot && systemPosition === 'first' && 'bpk-chat-bubble--system-first',

isBot && systemPosition === 'middle' && 'bpk-chat-bubble--system-middle',

isBot && systemPosition === 'last' && 'bpk-chat-bubble--system-last',

(isBot || isRetry) && systemPosition === 'first' && 'bpk-chat-bubble--system-first',

(isBot || isRetry) && systemPosition === 'middle' && 'bpk-chat-bubble--system-middle',

(isBot || isRetry) && systemPosition === 'last' && 'bpk-chat-bubble--system-last',

Copilot · 2026-03-25T06:59:56Z

packages/bpk-component-chat-bubble/src/BpkChatBubble.tsx

+              onClick={onRetry}
+              disabled={retryDisabled}
+            >
+              {retryLabel}


When type="retry" and onRetry is provided, the retry button renders {retryLabel} but retryLabel is optional and has no default. This can produce an empty button with no accessible name. Consider defaulting retryLabel (e.g. to "Try again") and/or making it required whenever onRetry is set.

Suggested change

{retryLabel}

{retryLabel || 'Try again'}

skyscanner-backpack-bot · 2026-03-25T07:02:28Z

Visit https://backpack.github.io/storybook-prs/4315 to see this build running in a browser.

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-03-26T13:22:32Z

packages/bpk-component-chat-bubble/src/BpkChatBubble.tsx

+  return Math.round(v / 50) * 50;
+};
+
+export type ChatBubbleType = 'user' | 'bot' | 'retry' | 'suggestion';


Can we rename the suggestion one to match what is in Figma (ButtonBubble)

We also need a 'carsButtonBubble' as they have a custom shadow hover. Can you work with Adam to understand hover on the button bubble?

[CLOV-1347] Add BpkChatBubble component migrated from carhire-homepage

9d10b2d

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Richard-Shen (RichardSyq) added minor Non breaking change ai: claude labels Mar 24, 2026

Richard-Shen (RichardSyq) self-assigned this Mar 24, 2026

Richard Shen and others added 2 commits March 24, 2026 15:58

Remove accidentally committed local symlinks for bpk-component-icon

5d80c06

[CLOV-1347] Fix SCSS property ordering lint error in BpkChatBubble

dd39ca4

Move gap declaration before @include to satisfy order/order rule Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

[CLOV-1347] Fix Storybook examples for BpkChatBubble

d1c4673

- Use bpk-canvas-contrast-day background so white bot bubbles are visible - Rewrite MixedExample as single container for proper chat flow layout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

[CLOV-1347] Fix JSX curly brace lint error in chat bubble examples

45a4d4b

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Richard-Shen (RichardSyq) marked this pull request as ready for review March 25, 2026 06:55

Copilot AI review requested due to automatic review settings March 25, 2026 06:55

Merge branch 'main' into RichardSyq/carhire-to-backpack

abdfde8

Copilot started reviewing on behalf of Richard-Shen (RichardSyq) March 25, 2026 06:55 View session

Copilot AI reviewed Mar 25, 2026

View reviewed changes

Gert-Jan Vercauteren (gert-janvercauteren) reviewed Mar 26, 2026

View reviewed changes

	@media (prefers-reduced-motion: reduce) {
	@media (prefers-reduced-motion: reduce) {
	transform: translateY(0) scale(1);

	{"Hey! I'm your car hire assistant. Feel free to ask me anything about renting a car, and I\u0027ll put my thinking cap on."}
	Hey! I'm your car hire assistant. Feel free to ask me anything about renting a car, and I'll put my thinking cap on.

-  const v = Math.min(ms, max);
-  return Math.round(v / 50) * 50;
+  const safeMs = Number.isFinite(ms) ? ms : 0;
+  const clamped = Math.min(Math.max(safeMs, 0), max);
+  return Math.round(clamped / 50) * 50;

Conversation

Richard-Shen (RichardSyq) commented Mar 24, 2026

Summary

New Component: BpkChatBubble

Key Changes

Jira

Uh oh!

skyscanner-backpack-bot bot commented Mar 24, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 24, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 24, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Browser support

Uh oh!

skyscanner-backpack-bot bot commented Mar 24, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 24, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Mar 25, 2026

Uh oh!

Gert-Jan Vercauteren (gert-janvercauteren) Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Gert-Jan Vercauteren (gert-janvercauteren) Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

New Component: `BpkChatBubble`

skyscanner-backpack-bot bot commented Mar 24, 2026 •

edited

Loading