[Paywalls V2] Add `edgeToEdge` badge trailing/leading style layout by tonidero · Pull Request #2054 · RevenueCat/purchases-android

tonidero · 2025-01-14T13:00:09Z

Description

This adds the remaining edgeToEdge style layouts for the badge, including leading and trailing

emerge-tools · 2025-01-14T13:11:51Z

📸 Snapshot Test

10 modified, 164 unchanged

Name	Added	Removed	Modified	Renamed	Unchanged	Errored	Approval
TestPurchasesUIAndroidCompatibility com.revenuecat.testpurchasesuiandroidcompatibility	0	0	10	0	164	5	⏳ Needs approval

🛸 Powered by Emerge Tools

codecov · 2025-01-14T13:30:21Z

Codecov Report

Attention: Patch coverage is 45.94595% with 20 lines in your changes missing coverage. Please review.

Project coverage is 81.45%. Comparing base (7144b70) to head (db03c95).
Report is 12 commits behind head on main.

Files with missing lines	Patch %	Lines
...s/paywalls/components/properties/CornerRadiuses.kt	45.16%	16 Missing and 1 partial ⚠️
.../purchases/paywalls/components/properties/Shape.kt	40.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2054      +/-   ##
==========================================
- Coverage   81.52%   81.45%   -0.08%     
==========================================
  Files         265      265              
  Lines        8668     8688      +20     
  Branches     1231     1233       +2     
==========================================
+ Hits         7067     7077      +10     
- Misses       1100     1110      +10     
  Partials      501      501

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

JayShortway

Nice one! Just one comment on clipping when the underlying stack is Pill.

JayShortway · 2025-01-14T14:01:29Z

I think we should clip the badge here, also going off @bab-s's comment on Slack here.

Hmm simply clipping here would be tricky, since it might clip the content of the badge... Trying to think of the best way to do this...

Good point! Just thinking out loud: maybe we can move the badge "inside" the stack, and then extend its background to the edge of the stack. That way it looks clipped, but its contents will always be visible.

Right... I guess this might even happen with non-pill shapes if the stack corner radius is bigger than half height of the badge... 🥴. So yeah I guess we need to separate the content from the background again in these and extend the background as you said... back to the drawing board 😅

Soo many edge cases 🥁 🙁

…ing edgeToEdge badges

tonidero · 2025-01-15T18:49:09Z

+    modifier: Modifier = Modifier,
+) {
+    val badgeRectangleCorners = (badgeStack.shape as? Shape.Rectangle)?.corners
+        ?: CornerRadiuses(all = 20.0) // For pill badge shape default to a "medium" rounded corner.


I'm not sure about this TBH... But I'm not sure how a pill shaped badge would look like as a leading/trailing badge either, so this seemed like a compromise. Or maybe we should disallow this case?

If it's a pill-shaped badge, shouldn't it be a 50% corner? We can do that with a Compose Shape. Maybe I'm overlooking something!

Right but CornerRadiuses only accepts values as dp, not percentages... We could refactor CornerRadiuses so we have either a DpCornerRadiuses or a PercentageCornerRadiuses so we can transform to the appropriate RoundedCornerShape later and that would be a more accurate version indeed... Just not sure if it's worth doing that now.

Hmm, but could we move the badgeShape (and badgeRectangleCorners ) calculation closer to where it's actually used? Eventually it gets transformed to a Compose Shape anyway.

Having a fixed corner radius is "risky", since it can be way too small (if the badge is giant), or way too big (if the badge is tiny).

Hmm, but could we move the badgeShape (and badgeRectangleCorners ) calculation closer to where it's actually used? Eventually it gets transformed to a Compose Shape anyway.

Not easily... What we pass to the badge's StackComponentView is our own Shape, not compose's Shape, and I don't like having a parameter in StackComponentView for something like this...

Having a fixed corner radius is "risky", since it can be way too small (if the badge is giant), or way too big (if the badge is tiny).

That is indeed true... That's why I was asking in Slack if we should disable this case in the dashboard... But maybe I should just go ahead with the CornerRadiuses refactor to accept percentages so we fix this case as well.

I ended up doing a biggish refactor: 94c69ae... However, I kinda liked that it simplified some of the calculations. Wdyt?

tonidero · 2025-01-15T18:51:26Z

+        },
+    )
+    MainStackComponent(stackState, state, clickHandler, modifier) {
+        StackComponentView(


Currently, the badge can be clipped by the corners of the main stack... I think that developers can fix this by adding a padding in the dashboard so it doesn't overlap. We could potentially add some padding manually ourselves, but I think it's a lot of extra logic, and probably less flexible.

This can be a bit of a problem with pill shaped main stacks since the corner is dynamic... But usually an approximate padding should work.

We can always revisit if needed

tonidero · 2025-01-20T10:54:56Z

I'm addressing the changes from our last sync up in follow up PRs, I think this one is already big enough, and it covers the cases it's meant for

JayShortway

Nice one! I like the idea of making CornerRadiuses sealed! Had some comments on the serialization part only.

JayShortway

LGTM! Thanks for making the changes! 🙏

@greenietea

**This is an automatic release.** ## RevenueCat SDK ### 🐞 Bugfixes * fix: Add prepaid as a period type (#2141) via Greenie (@greenietea) ## RevenueCatUI SDK ### Paywalls v2 #### ✨ New Features * [Paywalls V2] Adds support for Paywalls V2! (#2127) via JayShortway (@JayShortway) ### Customer Center #### ✨ New Features * Adds support for `CustomerCenter` (#2156) via Cesar de la Vega (@vegaro) ### 🔄 Other Changes * [Paywalls V2] Deprecate PaywallFooter in favor of OriginalTemplatePaywallFooter (#2111) via Toni Rico (@tonidero) * feat: Filter CANCEL from help path if lifetime (#2140) via Facundo Menzella (@facumenzella) * fix: Localize Restore Purchases Dialog (#2139) via Facundo Menzella (@facumenzella) * fix: Hide contact support if there's no email (#2135) via Facundo Menzella (@facumenzella) * feat: Track IMPRESSION and SURVER_OPTION_CHOSEN for CustomerCenter (#2124) via Facundo Menzella (@facumenzella) * fix: Use TextButton instead of outline for Promotionals (#2138) via Facundo Menzella (@facumenzella) * Rename carousel slide to page (#2144) via Josh Holtz (@joshdholtz) * [Paywalls V2] Make border draw on top of the image overlay (#2165) via Toni Rico (@tonidero) * [Paywalls V2] Gradients Reloaded: Makes linear gradients match CSS even more closely (#2166) via JayShortway (@JayShortway) * [Paywalls V2] Fix wrong spacers in Stack when some children are Fill (#2164) via Toni Rico (@tonidero) * chore: Unify Json encoding with JsonHelper (#2160) via Facundo Menzella (@facumenzella) * [Paywalls V2] Fixes the top system bar padding being applied to all children in a vertical container (#2162) via JayShortway (@JayShortway) * [Paywalls V2] Refactor to use a single ImageLoader singleton in RevenueCatUI (#2161) via Toni Rico (@tonidero) * [Paywalls V2] Apply stack margins to overlay badges (#2158) via Toni Rico (@tonidero) * [Paywalls V2] Disables the click handler for the selected package (#2159) via JayShortway (@JayShortway) * [Paywalls V2] Change stack distribution system to use spacers instead of custom arrangements (#2154) via Toni Rico (@tonidero) * [Paywalls V2] Fixes empty stacks not showing up. (#2157) via JayShortway (@JayShortway) * Explicitly sets the `defaults` flavor as the default. (#2155) via JayShortway (@JayShortway) * Updates on no active purchases screen (#2150) via Cesar de la Vega (@vegaro) * [Paywalls V2] Fix issue with sizing of stacks with nested badges (#2152) via Toni Rico (@tonidero) * [Paywalls V2] Fix issue with shadows overlapping long edgeToEdge badges (#2149) via Toni Rico (@tonidero) * [Paywalls V2] Adjusts the convex/concave offset to 10% of the image height (#2151) via JayShortway (@JayShortway) * [Paywalls V2] Fixes variables for multi month periods (#2148) via JayShortway (@JayShortway) * [Paywalls V2] Correctly handles variables for lifetime products (#2145) via JayShortway (@JayShortway) * [Paywalls V2] Add shadows to badge previews (#2147) via Toni Rico (@tonidero) * [Paywalls V2] Predownload paywall low res images (#2143) via Toni Rico (@tonidero) * [Paywalls V2] Makes linear gradients consistent with CSS (#2142) via JayShortway (@JayShortway) * [Paywalls V2] Adds edge-to-edge support (#2137) via JayShortway (@JayShortway) * [Paywalls V2] Make root stack component use all the available space by default (#2136) via Toni Rico (@tonidero) * [Paywalls V2] Avoids a crash if a package is missing (#2130) via JayShortway (@JayShortway) * [Paywalls V2] Fix stack clipping issues (#2126) via Toni Rico (@tonidero) * fix: Address typo and wrong doc for CustomerCenter events (#2133) via Facundo Menzella (@facumenzella) * [Paywalls V2] Fix merge conflict (#2134) via Toni Rico (@tonidero) * [Paywalls V2] Actually ignores the font provider for V2. (#2129) via JayShortway (@JayShortway) * Rename `PromotionalOfferView` to `PromotionalOfferScreen` (#2132) via Cesar de la Vega (@vegaro) * [Paywalls V2] Support background images in StackComponent, CarouselComponent, TabsComponent (#2131) via Toni Rico (@tonidero) * [Paywalls V2] Support scroll orientation in StackComponent (#2108) via Toni Rico (@tonidero) * [Paywalls V2] Correctly selects packages on tabs (#2122) via JayShortway (@JayShortway) * Revamp UI in Customer Center (#2123) via Cesar de la Vega (@vegaro) * [Paywalls V2] Remove cursive as a generic font (#2118) via Josh Holtz (@joshdholtz) * Publishes PaywallsTester to Internal testing track on every commit to `main` (#2100) via JayShortway (@JayShortway) * Fixes `X` in promo offer not dismissing the promo (#2110) via Cesar de la Vega (@vegaro) * [Paywalls V2] Published version of PaywallTester now uses the Paywalls V2 Alpha RC project (#2093) via JayShortway (@JayShortway) * [Paywalls V2] New overrides structure (#2120) via Toni Rico (@tonidero) * [Paywalls V2] Adds `TabsComponent` samples and tests (#2115) via JayShortway (@JayShortway) * Ignores `RestorePurchasesDialog` previews using `IgnoreEmergeSnapshot` (#2116) via Cesar de la Vega (@vegaro) * [Paywalls V2] Adds `TabsComponentView` (#2114) via JayShortway (@JayShortway) * Fixes "View field header collides with a variable" data binding error in PurchaseTester (#2119) via JayShortway (@JayShortway) * feat: Add support for tracking customer center events (#2117) via Facundo Menzella (@facumenzella) * [Paywalls V2] Adds `TabsComponentStyle` (#2113) via JayShortway (@JayShortway) * [Paywalls V2] Adds deserialization of `TabsComponent` (#2101) via JayShortway (@JayShortway) * [Paywalls V2] Implements Variables V2 (#2099) via JayShortway (@JayShortway) * refactor: Introduce EventsManager to track events for different features (#2096) via Facundo Menzella (@facumenzella) * Rename to Web Billing (#2094) via Antonio Borrero Granell (@antoniobg) * [Paywalls V2] Fixes shadows drawing behind transparent components (#2112) via JayShortway (@JayShortway) * Fix title not being reset after closing Feedback Survey (#2109) via Cesar de la Vega (@vegaro) * Support for opening custom urls in Customer Center (#2107) via Cesar de la Vega (@vegaro) * Prices in accept promotional offer button (#2104) via Cesar de la Vega (@vegaro) * Customer Center use remote appearance config (#2102) via Cesar de la Vega (@vegaro) * [Paywalls V2] Use original paywall fallback when trying to use Footer modes in a Components paywall (#2106) via Toni Rico (@tonidero) * [Paywalls V2] Add more `ImageComponentView` preview tests (#2103) via Toni Rico (@tonidero) * [Paywalls V2] Add CarouselComponent page indicator animation (#2105) via Toni Rico (@tonidero) * [Paywalls V2] Add `CarouselComponentView` (#2095) via Toni Rico (@tonidero) * [Paywalls V2] Add `CarouselComponent` infrastructure (#2092) via Toni Rico (@tonidero) * [Paywalls V2] Adds new price calculations needed for Variables V2 (#2098) via JayShortway (@JayShortway) * [Paywalls V2] Preparation for Variables V2 (#2097) via JayShortway (@JayShortway) * Promotional offers (#2011) via Cesar de la Vega (@vegaro) * [Paywalls V2] No longer provides the entire `UiConfig` to `StyleFactory` (#2091) via JayShortway (@JayShortway) * [Paywalls V2] Adds support for custom fonts (#2090) via JayShortway (@JayShortway) * feat: Add basic customer center events (#2075) via Facundo Menzella (@facumenzella) * Add support to manage non-Google purchases in Customer Center (#2067) via Cesar de la Vega (@vegaro) * [Paywalls V2] Add `TimelineComponentView` (#2083) via Toni Rico (@tonidero) * [Paywalls V2] Process `TimelineComponent` overrides and state (#2082) via Toni Rico (@tonidero) * [Paywalls V2] Cleans up after implementing color aliases (#2087) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for backgrounds (#2086) via JayShortway (@JayShortway) * `PaywallTesterApp` is no longer wrapped in a `Surface` (#2089) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for shadows (#2085) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for borders (#2084) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for `TextComponent` (#2080) via JayShortway (@JayShortway) * [Paywalls V2] Add `TimelineComponent` network parsing (#2047) via Toni Rico (@tonidero) * [Paywalls V2] Implements color aliases for `ImageComponent` (#2079) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for `IconComponent` (#2078) via JayShortway (@JayShortway) * Build `SubscriptionDetailsView` using `CustomerInfo` (#2057) via Cesar de la Vega (@vegaro) * Some Material 3 updates to the `ManageSubscriptionsView` (#2072) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for `StackComponent` (#2076) via JayShortway (@JayShortway) * Fixes compilation of `IconComponentView`. (#2073) via JayShortway (@JayShortway) * [Paywalls V2] Make `edgeToEdge` top/bottom badge extend to entire stack background (#2070) via Toni Rico (@tonidero) * [Paywalls V2] Parses `UiConfig` (#2068) via JayShortway (@JayShortway) * [Paywalls V2] Add `IconComponent` (#2071) via Toni Rico (@tonidero) * [Paywalls V2] Badge: Handle main stack border width correctly in overlay and nested badge styles (#2069) via Toni Rico (@tonidero) * [Paywalls V2] Add `edgeToEdge` badge trailing/leading style layout (#2054) via Toni Rico (@tonidero) * [Paywalls V2] Adds support for fallback components (#2064) via JayShortway (@JayShortway) --------- Co-authored-by: revenuecat-ops <ops@revenuecat.com> Co-authored-by: Toni Rico <toni.rico.diez@revenuecat.com> Co-authored-by: Toni Rico <antonio.rico.diez@revenuecat.com> Co-authored-by: Cesar de la Vega <cesarvegaro@gmail.com>

tonidero added pr:RevenueCatUI pr:other feat:PaywallV2 labels Jan 14, 2025

JayShortway reviewed Jan 14, 2025

View reviewed changes

tonidero force-pushed the add-badge-layout-3 branch from 1409d50 to c24ba2b Compare January 14, 2025 14:58

tonidero force-pushed the add-badge-layout-4 branch from ccca657 to 11819d8 Compare January 14, 2025 15:02

Base automatically changed from add-badge-layout-3 to main January 15, 2025 09:40

tonidero added 2 commits January 15, 2025 10:55

[Paywalls V2] Add edgeToEdge trailing/leading style layout

a20bc21

Some cleanup and better support pill shaped stacks with trailing/lead…

32704a4

…ing edgeToEdge badges

tonidero force-pushed the add-badge-layout-4 branch from 11819d8 to 32704a4 Compare January 15, 2025 09:58

Clip badge to corners of stack

393272d

tonidero commented Jan 15, 2025

View reviewed changes

tonidero marked this pull request as ready for review January 15, 2025 18:53

tonidero added 2 commits January 16, 2025 14:41

Support percentage corner radiuses

94c69ae

Revert accidental preview change

c65a739

tonidero requested a review from JayShortway January 20, 2025 10:53

Fix missing margin modifier

63b26a0

JayShortway reviewed Jan 21, 2025

View reviewed changes

Review comments

cf3ccd3

tonidero commented Jan 21, 2025

View reviewed changes

Comment thread ...es/src/main/kotlin/com/revenuecat/purchases/paywalls/components/properties/CornerRadiuses.kt Outdated

tonidero commented Jan 21, 2025

View reviewed changes

Comment thread ...ases/src/test/java/com/revenuecat/purchases/paywalls/components/properties/MaskShapeTests.kt Outdated

tonidero requested a review from JayShortway January 21, 2025 16:27

Revert making corners non nullable

8ce6f0e

JayShortway approved these changes Jan 22, 2025

View reviewed changes

Comment thread purchases/src/test/java/com/revenuecat/purchases/paywalls/components/properties/ShapeTests.kt Outdated

Comment thread purchases/src/main/kotlin/com/revenuecat/purchases/paywalls/components/properties/MaskShape.kt Outdated

Small cleanup

db03c95

tonidero enabled auto-merge (squash) January 22, 2025 08:23

tonidero disabled auto-merge January 22, 2025 08:46

tonidero enabled auto-merge (squash) January 22, 2025 08:47

tonidero merged commit 186cd80 into main Jan 22, 2025

tonidero deleted the add-badge-layout-4 branch January 22, 2025 08:50

This was referenced Feb 12, 2025

[AUTOMATIC] Release/8.12.0 #2153

Closed

[AUTOMATIC] Release/8.12.0 #2167

Merged

Uh oh!

Conversation

tonidero commented Jan 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

emerge-tools Bot commented Jan 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📸 Snapshot Test

10 modified, 164 unchanged

Uh oh!

codecov Bot commented Jan 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

JayShortway left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tonidero Jan 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tonidero commented Jan 20, 2025

Uh oh!

JayShortway left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JayShortway left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

tonidero commented Jan 14, 2025 •

edited

Loading

emerge-tools Bot commented Jan 14, 2025 •

edited

Loading

codecov Bot commented Jan 14, 2025 •

edited

Loading

tonidero Jan 16, 2025 •

edited

Loading