Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add brand icons to card form #5069

Conversation

jameswoo-stripe
Copy link
Contributor

@jameswoo-stripe jameswoo-stripe commented May 25, 2022

Summary

Add brand icons to card form

Motivation

Card brand filtering

Testing

  • Added tests
  • Modified tests
  • Manually verified

Screenshots

Before After
before screenshot after screenshot
cardbrandicons.mov

Fixed icon alignment:

Changelog

@github-actions
Copy link
Contributor

github-actions bot commented May 25, 2022

Diffuse output:

OLD: paymentsheet-example-release-master.apk (signature: none)
NEW: paymentsheet-example-release-pr.apk (signature: none)

          │            compressed            │           uncompressed           
          ├───────────┬───────────┬──────────┼───────────┬───────────┬──────────
 APK      │ old       │ new       │ diff     │ old       │ new       │ diff     
──────────┼───────────┼───────────┼──────────┼───────────┼───────────┼──────────
      dex │  13.9 MiB │  13.9 MiB │ +2.9 KiB │  46.4 MiB │  46.4 MiB │ +8.2 KiB 
     arsc │   1.7 MiB │   1.7 MiB │      0 B │   1.7 MiB │   1.7 MiB │      0 B 
 manifest │   3.5 KiB │   3.5 KiB │      0 B │  15.7 KiB │  15.7 KiB │      0 B 
      res │ 825.4 KiB │ 825.4 KiB │      0 B │   1.3 MiB │   1.3 MiB │      0 B 
   native │   5.4 MiB │   5.4 MiB │      0 B │  13.4 MiB │  13.4 MiB │      0 B 
    asset │     3 MiB │     3 MiB │   -509 B │     3 MiB │     3 MiB │   -509 B 
    other │  79.9 KiB │  79.9 KiB │      0 B │ 154.8 KiB │ 154.8 KiB │      0 B 
──────────┼───────────┼───────────┼──────────┼───────────┼───────────┼──────────
    total │  24.8 MiB │  24.8 MiB │ +2.4 KiB │    66 MiB │    66 MiB │ +7.7 KiB 

         │          raw           │             unique              
         ├────────┬────────┬──────┼────────┬────────┬───────────────
 DEX     │ old    │ new    │ diff │ old    │ new    │ diff          
─────────┼────────┼────────┼──────┼────────┼────────┼───────────────
   files │      4 │      4 │    0 │        │        │               
 strings │ 225682 │ 225716 │  +34 │ 196505 │ 196527 │ +22 (+59 -37) 
   types │  39326 │  39333 │   +7 │  35907 │  35911 │  +4 (+8 -4)   
 classes │  33273 │  33277 │   +4 │  33273 │  33277 │  +4 (+8 -4)   
 methods │ 202475 │ 202512 │  +37 │ 194389 │ 194415 │ +26 (+55 -29) 
  fields │ 150049 │ 150055 │   +6 │ 149051 │ 149057 │  +6 (+24 -18) 

 ARSC    │ old  │ new  │ diff 
─────────┼──────┼──────┼──────
 configs │  293 │  293 │  0   
 entries │ 5798 │ 5798 │  0
APK
     compressed     │    uncompressed     │                               
─────────┬──────────┼──────────┬──────────┤                               
 size    │ diff     │ size     │ diff     │ path                          
─────────┼──────────┼──────────┼──────────┼───────────────────────────────
 3.3 MiB │ +3.1 KiB │  8.9 MiB │ +7.9 KiB │ ∆ classes2.dex                
 6.8 KiB │   -509 B │  6.7 KiB │   -509 B │ ∆ assets/dexopt/baseline.prof 
 3.8 MiB │   -213 B │ 11.4 MiB │   +264 B │ ∆ classes3.dex                
─────────┼──────────┼──────────┼──────────┼───────────────────────────────
 7.1 MiB │ +2.4 KiB │ 20.3 MiB │ +7.7 KiB │ (total)
DEX
STRINGS:

   old    │ new    │ diff          
  ────────┼────────┼───────────────
   196505 │ 196527 │ +22 (+59 -37) 
  + &
  ���
  ��
  ���
  ���
  
  �� 
  ���
  ���
  ���
  �������2�0�B���¢����J��
  ��0�2�������0H�J��
  ��0�2�������0J���������0�0�2�������0H�J���������0�0�2�����0H�R�����0�X�T¢��
  R���������0�0�¢��
  �����	¨��
  + (
  ���
  ���
  
  ���
  ���
  ���
  ���
  ��
  ���
  ���
  ����2�0�B#��������0��
  ��������0�������0�¢����J	����0�HÆ�J�������0�HÆ�¢���	J	����0�HÆ�J.����02�������0�2
  ��������0�2�������0�HÆ�¢����J�����0�2�������0�HÖ�J	����0�HÖ�J	����0�HÖ�R�������0�¢�
  
  ��
  �����	R�����0�¢��
  �����R�����0�¢��
  �����
  ¨��
  + .
  ���
  ���
  
  �� 
  ���
  ��	
  ���
  
  ��
  
  ���
  
  ���
  ����2�0�B!���������0�0����������0�0�¢����J��
  ������0�0�H�J���������0�0�H�J)���02�����������0�0�2�����������0�0�H�J��
  ��0�2�������0�HÖ�J	����0�HÖ�J	����0�HÖ�R���������0�0�¢��
  ������R���������0�0�¢��
  ���	��¨��
  + 8
  ���
  ���
  
  ���
  ���
  ���
  ���
  ��
  ���
  ���
  
  ��_
  ���
  ���
  ������� /2�����00�:�/B����������0�������0���������0���������0���������0������	������0�0
  ��������0��
  �������0
  ����������0�����0
  0�������������0
  ����0�0�������0�¢����J�����0�2�����0�H�J�� ����0
  2�����0�H�J��!��02��#����0�J��_��02�������0�J��%��02��&��0�R�����0�¢��
  ������R�����0�¢��
  ������R��	������0�0
  ¢��
  ������R�����0�X��¢��
  R�����0�¢��
  ������R�����0�¢��
  ������R�����0�¢��
  ������R�����0�8F¢��������R���������0�����0
  0�X��¢��
  R������0
  X��¢��
  R�����0�X��¢��
  R���������0
  ����0�0�X��¢��
  j��'j��(j��)j��*j��+j��,j��-j��.¨�0
  + J
  
  ���
  
  �� 
  ���
  
  ���
  ���
  ���
  
  ���
  
  ���
  ���
  ���
  ���
  ���
  ���
  ���
  ���
  ����#���0�2��������0�0�2�����0�H�¢�����O����0�2��	��0
  2�������02��
  ��0�2�����0�2�������������0�����0�0�H�ø�ø��¢������������0�2�������0�H�¢�����[����0�2��	��0
  2�������02
  ��������0�2��
  ��0�2�����0�2�������������0�����0�0�H�ø�ø��¢������������0�2�����0�2�����0�H�¢��� ���
  ���
  ��¡�0�¨�!
  + _dividerHeight
  + _icons
  + _this_produceState
  + (ILjava/lang/Integer;Z)Lcom/stripe/android/ui/core/elements/TextFieldIcon_Trailing;
  + (Lcom/stripe/android/ui/core/elements/TextFieldIcon_Trailing;ZLandroidx/compose/runtime/Composer;I)V
  + (Ljava/lang/String;ILjava/lang/String;Ljava/lang/String;IIILjava/util/Set;ILjava/util/regex/Pattern;Ljava/util/Map;Ljava/util/Map;I)V
  + (Ljava/util/List;ZLandroidx/compose/runtime/Composer;I)V
  + , animatedIcons=
  + , isTintable=
  + AnimatedIcons
  + AnimatedIcons_lambda-16
  + C(AnimatedIcons)
  + Lcom/stripe/android/model/CardBrand_special__inlined_sortedBy_1;
  + Lcom/stripe/android/ui/core/elements/RowElementUIKt_RowElementUI_3_1_1_1;
  + Lcom/stripe/android/ui/core/elements/TextFieldIcon_MultiTrailing;
  + Lcom/stripe/android/ui/core/elements/TextFieldIcon_Trailing;
  + Lcom/stripe/android/ui/core/elements/TextFieldUIKt_AnimatedIcons_1;
  + Lcom/stripe/android/ui/core/elements/TextFieldUIKt_AnimatedIcons_2;
  + Lcom/stripe/android/ui/core/elements/TextFieldUIKt_AnimatedIcons_3;
  + Lcom/stripe/android/ui/core/elements/TextFieldUIKt_AnimatedIcons_target_2;
  + MultiTrailing
  + MultiTrailing(staticIcons=
  + SMAP
  CardBrand.kt
  Kotlin
  *S Kotlin
  *F
  + 1 CardBrand.kt
  com/stripe/android/model/CardBrand
  + 2 _Collections.kt
  kotlin/collections/CollectionsKt___CollectionsKt
  *L
  1#1,260:1
  286#2,2:261
  764#2:263
  855#2,2:264
  1043#2:266
  *S KotlinDebug
  *F
  + 1 CardBrand.kt
  com/stripe/android/model/CardBrand
  *L
  198#1:261,2
  254#1:263
  254#1:264,2
  255#1:266
  *E
  
  + SMAP
  CardBrand.kt
  Kotlin
  *S Kotlin
  *F
  + 1 CardBrand.kt
  com/stripe/android/model/CardBrand_Companion
  + 2 _Arrays.kt
  kotlin/collections/ArraysKt___ArraysKt
  *L
  1#1,260:1
  3785#2:261
  4300#2,2:262
  1275#2,2:264
  *S KotlinDebug
  *F
  + 1 CardBrand.kt
  com/stripe/android/model/CardBrand_Companion
  *L
  239#1:261
  239#1:262,2
  249#1:264,2
  *E
  
  + SMAP
  CardNumberController.kt
  Kotlin
  *S Kotlin
  *F
  + 1 CardNumberController.kt
  com/stripe/android/ui/core/elements/CardNumberController
  + 2 Transform.kt
  kotlinx/coroutines/flow/FlowKt__TransformKt
  + 3 Emitters.kt
  kotlinx/coroutines/flow/FlowKt__EmittersKt
  + 4 SafeCollector.common.kt
  kotlinx/coroutines/flow/internal/SafeCollector_commonKt
  *L
  1#1,168:1
  47#2:169
  49#2:173
  47#2:174
  49#2:178
  47#2:179
  49#2:183
  47#2:184
  49#2:188
  50#3:170
  55#3:172

...✂

@jameswoo-stripe jameswoo-stripe force-pushed the jameswoo/card_brand_filtering_add_brand_icons_to_card_field branch 3 times, most recently from aac80fe to 27f0cab Compare May 25, 2022 20:45
Copy link
Contributor

@skyler-stripe skyler-stripe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One thing to check before approving.

How does this look with animations off? Curious if it doesn't animate, I wonder if this might cause tests to be flakey. Is this enabled by default otherwise I think you'll need to update the screenshot tests.

Does it look good with bigger font sizes? You can change that via this guy: https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheet.kt#L403

@jameswoo-stripe jameswoo-stripe force-pushed the jameswoo/card_brand_filtering_add_brand_icons_to_card_field branch from 27f0cab to 7d844aa Compare May 25, 2022 20:49
@jameswoo-stripe
Copy link
Contributor Author

One thing to check before approving.

How does this look with animations off? Curious if it doesn't animate, I wonder if this might cause tests to be flakey. Is this enabled by default otherwise I think you'll need to update the screenshot tests.

Does it look good with bigger font sizes? You can change that via this guy: https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheet.kt#L403

✅ The icons don't change size when the sizeScaleFactor changes.
✅ I tried turning off animations through Accessibility and developer settings, no changes.

@csabol-stripe
Copy link
Contributor

Could we update this so the trailing edge of the card brand icons lines up with the trailing edge of the cvc icon?

@@ -45,6 +45,30 @@ enum class CardBrand(
*/
private val variantMaxLength: Map<Pattern, Int> = emptyMap(),
) {
Visa(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this changed so that the order appears correctly in the UI? If so it might be better to have a getOrderedBrandList function. I can see adding a brand, and then not realizing I was impacting functionality, or changing the order around in the enum. The test would check it, but it might be better to be explicit. If there was a question you could look at the caller of getOrderedBrandList and see how it was being used.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The one thing I don't like is that we will need to maintain this list if there is a new CardBrand added, I think it can be easily missed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this situation I feel like it's better to have an explicit list. Your test could also assert that the orderedBrandList function has the same length as CardBrand.values()

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't really see the difference between having a test that tests the order, and this. It will get caught either way.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree that the test will catch the order, but if I don't understand that the order is used in a particular place in the code, I might just change the values in that function to make the test pass.

I think adding something to the test to make it clear, or modifying the function name to make it clear that there is a method to the ordering and it does matter and should not just be changed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added a new field to CardBrand called renderingOrder let me know what you think of this approach

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sounds great, thanks James!

@michelleb-stripe
Copy link
Contributor

This looks really slick!

@jameswoo-stripe
Copy link
Contributor Author

Could we update this so the trailing edge of the card brand icons lines up with the trailing edge of the cvc icon?

@csabol-stripe Done!

skyler-stripe
skyler-stripe previously approved these changes May 28, 2022
@jameswoo-stripe jameswoo-stripe force-pushed the jameswoo/card_brand_filtering_add_brand_icons_to_card_field branch from a31aea7 to 54c9b81 Compare May 31, 2022 18:39
@jameswoo-stripe jameswoo-stripe force-pushed the jameswoo/card_brand_filtering_add_brand_icons_to_card_field branch from 54c9b81 to 95cbf84 Compare May 31, 2022 19:21
@jameswoo-stripe jameswoo-stripe merged commit b1742cb into master May 31, 2022
@jameswoo-stripe jameswoo-stripe deleted the jameswoo/card_brand_filtering_add_brand_icons_to_card_field branch May 31, 2022 19:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants