[LUNA-3186]: Make marker prop optional in BpkPriceRange by Jack-Waller · Pull Request #4158 · Skyscanner/backpack

Jack Waller (Jack-Waller) · 2026-01-27T15:11:31Z

Summary

Adds the ability to hide the marker in the BpkPriceRange component.

Also expands the API, by introducing an optional type property of the now optional marker property. This intends to replace the already-optional showPriceIndicator property, making it clear which marker style we're getting.

This PR therefore also deprecates the showPriceIndicator property. This component accepts any combination of the new marker.type and showPriceIndicator properties. The default behaviour (neither property provided) remains the same. Otherwise, the value of marker.type will override the value of showPriceIndicator.

We expect a follow-up PR corresponding to a major change, where we will remove showPriceIndicator.

This corresponds to Option 4 from the decision document.

Key Changes

Made marker prop optional - The component can now be used without a marker
Deprecated showPriceIndicator prop - Marked with JSDoc @deprecated tag
Added marker.type API - New MARKER_DISPLAY_TYPES constant with BUBBLE and DOT options
Updated type definitions - Added MarkerDisplayType and restructured types for clarity
Created migration guide - Comprehensive documentation in docs/migrating-from-showPriceIndicator.md

Motivation

The previous showPriceIndicator prop had confusing semantics:

It wasn't clear what was being shown/hidden (boundary prices, not the marker itself)
It coupled marker display type with boundary price visibility
It didn't allow for different marker display styles

The new marker.type API provides:

Clearer intent: MARKER_DISPLAY_TYPES.BUBBLE vs MARKER_DISPLAY_TYPES.DOT clearly describes the marker appearance
Better flexibility: The marker type naturally determines boundary price visibility
Explicit behaviour: BUBBLE shows boundaries, DOT hides them
One less edge case: We don't need to define a type for an undefined marker.

Migration Path (Expand-Migrate-Contract)

This is the expand phase:

✅ New API added (marker.type with MARKER_DISPLAY_TYPES)
✅ Old API still works (showPriceIndicator)
✅ Deprecation warning added
⏳ Next: Migrate consumers to new API (no change needed if using default values already)
⏳ Future: Remove deprecated prop in major version

Changes

Component (BpkPriceRange.tsx):
- Made marker prop optional
- Added marker.type support with new MARKER_DISPLAY_TYPES
- Deprecated showPriceIndicator with JSDoc annotation
- Implemented backward compatibility logic
Type definitions (common-types.ts):
- Added MarkerDisplayType type
- Added MARKER_DISPLAY_TYPES constant
- Exported new type
Tests:
- Updated all existing tests to use new API
- Added tests for optional marker behaviour
- Verified backward compatibility with showPriceIndicator
- Updated accessibility tests
Documentation:
- Created comprehensive migration guide (docs/migrating-from-showPriceIndicator.md)
- Updated component README with new examples
- Added usage examples for both APIs
Examples & Stories:
- Updated Storybook stories to demonstrate new API
- Added examples showing MARKER_DISPLAY_TYPES.DOT usage
- Kept examples demonstrating backward compatibility

Testing

All existing tests pass with backward compatibility maintained. New tests added for:

Optional marker prop
MARKER_DISPLAY_TYPES.BUBBLE behaviour
MARKER_DISPLAY_TYPES.DOT behaviour
Backward compatibility with showPriceIndicator

Accessibility

No accessibility changes - the component maintains the same ARIA attributes and keyboard navigation:

Keyboard navigation unchanged
Zoom functionality unchanged
Screen reader behaviour unchanged

References

Jira ticket: LUNA-3186
Decision document: https://skyscanner.atlassian.net/wiki/x/lATgeQ (Option 4)
Migration guide: packages/bpk-component-price-range/docs/migrating-from-showPriceIndicator.md

Remember to include the following changes:

Ensure the PR title includes the name of the component
Component README.md updated
Tests updated
Accessibility tests updated
Storybook examples created/updated
Migration guide added

🤖 Generated with Claude Code

- Deprecate showPriceIndicator prop in favour of marker.type API - Add MARKER_DISPLAY_TYPES constant (BUBBLE and DOT) - Make marker prop optional to support usage without a marker - Update type definitions with MarkerDisplayType - Add migration guide documentation - Update tests to cover new optional marker behaviour - Update examples and stories to demonstrate new API This is the expand phase of an expand-migrate-contract migration. The showPriceIndicator prop is now deprecated but still functional to maintain backward compatibility. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-01-27T15:22:12Z

	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 2b5b320

Vincent Liu (xiaogliu) · 2026-01-28T10:13:26Z

+   */
  showPriceIndicator?: boolean;
-  marker: Marker;
+  marker?: MarkerPriceRangePosition;


Will an error occur on the client side if the type is not updated after the type has been changed?

No 🙂 Previously, the only type exported was BpkPriceRangeProps, the Marker type was never directly exported. While consumers can use the Marker type, they can only ever access it via indexing through the marker property (e.g. BpkPriceRangeProps['marker']). As MarkerPriceRangePosition is a superset of the original Marker, and we're not changing the name of the marker property, if a consumer fetched the old type of Marker by indexing through marker, when updating to the new minor version of backpack, the index will now point to MarkerPriceRangePosition, and will compile without errors.

Even if the consumer defined a new type themselves representing a Marker, this could still be passed safely (as the new MarkerPriceRangePosition is a superset of the old Marker). Testing this locally shows no errors 🙂

skyscanner-backpack-bot · 2026-01-28T14:53:33Z

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

Jack Waller (Jack-Waller) · 2026-01-28T14:41:48Z

-} from './src/BpkPriceRange';
-
-export type { BpkPriceRangeProps };
-export default BpkPriceRange;


SonarQube complained about this:

Jack Waller (Jack-Waller) · 2026-01-28T14:58:15Z

+  const defaultMarkerType = showPriceIndicator ?? true ? MARKER_DISPLAY_TYPES.BUBBLE : MARKER_DISPLAY_TYPES.DOT;
+  const markerType = marker?.type || defaultMarkerType;
+  const shouldShowMarker = !!marker;
+  const shouldShowBubble = shouldShowMarker && markerType === MARKER_DISPLAY_TYPES.BUBBLE;
+  const shouldShowDot = shouldShowMarker && markerType === MARKER_DISPLAY_TYPES.DOT;


If marker.type is set, use it. Otherwise, default to bubble unless showPriceIndicator is explicitly false, in which case show a dot.

Details
All of the below logic formulas evaluate to `true`.
Here's a ChatGPT summary of the below

->: implication

=: equality

&: conjunction (and)

(marker.type = bubble & showPriceIndicator = undefined) -> (shouldShowBubble = true) & (shouldShowDot = false)

(marker.type = bubble & showPriceIndicator = true) -> (shouldShowBubble = true) & (shouldShowDot = false)

(marker.type = bubble & showPriceIndicator = false) -> (shouldShowBubble = true) & (shouldShowDot = false)

((marker.type = dot & showPriceIndicator = undefined) -> (shouldShowBubble = false) & (shouldShowDot = true)

((marker.type = dot & showPriceIndicator = true) -> (shouldShowBubble = false) & (shouldShowDot = true)

((marker.type = dot & showPriceIndicator = false) -> (shouldShowBubble = false) & (shouldShowDot = true)

((marker.type = undefined & showPriceIndicator = undefined) -> (shouldShowBubble = true) & (shouldShowDot = false)

((marker.type = undefined & showPriceIndicator = true) -> (shouldShowBubble = true) & (shouldShowDot = false)

((marker.type = undefined & showPriceIndicator = false) -> (shouldShowBubble = false) & (shouldShowDot = true)

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Vincent Liu (xiaogliu) · 2026-01-29T11:37:01Z

 }) => <div style={{ width: isLarge ? '15rem' : '8.75rem' }}>{children}</div>;

-const SmallerLowPriceRangeExample = () => (
+// Use case 1: Dot marker (boundaries hidden)


Nit, we expect to understand the code through the code itself rather than comments. Your naming is clear enough 👍 , so there's no need for comments here.

Same as below

Good point! Agreed 🙂 I'll remove these comments now

Done! 🙂 2b5b320

Vincent Liu (xiaogliu)

LGTM

skyscanner-backpack-bot · 2026-01-29T11:49:55Z

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

Jack Waller (Jack-Waller) added the minor Non breaking change label Jan 27, 2026

This comment was marked as outdated.

Sign in to view

Jack Waller (Jack-Waller) mentioned this pull request Jan 27, 2026

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

Closed

12 tasks

Jack Waller (Jack-Waller) changed the title ~~[LUNA-3186]: Make marker prop optional in BpkPriceRange (expand - migrate - contract option)~~ WIP [LUNA-3186]: Make marker prop optional in BpkPriceRange (expand - migrate - contract option) Jan 27, 2026

Vincent Liu (xiaogliu) reviewed Jan 28, 2026

View reviewed changes

Jack Waller (Jack-Waller) added 2 commits January 28, 2026 13:59

chore: update TODO with ticket

08c2225

test: add unit tests for backwards compatability

c98d8db

This comment was marked as outdated.

Sign in to view

docs: update migration docs with missing use case

72b77e8

This comment was marked as outdated.

Sign in to view

docs(BpkPriceRange): update README

9d11ea8

Jack Waller (Jack-Waller) commented Jan 28, 2026

View reviewed changes

Jack Waller (Jack-Waller) marked this pull request as ready for review January 28, 2026 14:58

Copilot AI review requested due to automatic review settings January 28, 2026 14:58

Jack Waller (Jack-Waller) changed the title ~~WIP [LUNA-3186]: Make marker prop optional in BpkPriceRange (expand - migrate - contract option)~~ [LUNA-3186]: Make marker prop optional in BpkPriceRange Jan 28, 2026

Copilot AI reviewed Jan 28, 2026

View reviewed changes

charliequinn-skyscanner previously approved these changes Jan 28, 2026

View reviewed changes

Jack Waller (Jack-Waller) mentioned this pull request Jan 29, 2026

WIP [LUNA-3186]: Make marker prop optional in BpkPriceRange (backwards compatible option) #4131

Closed

5 tasks

Vincent Liu (xiaogliu) reviewed Jan 29, 2026

View reviewed changes

chore: remove unnecessary code comments

2b5b320

Jack Waller (Jack-Waller) dismissed charliequinn-skyscanner’s stale review via 2b5b320 January 29, 2026 11:42

Vincent Liu (xiaogliu) approved these changes Jan 29, 2026

View reviewed changes

Gert-Jan Vercauteren (gert-janvercauteren) added the contribution label Jan 30, 2026

Vincent Liu (xiaogliu) merged commit 6bc2bcd into main Jan 30, 2026
13 checks passed

Vincent Liu (xiaogliu) deleted the feat/LUNA-3186-optional-marker-expand-phase branch January 30, 2026 02:33

Conversation

Jack Waller (Jack-Waller) commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Key Changes

Motivation

Migration Path (Expand-Migrate-Contract)

Changes

Testing

Accessibility

References

Uh oh!

This comment was marked as outdated.

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

Uh oh!

Browser support

Uh oh!

Vincent Liu (xiaogliu) Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Jack Waller (Jack-Waller) Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

This comment was marked as outdated.

skyscanner-backpack-bot Bot commented Jan 28, 2026

Uh oh!

Jack Waller (Jack-Waller) Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Jack Waller (Jack-Waller) Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Vincent Liu (xiaogliu) Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Jack Waller (Jack-Waller) Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Jack Waller (Jack-Waller) Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Vincent Liu (xiaogliu) left a comment

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot Bot commented Jan 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Jack Waller (Jack-Waller) commented Jan 27, 2026 •

edited

Loading

skyscanner-backpack-bot Bot commented Jan 27, 2026 •

edited

Loading