Wasabi-11805: update bpk price

[Simon Antoine (simon-o)]

Figma: https://www.figma.com/design/0DqzOBrdMfjyf0wST86WrG/Price-Pulse?node-id=2451-12998&p=f&t=dDlA1obi3YLqpItX-0

This pull request adds support for displaying icons alongside the leadingText in the BPKPrice component for both SwiftUI and UIKit. It introduces leadingIcon and trailingIcon properties, making the leading text row more flexible and interactive by allowing both icons and the text to be a single tappable target. The documentation and test coverage are updated to reflect these enhancements.

New Features:

• Added leadingIcon and trailingIcon properties to BPKPrice in both SwiftUI and UIKit, allowing icons to be shown on either side of the leadingText. [1] [2]
• Introduced onLeadingTextClicked handler, making the leadingText and its icons a single tappable target. [1] [2]

Implementation Updates:

• Refactored the layout logic to ensure icons are correctly positioned relative to the leadingText, respecting the alignment (leading/trailing) and updating accessibility accordingly. [1] [2]
• Updated the SwiftUI and UIKit previews, examples, and documentation to showcase the new icon and tap features. [1] [2] [3] [4]

Testing:

• Expanded test coverage and snapshot tests to include cases with leading/trailing icons and tappable leading text. [1] [2]

These changes make the price component more flexible and interactive, improving both visual presentation and accessibility.

• Check this if you have read and followed the contributing guidelines

Remember to include the following changes:

• README.md
• Tests
• Screenshotting code
• Adding a component? Remember to expose it in the main Backpack.h header file

If you are curious about how we review, please read through the code review guidelines

[Copilot]

Warning

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Copilot review overview

Review effort: Lite
Findings: 1

Open (1)

• The comment says “the whole row mirrors” for .trailing, but additionalInfoLabel always renders… · New

What changed in this PR

Adds icon support and tap handling for the leadingText row in BPKPrice across UIKit and SwiftUI, updating examples, docs, and snapshots accordingly.

Changes:

• Introduces leadingIcon / trailingIcon and onLeadingTextClicked to make the leading text row optionally icon-adorned and tappable.
• Updates UIKit + SwiftUI examples and READMEs to demonstrate the new API.
• Expands snapshot tests to cover new icon/tappable permutations.

File	Description
Example/​Backpack/​UIKit/​Components/​Price/​PriceExampleViewController.swift	Adds new UIKit example rows using leading/trailing icons and tap handler.
Example/​Backpack/​SwiftUI/​Components/​Price/​PriceExampleView.swift	Refactors example rendering and adds icon + tap handler demos.
Backpack/​Tests/​SnapshotTests/​BPKPriceSnapshotTest.swift	Adds new snapshot permutations for tappable leading text with icons (UIKit).
Backpack/​Price/​README.md	Documents new UIKit icon + tap handler usage.
Backpack/​Price/​Classes/​BPKPrice.swift	Implements leading text-row icons and unified tap target (UIKit).
Backpack-SwiftUI/​Tests/​Price/​PriceTests.swift	Adds new snapshot permutations for leading text icons and tap handler (SwiftUI).
Backpack-SwiftUI/​Price/​README.md	Documents new SwiftUI icon + tap handler usage.
Backpack-SwiftUI/​Price/​Classes/​BPKPrice.swift	Implements leading text-row icons and unified tap target (SwiftUI).

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Soheil Novinfard (novinfard)]

Hi Simon, I ran the example app from this branch on an iPhone 17 Pro simulator (iOS 26.3) and went through the Price screens in UIKit and SwiftUI next to the Figma. The icons render on both, a tap anywhere on the row fires the handler, and onContrast looks right in SwiftUI. I left a few questions inline.

[Soheil Novinfard (novinfard)]

In the Figma the leading icon is a green round badge with a dark arrow. Here the icon is tinted with the leading text colour (same in UIKit with textSecondaryColor), so it comes out as a flat grey glyph.

Is the badge planned as a follow up, or how about letting this take a colour or a view? WDYT?

[Simon Antoine (simon-o)]

This is a good point, we will primarily release the feature without the green icon and just want to give the capacity to display whatever icon we want on left and right. Design will have to align with the actual capacity from backpacl

[Soheil Novinfard (novinfard)]

Makes sense, thanks.

[Soheil Novinfard (novinfard)]

Makes sense, thanks.

[Soheil Novinfard (novinfard)]

This returns the row before asking super, so the tap still fires when the price view has isUserInteractionEnabled = false (I tried it in the example), and I'd expect the same when it is hidden. How about asking super first? This worked for me locally:

private var expandedLeadingTextFrame: CGRect? {
    guard onLeadingTextClicked != nil, !leadingTextRowStackView.isHidden else { return nil }
    return leadingTextRowStackView
        .convert(leadingTextRowStackView.bounds, to: self)
        .insetBy(dx: -BPKSpacingMd, dy: -BPKSpacingSm)
}

public override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
    super.point(inside: point, with: event) || expandedLeadingTextFrame?.contains(point) == true
}

public override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
    let hitView = super.hitTest(point, with: event)
    guard hitView != nil, expandedLeadingTextFrame?.contains(point) == true else { return hitView }
    return leadingTextRowStackView
}

WDYT?

[Soheil Novinfard (novinfard)]

Please review the code-snippet and test it yourself first. See if it requires any further changes or test updates.

[Soheil Novinfard (novinfard)]

Awesome work 💯 And thank you for addressing the feedbacks