Improve the styling on the payment sheet forms. (#3968)

stripe · Jul 9, 2021 · e693f84 · e693f84
1 parent 9d7fdc5
commit e693f84
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 16 deletions.
diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/elements/DropdownField.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/elements/DropdownField.kt
@@ -1,14 +1,24 @@
 package com.stripe.android.paymentsheet.elements
 
+import androidx.annotation.StringRes
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material.DropdownMenu
 import androidx.compose.material.DropdownMenuItem
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
+import androidx.compose.material.TextFieldDefaults
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowDropDown
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
@@ -18,11 +28,13 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.asLiveData
 
 @Composable
 internal fun DropDown(
+    @StringRes label: Int,
     controller: DropdownFieldController,
 ) {
     val selectedIndex by controller.selectedIndex.asLiveData().observeAsState(0)
@@ -33,18 +45,43 @@ internal fun DropDown(
         modifier = Modifier
             .wrapContentSize(Alignment.TopStart)
             .background(Color.Transparent)
+
     ) {
-        Text(
-            items[selectedIndex],
-            modifier = Modifier
-                .fillMaxWidth()
-                .clickable(onClick = { expanded = true })
-                .padding(16.dp)
-        )
+        Box {
+            Column(
+                modifier = Modifier.padding(
+                    start = 16.dp,
+                    top = 4.dp,
+                    bottom = 8.dp
+                )
+            ) {
+                DropdownLabel(label)
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.Bottom
+                ) {
+                    Text(
+                        items[selectedIndex],
+                        modifier = Modifier
+                            .fillMaxWidth(.9f)
+                            .clickable(onClick = { expanded = true })
+                    )
+                    // TODO: THere is something wrong with the mandate - not showing
+                    // TODO: Change order of sofort elements
+                    Icon(
+                        Icons.Filled.ArrowDropDown,
+                        contentDescription = "Dropdown arrow",
+                        modifier = Modifier
+                            .height(24.dp)
+                            .clickable(onClick = { expanded = true })
+                    )
+                }
+            }
+        }
+
         DropdownMenu(
             expanded = expanded,
-            onDismissRequest = { expanded = false },
-            modifier = Modifier.fillMaxWidth()
+            onDismissRequest = { expanded = false }
         ) {
             items.forEachIndexed { index, displayValue ->
                 DropdownMenuItem(
@@ -59,3 +96,25 @@ internal fun DropDown(
         }
     }
 }
+
+/**
+ * This will create the label for the DropdownTextField.
+ *
+ * Copied logic from androidx.compose.material.TextFieldImpl
+ */
+@Composable
+internal fun DropdownLabel(
+    @StringRes label: Int,
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+    Text(
+        stringResource(label),
+        color = TextFieldDefaults.textFieldColors()
+            .labelColor(
+                enabled = true,
+                error = false,
+                interactionSource = interactionSource
+            ).value,
+        style = MaterialTheme.typography.caption
+    )
+}
diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/elements/Section.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/elements/Section.kt
@@ -28,7 +28,7 @@ internal data class CardStyle(
 @Composable
 internal fun Section(error: String?, content: @Composable () -> Unit) {
     val cardStyle = CardStyle()
-    Column(modifier = Modifier.padding(top = 8.dp)) {
+    Column(modifier = Modifier.padding(vertical = 8.dp)) {
         Card(
             border = BorderStroke(cardStyle.cardBorderWidth, cardStyle.cardBorderColor),
             elevation = cardStyle.cardElevation

diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/forms/Form.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/forms/Form.kt
@@ -18,6 +18,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.ViewModelProvider
 import androidx.lifecycle.asLiveData
@@ -85,7 +86,10 @@ internal fun Form(
                                         )
                                     }
                                     is DropdownFieldElement -> {
-                                        DropDown(element.field.controller)
+                                        DropDown(
+                                            element.field.controller.label,
+                                            element.field.controller
+                                        )
                                     }
                                 }
                             }
@@ -94,6 +98,8 @@ internal fun Form(
                     is MandateTextElement -> {
                         Text(
                             stringResource(element.stringResId, element.merchantName ?: ""),
+                            fontSize = 10.sp,
+                            letterSpacing = .7.sp,
                             modifier = Modifier.padding(vertical = 8.dp),
                             color = element.color
                         )
@@ -108,7 +114,10 @@ internal fun Form(
                                 checked = checked,
                                 onCheckedChange = { controller.onValueChange(it) }
                             )
-                            Text(stringResource(controller.label, element.merchantName ?: ""))
+                            Text(
+                                stringResource(controller.label, element.merchantName ?: ""),
+                                Modifier.padding(start = 8.dp)
+                            )
                         }
                     }
                 }

diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/specifications/BancontactSpec.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/specifications/BancontactSpec.kt
@@ -23,12 +23,12 @@ internal val bancontact = FormSpec(
         listOf(
             bancontactNameSection,
             bancontactEmailSection,
-            bancontactMandate,
             SaveForFutureUseSpec(
                 listOf(
                     bancontactEmailSection, bancontactMandate
                 )
-            )
+            ),
+            bancontactMandate,
         )
     ),
     bancontactParamKey,

diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/specifications/IdealSpec.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/specifications/IdealSpec.kt
@@ -33,8 +33,8 @@ internal val ideal = FormSpec(
             idealNameSection,
             idealEmailSection,
             idealBankSection,
+            SaveForFutureUseSpec(listOf(idealEmailSection, idealMandate)),
             idealMandate,
-            SaveForFutureUseSpec(listOf(idealEmailSection, idealMandate))
         )
     ),
     idealParamKey,

diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/specifications/SofortSpec.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/specifications/SofortSpec.kt
@@ -34,8 +34,8 @@ internal val sofort = FormSpec(
             sofortNameSection,
             sofortEmailSection,
             sofortCountrySection,
+            SaveForFutureUseSpec(listOf(sofortNameSection, sofortEmailSection, sofortMandate)),
             sofortMandate,
-            SaveForFutureUseSpec(listOf(sofortNameSection, sofortEmailSection, sofortMandate))
         )
     ),
     sofortParamKey,