[LUNA-3186]: Make marker prop optional in BpkPriceRange (breaking change option)

[Jack Waller (Jack-Waller)]

Summary

This PR introduces breaking changes to BpkPriceRange to improve the component API and enable new use cases for price bands display.

Key Changes

• Make marker prop optional: The component can now display only the price range bars without a marker
• Add MARKER_DISPLAY_TYPES constant: New exported constant with BUBBLE and DOT options to control marker display style
• Remove showPriceOnBoundaries prop: Boundary price visibility is now automatically determined by the marker type
• Default marker type to BUBBLE: When marker is provided without a type, it defaults to BUBBLE behaviour

Boundary Price Visibility Rules

Marker Type	Boundary Prices
MARKER_DISPLAY_TYPES.BUBBLE	Shown below the bar
MARKER_DISPLAY_TYPES.DOT	Hidden (compact display)
No marker	Shown below the bar

Checklist

• Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
• README.md (If you have created a new component)
• Component README.md
• Tests
• Accessibility tests
  • The following checks were performed:
    • Ability to navigate using a keyboard only
    • Zoom functionality (Deque University explanation):
      • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
      • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
    • Ability to navigate using a screen reader only
• Storybook examples created/updated
• For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

Migration Guide

Breaking Changes

1. showPriceOnBoundaries prop removed

   • Before: Used showPriceOnBoundaries={false} to hide boundary prices
   • After: Use marker={{ type: MARKER_DISPLAY_TYPES.DOT, ... }} for compact display without boundaries

2. marker.type is now required when using marker with dot style

   • Before: N/A (only bubble style existed)
   • After: Use MARKER_DISPLAY_TYPES.BUBBLE or MARKER_DISPLAY_TYPES.DOT

3. marker.type defaults to BUBBLE when omitted

   • If you provide a marker without a type, it will default to MARKER_DISPLAY_TYPES.BUBBLE
   • This is non-breaking for existing bubble marker usage

Migration Examples

Before (with boundaries hidden):

<BpkPriceRange
  marker={{ price: '£150', percentage: 50 }}
  showPriceOnBoundaries={false}
  segments={...}
/>

After (using dot marker):

import { MARKER_DISPLAY_TYPES } from '@skyscanner/backpack-web/bpk-component-price-range';

<BpkPriceRange
  marker={{ price: '£150', percentage: 50, type: MARKER_DISPLAY_TYPES.DOT }}
  segments={...}
/>

No change to UI:

Before (with boundaries shown):

<BpkPriceRange
  marker={{ price: '£150', percentage: 50 }}
  segments={...}
/>

After (using bubble marker - default):

// Option 1: Explicit type
<BpkPriceRange
  marker={{ price: '£150', percentage: 50, type: MARKER_DISPLAY_TYPES.BUBBLE }}
  segments={...}
/>

// Option 2: Omit type (defaults to BUBBLE)
<BpkPriceRange
  marker={{ price: '£150', percentage: 50 }}
  segments={...}
/>

No change to UI:

Without marker (new use case):

<BpkPriceRange
  segments={{ low: { price: '£100', percentage: 20 }, high: { price: '£200', percentage: 80 } }}
/>

References

• Jira: LUNA-3186
• Decision doc: Price Range Breaking Changes

🤖 Generated with Claude Code

[skyscanner-backpack-bot]

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

[Copilot]

Pull request overview

This PR implements breaking changes to improve the BpkPriceRange component API by making the marker prop optional and renaming showPriceIndicator to the more descriptive showPriceOnBoundaries. The changes add explicit control over marker display types ('bubble' or 'dot') through a new required type field in the marker object.

Changes:

• Renamed showPriceIndicator → showPriceOnBoundaries (now required boolean)
• Made marker prop optional with new required type: 'bubble' | 'dot' field
• Updated component logic to handle optional marker and explicit type field

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/bpk-component-price-range/src/BpkPriceRange.tsx	Core component implementation with renamed prop, optional marker, and explicit type handling
packages/bpk-component-price-range/src/BpkPriceRange-test.tsx	Comprehensive test coverage for all 6 use cases with proper test organization
packages/bpk-component-price-range/src/accessibility-test.tsx	Accessibility tests covering all 6 use cases
packages/bpk-component-price-range/README.md	Updated documentation with new prop names, types, and examples for all use cases
examples/bpk-component-price-range/examples.tsx	Renamed and reorganized examples to match the 6 use cases with descriptive naming
examples/bpk-component-price-range/stories.tsx	Updated story exports with new example names matching use case structure

---

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

[skyscanner-backpack-bot]

	Warnings
⚠️	Package source files (e.g. packages/package-name/src/Component.js) were updated, but snapshots weren't. Have you checked that the tests still pass?

Browser support

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

Generated by 🚫 dangerJS against 0c67c96

[Gert-Jan Vercauteren (gert-janvercauteren)]

Hi Jack Waller (@Jack-Waller), have you tried to generate a codemod for this breaking change? If we could just run a script for our consumers it's not that big of a breaking change I reckon. Especially since usages are relatively low.

[Jack Waller (Jack-Waller)]

Hi Jack Waller (Jack Waller (@Jack-Waller)), have you tried to generate a codemod for this breaking change? If we could just run a script for our consumers it's not that big of a breaking change I reckon. Especially since usages are relatively low.

Hi Gert-Jan Vercauteren (@gert-janvercauteren), great suggestion! We're evaluating weather we want to proceed with this PR now: I think a codemod should be straightforward for this change if we do 🙂 I'm in the process of writing a decision document for this change if you're interested (still WIP).

[skyscanner-backpack-bot]

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