From 96c7e95a19fe5705d4ddd3807952a0a1c23a0372 Mon Sep 17 00:00:00 2001 From: Skyler <89166418+skyler-stripe@users.noreply.github.com> Date: Wed, 25 May 2022 16:39:03 -0400 Subject: [PATCH] Fix missing theming for add lpm button and notes text (#5068) * Fix missing theming for add lpm button and notes text * changelog --- CHANGELOG.md | 1 + .../paymentsheet/PaymentOptionsAdapter.kt | 316 +++++++++--------- .../paymentsheet/ui/BaseSheetActivity.kt | 17 +- 3 files changed, 171 insertions(+), 163 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c8de896f9a9..679687c1f38 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ### PaymentSheet * [DEPRECATED][5061](https://github.com/stripe/stripe-android/pull/5061) Add Deprecated annotation to old primaryButtonColor api. +* [FIXED][5068](https://github.com/stripe/stripe-android/pull/5068) Fix missing theming for add lpm button and notes text ## 20.4.0 - 2022-05-23 This release adds [appearance customization APIs](https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheet.kt#L186) to payment sheet and enables Affirm and AU BECS direct debit as payment methods within Payment Sheet. diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentOptionsAdapter.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentOptionsAdapter.kt index ff35e9970b4..51fe96084d9 100644 --- a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentOptionsAdapter.kt +++ b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentOptionsAdapter.kt @@ -340,21 +340,23 @@ internal class PaymentOptionsAdapter( ) composeView.setContent { - PaymentOptionUi( - viewWidth = width, - isEditing = isEditing, - isSelected = isSelected, - isEnabled = isEnabled, - iconRes = savedPaymentMethod.paymentMethod.getSavedPaymentMethodIcon() ?: 0, - labelIcon = labelIcon, - labelText = labelText, - removePmDialogTitle = removeTitle, - description = item.getDescription(itemView.resources), - onRemoveListener = { onRemoveListener(position) }, - onRemoveAccessibilityDescription = - savedPaymentMethod.getRemoveDescription(itemView.resources), - onItemSelectedListener = { onItemSelectedListener(position, true) }, - ) + PaymentsTheme { + PaymentOptionUi( + viewWidth = width, + isEditing = isEditing, + isSelected = isSelected, + isEnabled = isEnabled, + iconRes = savedPaymentMethod.paymentMethod.getSavedPaymentMethodIcon() ?: 0, + labelIcon = labelIcon, + labelText = labelText, + removePmDialogTitle = removeTitle, + description = item.getDescription(itemView.resources), + onRemoveListener = { onRemoveListener(position) }, + onRemoveAccessibilityDescription = + savedPaymentMethod.getRemoveDescription(itemView.resources), + onItemSelectedListener = { onItemSelectedListener(position, true) }, + ) + } } } } @@ -381,26 +383,28 @@ internal class PaymentOptionsAdapter( position: Int ) { composeView.setContent { - val iconRes = if ( - MaterialTheme.paymentsColors.component.shouldUseDarkDynamicColor() - ) { - R.drawable.stripe_ic_paymentsheet_add_dark - } else { - R.drawable.stripe_ic_paymentsheet_add_light + PaymentsTheme { + val iconRes = if ( + MaterialTheme.paymentsColors.component.shouldUseDarkDynamicColor() + ) { + R.drawable.stripe_ic_paymentsheet_add_dark + } else { + R.drawable.stripe_ic_paymentsheet_add_light + } + PaymentOptionUi( + viewWidth = width, + isEditing = false, + isSelected = false, + isEnabled = isEnabled, + labelText = itemView.resources.getString( + R.string.stripe_paymentsheet_add_payment_method_button_label + ), + iconRes = iconRes, + onItemSelectedListener = onItemSelectedListener, + description = + itemView.resources.getString(R.string.add_new_payment_method), + ) } - PaymentOptionUi( - viewWidth = width, - isEditing = false, - isSelected = false, - isEnabled = isEnabled, - labelText = itemView.resources.getString( - R.string.stripe_paymentsheet_add_payment_method_button_label - ), - iconRes = iconRes, - onItemSelectedListener = onItemSelectedListener, - description = - itemView.resources.getString(R.string.add_new_payment_method), - ) } } } @@ -431,16 +435,18 @@ internal class PaymentOptionsAdapter( position: Int ) { composeView.setContent { - PaymentOptionUi( - viewWidth = width, - isEditing = false, - isSelected = isSelected, - isEnabled = isEnabled, - iconRes = R.drawable.stripe_google_pay_mark, - labelText = itemView.resources.getString(R.string.google_pay), - description = itemView.resources.getString(R.string.google_pay), - onItemSelectedListener = { onItemSelectedListener(position, true) }, - ) + PaymentsTheme { + PaymentOptionUi( + viewWidth = width, + isEditing = false, + isSelected = isSelected, + isEnabled = isEnabled, + iconRes = R.drawable.stripe_google_pay_mark, + labelText = itemView.resources.getString(R.string.google_pay), + description = itemView.resources.getString(R.string.google_pay), + onItemSelectedListener = { onItemSelectedListener(position, true) }, + ) + } } } } @@ -593,131 +599,129 @@ internal fun PaymentOptionUi( ) { // An attempt was made to not use constraint layout here but it was unsuccessful in // precisely positioning the check and delete icons to match the mocks. - PaymentsTheme { - ConstraintLayout( + ConstraintLayout( + modifier = Modifier + .padding(top = 12.dp) + .width(viewWidth) + .alpha(alpha = if (isEnabled) 1.0F else 0.6F) + .selectable(selected = isSelected, enabled = isEnabled, onClick = { + onItemSelectedListener() + }) + ) { + val (checkIcon, deleteIcon, label, card) = createRefs() + SectionCard( + isSelected = isSelected, modifier = Modifier - .padding(top = 12.dp) - .width(viewWidth) - .alpha(alpha = if (isEnabled) 1.0F else 0.6F) - .selectable(selected = isSelected, enabled = isEnabled, onClick = { - onItemSelectedListener() - }) + .height(64.dp) + .padding(horizontal = PM_OPTIONS_DEFAULT_PADDING.dp) + .fillMaxWidth() + .constrainAs(card) { + top.linkTo(parent.top) + start.linkTo(parent.start) + end.linkTo(parent.end) + } ) { - val (checkIcon, deleteIcon, label, card) = createRefs() - SectionCard( - isSelected = isSelected, - modifier = Modifier - .height(64.dp) - .padding(horizontal = PM_OPTIONS_DEFAULT_PADDING.dp) - .fillMaxWidth() - .constrainAs(card) { - top.linkTo(parent.top) - start.linkTo(parent.start) - end.linkTo(parent.end) - } + Column( + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier.fillMaxSize() ) { - Column( - verticalArrangement = Arrangement.Center, - horizontalAlignment = Alignment.CenterHorizontally, - modifier = Modifier.fillMaxSize() - ) { - Image( - painter = painterResource(iconRes), - contentDescription = null, - modifier = Modifier - .height(40.dp) - .width(56.dp) - ) - } - } - if (isSelected) { - val iconColor = MaterialTheme.colors.primary - val checkSymbolColor = if (iconColor.shouldUseDarkDynamicColor()) { - Color.Black - } else { - Color.White - } - Box( - contentAlignment = Alignment.Center, + Image( + painter = painterResource(iconRes), + contentDescription = null, modifier = Modifier - .clip(CircleShape) - .size(24.dp) - .background(MaterialTheme.colors.primary) - .constrainAs(checkIcon) { - top.linkTo(card.bottom, (-18).dp) - end.linkTo(card.end) - } - ) { - Icon( - imageVector = Icons.Filled.Check, - contentDescription = null, - tint = checkSymbolColor, - modifier = Modifier - .size(12.dp) - ) - } - } - if (isEditing && onRemoveListener != null) { - val openDialog = remember { mutableStateOf(false) } - - SimpleDialogElementUI( - openDialog = openDialog, - titleText = removePmDialogTitle, - messageText = description, - confirmText = stringResource(R.string.remove), - dismissText = stringResource(R.string.cancel), - onConfirmListener = onRemoveListener + .height(40.dp) + .width(56.dp) ) - - // tint the delete symbol so it contrasts well with the error color around it. - val iconColor = MaterialTheme.colors.error - val deleteIconColor = if (iconColor.shouldUseDarkDynamicColor()) { - Color.Black - } else { - Color.White - } - Image( - painter = painterResource(R.drawable.stripe_ic_delete_symbol), - contentDescription = onRemoveAccessibilityDescription, - colorFilter = ColorFilter.tint(deleteIconColor), + } + } + if (isSelected) { + val iconColor = MaterialTheme.colors.primary + val checkSymbolColor = if (iconColor.shouldUseDarkDynamicColor()) { + Color.Black + } else { + Color.White + } + Box( + contentAlignment = Alignment.Center, + modifier = Modifier + .clip(CircleShape) + .size(24.dp) + .background(MaterialTheme.colors.primary) + .constrainAs(checkIcon) { + top.linkTo(card.bottom, (-18).dp) + end.linkTo(card.end) + } + ) { + Icon( + imageVector = Icons.Filled.Check, + contentDescription = null, + tint = checkSymbolColor, modifier = Modifier - .constrainAs(deleteIcon) { - top.linkTo(card.top, margin = (-9).dp) - end.linkTo(card.end) - } - .size(20.dp) - .clip(CircleShape) - .background(color = iconColor) - .clickable( - onClick = { - openDialog.value = true - } - ) + .size(12.dp) ) } + } + if (isEditing && onRemoveListener != null) { + val openDialog = remember { mutableStateOf(false) } + + SimpleDialogElementUI( + openDialog = openDialog, + titleText = removePmDialogTitle, + messageText = description, + confirmText = stringResource(R.string.remove), + dismissText = stringResource(R.string.cancel), + onConfirmListener = onRemoveListener + ) - LpmSelectorText( - icon = labelIcon, - text = labelText, - textColor = MaterialTheme.colors.onSurface, - isEnabled = isEnabled, + // tint the delete symbol so it contrasts well with the error color around it. + val iconColor = MaterialTheme.colors.error + val deleteIconColor = if (iconColor.shouldUseDarkDynamicColor()) { + Color.Black + } else { + Color.White + } + Image( + painter = painterResource(R.drawable.stripe_ic_delete_symbol), + contentDescription = onRemoveAccessibilityDescription, + colorFilter = ColorFilter.tint(deleteIconColor), modifier = Modifier - .constrainAs(label) { - top.linkTo(card.bottom) - start.linkTo(card.start) + .constrainAs(deleteIcon) { + top.linkTo(card.top, margin = (-9).dp) + end.linkTo(card.end) } - .padding( - top = 4.dp, - start = PM_OPTIONS_DEFAULT_PADDING.dp, - end = PM_OPTIONS_DEFAULT_PADDING.dp + .size(20.dp) + .clip(CircleShape) + .background(color = iconColor) + .clickable( + onClick = { + openDialog.value = true + } ) - .semantics { - // This makes the screen reader read out numbers digit by digit - // one one one one vs one thousand one hundred eleven - this.contentDescription = - description.replace("\\d".toRegex(), "$0 ") - }, ) } + + LpmSelectorText( + icon = labelIcon, + text = labelText, + textColor = MaterialTheme.colors.onSurface, + isEnabled = isEnabled, + modifier = Modifier + .constrainAs(label) { + top.linkTo(card.bottom) + start.linkTo(card.start) + } + .padding( + top = 4.dp, + start = PM_OPTIONS_DEFAULT_PADDING.dp, + end = PM_OPTIONS_DEFAULT_PADDING.dp + ) + .semantics { + // This makes the screen reader read out numbers digit by digit + // one one one one vs one thousand one hundred eleven + this.contentDescription = + description.replace("\\d".toRegex(), "$0 ") + }, + ) } } diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/BaseSheetActivity.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/BaseSheetActivity.kt index e49bee16f19..5ffe8e11a95 100644 --- a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/BaseSheetActivity.kt +++ b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/BaseSheetActivity.kt @@ -281,13 +281,16 @@ internal abstract class BaseSheetActivity : AppCompatActivity() { val showNotes = text != null text?.let { notesView.setContent { - Html( - html = text, - imageGetter = mapOf(), - color = MaterialTheme.paymentsColors.subtitle, - style = MaterialTheme.typography.body1.copy(textAlign = TextAlign.Center), - modifier = Modifier.padding(vertical = 8.dp) - ) + PaymentsTheme { + Html( + html = text, + imageGetter = mapOf(), + color = MaterialTheme.paymentsColors.subtitle, + style = MaterialTheme.typography.body1.copy( + textAlign = TextAlign.Center + ) + ) + } } } notesView.isVisible = showNotes