Add placeholder and label customization #28

adnanjelic · 2023-10-27T09:38:47Z

Why

In this PR we have added customization options for the placeholders, labels and the input text field (look and feel).

The PR is pretty big, but the improvements are significant for future ease of maintenance.

Some parts of the changes are just extracting code into separate files/classes so that takes a significant part of the total LOC.

For easier review, I have commented on the code that was just extracted and does not need any additional review.

How

Many improvements have been made, so here is a bullet list:

Created 2 new constructors (InlinePaymentCard and RowsPaymentCard) to separate layouts and make it easier for the users to use default and row implementations (these return the new PaymentCardData introduced in the previous PR). These new constructors do not accept the layout and the implementation is hidden from the users as the component already provides the expected layout. This also makes the specific default inline and row implementations scalable. In the future they can expand independently without bloating the API with unnecessary parameters that are not needed for both layouts. It also follows the Compose guidelines of creating specific constructors for different implementations of the underlying specific components.
The previously created PaymentCardComponent has been renamed to simple PaymentCard as it should be the default constructor for the custom layouts for the users. If you feel that this needs to be changed I am open to suggestions.
Added new classes and builders to provide defaults for placeholders and labels
User custom placeholder texts can now be provided to all component implementations (we provide the defaults that can be overridden)
Added new input components to the interface and implementation that accept label and placeholder Composables so the users have the ability to add any kind of Composables and customize them as much as they need
Added TextFieldColors parameter and support to the new input components so the user can customize the input look and feel as they want
Created a new CustomTextField that works together with the above-mentioned inputs with Composables.
Added many samples of the components and their usage, both inside the lib module (as Previews) and in the sample app
We also took the opportunity to clean up a little bit the code:
- Better code/class structuring
- Got rid of "god" classes that had mixed-up code by extracting parts of the code to other SRP classes/files smaller for better maintainability and reusability

Final notes:

The changes are done so the existing API users are not affected.
No current API name or signature is changed
If we needed to add something to the existing constructors, we overloaded them not to change any method/constructor signature.
The users are not forced and can switch to use the new components whenever they feel to (to use the Composables instead of simple configurations for example.)

Samples

Sample app update	Samples in the lib	Samples in the lib

…fields to support them

… with the new data classes

changeset-bot · 2023-10-27T09:38:51Z

⚠️ No Changeset found

Latest commit: ceafaae

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

adnanjelic · 2023-10-27T09:41:39Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/InlinePaymentCardInput.kt

+@Composable
+fun inlinePaymentCardInputLayout(): @Composable() (PaymentCardInputScope.(Modifier) -> Unit) =
+    { inline(modifier = it) }


Moved to the top as it is the entry point (did not make it internal as it was exposed before)

adnanjelic · 2023-10-27T09:42:27Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/InlinePaymentCardInput.kt

+    { inline(modifier = it) }
+
+@Composable
+fun inlinePaymentCardInputLayout(placeholderTexts: PlaceholderTexts): @Composable() (PaymentCardInputScope.(Modifier) -> Unit) =


a new method for providing placeholderTexts functionality to existing API users

adnanjelic · 2023-10-27T09:43:08Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/PaymentCardInput.kt

@@ -206,221 +185,3 @@ fun PaymentCardInput(
    )
 }

-interface PaymentCardInputScope {


Moved outside

adnanjelic · 2023-10-27T09:43:37Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/PaymentCardInputScope.kt

+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.TextStyle
+
+interface PaymentCardInputScope {


Moved out from PaymentCardInput and added new composable methods commented below

adnanjelic · 2023-10-27T09:44:01Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/PaymentCardInputScope.kt

+    fun CardNumberField(modifier: Modifier, options: TextFieldOptions, placeholder: String)
+
+    @Composable
+    fun CardNumberField(


New input that accepts Composables

adnanjelic · 2023-10-27T09:44:07Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/PaymentCardInputScope.kt

+    fun ExpiryField(modifier: Modifier, options: TextFieldOptions, placeholder: String)
+
+    @Composable
+    fun ExpiryField(


New input that accepts Composables

adnanjelic · 2023-10-27T09:44:12Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/PaymentCardInputScope.kt

+    fun CVCField(modifier: Modifier, options: TextFieldOptions, placeholder: String)
+
+    @Composable
+    fun CVCField(


New input that accepts Composables

adnanjelic · 2023-10-27T09:45:40Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/PaymentCardInputScopeImpl.kt

+import com.evervault.sdk.input.model.placeholder.PlaceholderTextsDefaults
+import com.evervault.sdk.input.ui.component.CustomTextField
+
+internal class PaymentCardInputScopeImpl(


Moved out from PaymentCardInput and added new composable implementation methods commented below

adnanjelic · 2023-10-27T09:46:02Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/PaymentCardInputScopeImpl.kt

+    }
+
+    @Composable
+    override fun CardNumberField(


New input that accepts Composables

adnanjelic · 2023-10-27T09:46:17Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/PaymentCardInputScopeImpl.kt

+    }
+
+    @Composable
+    override fun ExpiryField(


New input that accepts Composables

adnanjelic · 2023-10-27T09:46:26Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/PaymentCardInputScopeImpl.kt

+    }
+
+    @Composable
+    override fun CVCField(


New input that accepts Composables

adnanjelic · 2023-10-27T09:47:04Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/PaymentCardInputScopeImpl.kt

+
+    @OptIn(ExperimentalMaterial3Api::class)
+    @Composable
+    private fun CustomTextField(


Nothing new, just extracted from PaymentCardInput

adnanjelic · 2023-10-27T09:47:40Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/RowsPaymentCardInput.kt

+import com.evervault.sdk.input.model.placeholder.PlaceholderTexts
+
+@Composable
+fun rowsPaymentCardInputLayout(): @Composable() (PaymentCardInputScope.(Modifier) -> Unit) =


Moved to the top as it is the entry point (did not make it internal as it was exposed before)

adnanjelic · 2023-10-27T09:48:12Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/RowsPaymentCardInput.kt

+    { rows(modifier = it) }
+
+@Composable
+fun rowsPaymentCardInputLayout(placeholderTexts: PlaceholderTexts): @Composable() (PaymentCardInputScope.(Modifier) -> Unit) =


a new method for providing placeholderTexts functionality to existing API users

adnanjelic · 2023-10-27T09:49:39Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/component/CustomTextField.kt

+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+internal fun CustomTextField(


new input field that works with Composables

adnanjelic · 2023-10-27T09:50:21Z

evervault-inputs/src/main/java/com/evervault/sdk/input/ui/sample/PaymentCardSamples.kt

@@ -0,0 +1,231 @@
+package com.evervault.sdk.input.ui.sample


Renamed the PaymentCardInputComponentSamples, modified and added new samples (can be seen inside AS)

adnanjelic · 2023-10-27T09:52:41Z

sampleapplication/src/main/java/com/evervault/sampleapplication/sample/PaymentCardSamples.kt

+ */
+
+@Composable
+internal fun PaymentCardInputScope.PaymentCardCustomLayoutWithNewComponents(modifier: Modifier) {


Needed to create this one not to pollute the NavigationGraph. Temporarily until we create a shared module where we can share components between the libs and the sample app

adnanjelic · 2023-10-27T09:53:28Z

sampleapplication/src/main/java/com/evervault/sampleapplication/ui/views/component/InfoBlock.kt

+import androidx.compose.ui.unit.dp
+
+@Composable
+internal fun InfoBlock(label: String, value: String) {


Just extracted from CreditCardInputView

adnanjelic · 2023-10-27T09:53:57Z

...on/src/main/java/com/evervault/sampleapplication/ui/views/component/StubbedCustomizations.kt

+import com.evervault.sdk.input.model.placeholder.PlaceholderDefaults
+
+@Composable
+internal fun CustomTheme(content: @Composable () -> Unit) {


Extracted from CreditCardInputView to make it reusable

adnanjelic · 2023-10-27T09:54:37Z

...on/src/main/java/com/evervault/sampleapplication/ui/views/component/StubbedCustomizations.kt

+}
+
+@Composable
+internal fun customPlaceholderTexts() = PlaceholderDefaults.texts(


This is just to provide different placeholder texts than defaults to see that the user can customize them

adnanjelic · 2023-10-27T09:56:00Z

...plication/src/main/java/com/evervault/sampleapplication/ui/views/component/SupportingText.kt

+import androidx.compose.ui.text.font.FontStyle
+
+@Composable
+internal fun SupportingText(text: String) {


Simple component to wrap the supporting text (below the title in the ListItem) to make the NavigationGraph easier to read and maintain

boilsquid

Very nice!

adnanjelic added 30 commits October 25, 2023 22:15

Created the default label and placeholder classes and builders

f821aa0

Created new CustomTextField with composable inputs and new interface …

41a814d

…fields to support them

Extracted the interface to a separate file

391d414

Extracted the PaymentCardInputScopeImpl to a separate file

e7dfaf8

Extracted the PaymentCardInputScope interface

39ff988

Extracted the CustomTextField to a separate file

65e5c3c

Created the new PaymentCardComponentView to be used in the sample app…

e162afd

… with the new data classes

Extracted the CustomLayout into a separate file

4c9daac

Added navigation to the new customizable Composable layout example

aaa66c7

Created and implemented the InlinePaymentCard

ac483b8

Moved the new components in a new package

8633405

Created the RowsPaymentCard and implemented it

d6efa48

Renamed the PaymentCardComponent

37fe899

Renaming of some components

98d72d5

Added payment card samples

6b0c36c

Added custom sample to PaymentCardSamples

12fcc40

Added support for placeholder texts to old layouts

bbe99a5

Added samples to the sample app

036c624

Added Composable samples to the sample app

bc7c28b

Added vertical scroll to the PaymentCardComponentViews

25aae09

Moved PlaceholderDefaults to ptoper package and added docs

0c63f12

Repackaging of the labels and placeholders

c26ed71

Added docs for the InlinePaymentCard

84ecf5b

Added docs for the RowsPaymentCard

2a6fb14

Fix docs for the PaymentCard

9693968

Fix docs for the PaymentCard and fixing wrong package names

63300e1

Minor cosmetic and formatting changes

aa342c9

Minor cosmetic and formatting changes

752e9ec

Updated the sample app list items

5f4b02f

Updated the sample app list items

92b079e

adnanjelic added 2 commits October 27, 2023 10:26

Minot label fixes

70ccd3c

Minor text fixes

ceafaae

adnanjelic requested a review from boilsquid October 27, 2023 09:38

adnanjelic commented Oct 27, 2023

View reviewed changes

boilsquid approved these changes Oct 27, 2023

View reviewed changes

adnanjelic merged commit cd86117 into main Oct 27, 2023
4 checks passed

adnanjelic deleted the adnan/add-placeholder-and-label-customization branch October 27, 2023 10:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add placeholder and label customization #28

Add placeholder and label customization #28

adnanjelic commented Oct 27, 2023

changeset-bot bot commented Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023 •

edited

Loading

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

adnanjelic Oct 27, 2023

boilsquid left a comment

Add placeholder and label customization #28

Add placeholder and label customization #28

Conversation

adnanjelic commented Oct 27, 2023

Why

How

Final notes:

Samples

changeset-bot bot commented Oct 27, 2023

⚠️ No Changeset found

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adnanjelic Oct 27, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

boilsquid left a comment

Choose a reason for hiding this comment

adnanjelic Oct 27, 2023 •

edited

Loading