Repository navigation
Collapse the handover method tile until a method is picked - #3339
Draft
StylianosGakis wants to merge 4 commits into
Draft
StylianosGakis wants to merge 4 commits into
StylianosGakis wants to merge 4 commits into
Conversation
Members tapped the plus tile on the connect-payment screen before picking Trustly or Swish, reading it as the control. Keep the method tile and dots mounted but collapsed to zero width while nothing is picked, so the Hedvig symbol stands alone and the method grows out from it on a pick. The same illustration serves the pay-in, pay-out and onboarding select screens, so all of them get it. Matches the iOS change in HedvigInsurance/ugglan#2777.
Fading the method side with a layer alpha renders it into an offscreen buffer the size of its own bounds, and the tile's drop shadow draws outside them, so mid-animation the shadow was cut flat at the tile's edges. Pad the layer out around the content and take the padding back out of the reported size, so the shadow has room and the row still measures the same.
Spell out both tile orders in one branch on the direction, and hand the destination badge to the tile that receives it: the Hedvig tile grows a badge parameter and both tiles place it through one shared wrapper, so the illustration no longer overlays a copy of the tile's own badge code. Derive the fade layer's bleed from the drop shadow's own parameters, so widening the shadow cannot silently bring the clipping back. Leave the dots out of the composition while the method side is fully collapsed; their infinite transition was animating behind an alpha of zero.
Switching between two picked methods swapped the brand mark in one frame, while iOS and web animate it. The illustration now takes the picked method itself and a lambda that draws its mark, and cross-fades the mark, shrinking the old one away as the new one grows in, whenever the method changes. Keying the swap on the method rather than on the mark lambda is what keeps an unrelated recomposition from replaying it. Checked on an API 36 emulator with a throwaway compose test stepping the clock, and on a Pixel 6 Pro recording.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤖 AI description
Members on the connect-payment screen tapped the plus tile before picking Trustly or Swish, reading it as the control. The method tile and dots now collapse to zero width while nothing is picked, so the Hedvig symbol stands alone and the method grows out from it on a pick, and switching between two picked methods cross-fades the mark, both matching iOS in HedvigInsurance/ugglan#2777. Onboarding and both pickers share the illustration.
Two non-obvious bits in the collapsing modifier: a wrap-content width cannot animate to and from zero, so it measures its content in full and only scales the width it reports; and a layer alpha composites into a buffer of the layer's own bounds, which clipped the drop shadow mid-animation, so the layer is padded out and taken back out of the reported size. The swap is keyed on the picked method, not the mark lambda, so a recomposition never replays it.
Checked on an API 36 emulator with a throwaway compose test stepping the clock, and on a Pixel 6 Pro.