Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a new BpkThinking component to the Backpack design system, migrated from the carhire-homepage repository. The component displays an animated thinking indicator with bouncing dots and a speech bubble, designed to provide visual feedback during AI or processing operations.
Changes:
- Introduces a new
bpk-component-thinkingpackage with TypeScript component, SCSS styles, comprehensive tests, and accessibility features - Adds Storybook examples demonstrating various use cases including default, custom content, and long content scenarios
- Includes comprehensive documentation covering usage, accessibility guidelines, and animation details
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/bpk-component-thinking/src/BpkThinking.tsx | Main component implementation with required accessibility label and optional custom content |
| packages/bpk-component-thinking/src/BpkThinking.module.scss | Styles with animations, RTL support, and reduced motion preferences |
| packages/bpk-component-thinking/src/BpkThinking-test.tsx | Unit tests covering props, rendering, and accessibility features |
| packages/bpk-component-thinking/src/accessibility-test.tsx | Automated accessibility tests using jest-axe |
| packages/bpk-component-thinking/index.ts | Package exports for component and types |
| packages/bpk-component-thinking/README.md | Complete documentation with usage examples and accessibility guidelines |
| examples/bpk-component-thinking/stories.tsx | Storybook configuration with visual test variants |
| examples/bpk-component-thinking/examples.tsx | Example implementations demonstrating different use cases |
| examples/bpk-component-thinking/examples.module.scss | Styling for example layouts |
| MIGRATION_SUMMARY.md | Detailed migration documentation covering transformations and compliance |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| - Spacing: `bpk-spacing-base()`, `bpk-spacing-md()`, `bpk-spacing-xxl()` | ||
| - Colors: `$bpk-surface-contrast-day`, `$bpk-text-on-dark-day` | ||
| - Border radius: `$bpk-border-radius-lg`, `$bpk-border-radius-xs`, `$bpk-border-radius-pill` |
There was a problem hiding this comment.
The documentation lists $bpk-border-radius-pill as a used design token, but this token does not appear in the SCSS file. Only $bpk-border-radius-lg and $bpk-border-radius-xs are actually used in the styles.
| - Border radius: `$bpk-border-radius-lg`, `$bpk-border-radius-xs`, `$bpk-border-radius-pill` | |
| - Border radius: `$bpk-border-radius-lg`, `$bpk-border-radius-xs` |
MIGRATION_SUMMARY.md
Outdated
| ### Component Files (7 files): | ||
| 1. `packages/bpk-component-thinking/index.ts` | ||
| 2. `packages/bpk-component-thinking/README.md` | ||
| 3. `packages/bpk-component-thinking/src/BpkThinking.tsx` | ||
| 4. `packages/bpk-component-thinking/src/BpkThinking.module.scss` | ||
| 5. `packages/bpk-component-thinking/src/BpkThinking-test.tsx` | ||
| 6. `packages/bpk-component-thinking/src/accessibility-test.tsx` | ||
| 7. `examples/bpk-component-thinking/examples.tsx` | ||
| 8. `examples/bpk-component-thinking/examples.module.scss` | ||
| 9. `examples/bpk-component-thinking/stories.tsx` |
There was a problem hiding this comment.
The heading states "7 files" but lists 9 files. Update the heading to "Component Files (9 files):" to match the actual count.
|
Visit https://backpack.github.io/storybook-prs/4229 to see this build running in a browser. |
|
Visit https://backpack.github.io/storybook-prs/4229 to see this build running in a browser. |
This file is a build artifact and should not have been modified. Restored to match main branch version. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
|
Visit https://backpack.github.io/storybook-prs/4229 to see this build running in a browser. |
| // OnDark variant: uses Night Sky blue (#054184) on dark backgrounds | ||
| &--on-dark { | ||
| .bpk-thinking__dots--dot { | ||
| background-color: tokens.$bpk-private-chip-on-dark-on-background-night; |
There was a problem hiding this comment.
should not use private color here
|
Visit https://backpack.github.io/storybook-prs/4229 to see this build running in a browser. |
| * The accessibility label for the thinking component. | ||
| * This is required for screen reader support. | ||
| */ | ||
| accessibilityLabel: string; |
There was a problem hiding this comment.
Can we make content required and have no default value? Then we can remove the a11yLabel. IrinaWei
Migrate from Carhire-homepage: https://github.com/Skyscanner/carhire-homepage/tree/main/libs/cars-results/features/src/unstable_backpack/Thinking
Tested locally in carhire:
Remember to include the following changes:
[Clover-123][BpkButton] Updating the colourREADME.md(If you have created a new component)README.md