ANDROID-14792 Support Checkbox with Links for Compose implementation #400

haynlo · 2024-12-19T12:32:11Z

🎟️ Jira ticket

🥅 What's the goal?

Support Checkbox with Links for Compose implementation

⚠️ Don't panic! The actual changes affect only less than 10 files. All other changes are related to the baseline ScreenShot due to the migration of the RippleTheme.

🚧 How do we do it?

Update Compose UI version
Fix problemas related to Compose UI upgrade
- RippleTheme is now deprecated. It has been migrated.
Apply Role.Checkbox to Row wrapper to improve component usability.
Change TextWithLinks Composable in order to support new spannableString withLink method

☑️ Checks

I updated the documentation, including readmes and wikis. If this is a breaking change, tag the PR with "Breaking Change" label and remember to include breaking change migration guide in release notes where this version is released.
Tested with dark mode.
Tested with API 24.
Sync done with iOS team for this feature to ensure alignment, if applies.
Accessibility considerations.

🧪 How can I test this?

Ripple effect still being the same after the migration

Ripple Before	Ripple After
ripple_before.mp4	ripple_after.mp4

Demo of main change

CheckBox with links in Compose
demo_checkbox_with_links.mp4

…ting

github-actions · 2024-12-19T12:37:48Z

📱 New catalog for testing generated: Download

github-actions · 2024-12-19T13:04:08Z

📱 New catalog for testing generated: Download

haynlo · 2024-12-19T13:07:58Z

build.gradle

-        compose_ui_version = "1.5.4"
+        compose_ui_version = "1.7.6"


Update to the latest stable version in order to use the new withLink method.

haynlo · 2024-12-19T13:10:14Z

catalog/build.gradle

    implementation "androidx.compose.material:material:$compose_ui_version"
+    implementation("androidx.compose.material:material-icons-extended:$compose_ui_version")


Some ComposeUI Icons used in Mística have been moved into a separated dependency, so I've just added the new one to support the already used Icons.

haynlo · 2024-12-19T13:11:57Z

library/src/main/java/com/telefonica/mistica/compose/button/Button.kt


+@OptIn(ExperimentalMaterialApi::class)


New RippleTheme has been deprecated. So there's an error when compiling the App.
There is an official migration guide to replace RippleTheme: https://developer.android.com/develop/ui/compose/touch-input/user-interactions/migrate-indication-ripple#migrate-ripple-theme

The migration involves using ExperimentalMaterialApi classes.

haynlo · 2024-12-19T13:13:30Z

library/src/main/java/com/telefonica/mistica/compose/button/ButtonStyles.kt

@@ -1,11 +1,15 @@
+@file:OptIn(ExperimentalMaterialApi::class) // Required for RippleConfiguration usage


The 90% of the methods inside this class need use the new LocalRippleConfiguration so I've added the OptIn annotation in the file level to avoid add the same annotation for each method.

haynlo · 2024-12-19T13:14:52Z

library/src/main/java/com/telefonica/mistica/compose/button/ButtonStyles.kt

+@Composable
+private fun getMisticaRippleConfiguration(color: Color, alpha: RippleAlpha? = null) =
+    RippleConfiguration(color, alpha ?: RippleDefaults.rippleAlpha(color, !isSystemInDarkTheme()))


Replace deprecated RippleTheme into the new one recommended by Android, maintaining the previous configuration we had in Mistica.

haynlo · 2024-12-19T13:16:00Z

library/src/main/java/com/telefonica/mistica/compose/input/CheckBoxInput.kt

+        Row(modifier = Modifier.toggleable(
+            value = checked,
+            onValueChange = onCheckedChange,
+            role = Role.Checkbox
+        )) {
+            Checkbox(


This is the one of the two main changes: Apply Role.Checkbox to Row wrapper to improve component usability.

haynlo · 2024-12-19T13:16:31Z

library/src/main/java/com/telefonica/mistica/compose/input/CheckBoxInput.kt

+        )) {
+            Checkbox(
+                checked = checked,
+                onCheckedChange = null,


oncheckedChange is now handled here: https://github.com/Telefonica/mistica-android/pull/400/files#diff-f3463b3eedd33d85c4cfb17c6d000d0d19f8b035ad676630753bd23a47b59849R34

haynlo · 2024-12-19T13:17:48Z

library/src/main/java/com/telefonica/mistica/compose/input/TextWithLinks.kt

@@ -22,92 +22,51 @@ internal fun TextWithLinks(
    modifier: Modifier = Modifier,
 ) {
    val textLinkColour = MisticaTheme.colors.textLink
-    val linksText = remember { getAnnotatedLinksString(text = text, links = links, highlightColor = textLinkColour) }
-    ClickableText(
+    val linksText = remember { getAnnotatedLinksString(originalText = text, links = links, highlightColor = textLinkColour) }


From here, you can see the second main change. The logic for creating the SpannableString has been redefined using the new withLink method.

haynlo · 2024-12-19T13:18:14Z

library/src/main/java/com/telefonica/mistica/compose/input/TextWithLinks.kt

-    }
-}
+) = buildAnnotatedString {
+    val linkMap = links.associateBy { it.link }


Create a map for faster link lookup

haynlo · 2024-12-19T13:58:24Z

library/screenshots/Badge_numeric_one_digit.png

There's a lot of screenshot changes due to Ripple migration, no need to review them.

jeprubio

Great 👍

jeprubio · 2024-12-19T14:41:20Z

library/src/main/java/com/telefonica/mistica/compose/input/TextWithLinks.kt

+            val (linkText, link) = linkEntry
+            withLink(
+                link = LinkAnnotation.Clickable(
+                    tag = TAG,


I wonder if TextLink should include a tag so that it has this "TextWithLinks" default value but it can be changed if needed for testing.

this would be very useful specially when there are more than one link

Done here: f85d561

yamal-alm

looks good 👍 This must be a new record 😄

…suggestion

github-actions · 2024-12-19T17:02:50Z

📱 New catalog for testing generated: Download

haynlo added 3 commits December 16, 2024 17:21

ANDROID-14792 Update. Replace deprecated provider reference

e2b6fa1

ANDROID-14792 Update. Compose UI version and migrate errors from upda…

730a646

…ting

ANDROID-14792 Support Checkbox with Links for Compose implementation

2cb4462

ANDROID-14792 Update. Ignore detekt error

375ecc2

haynlo commented Dec 19, 2024

View reviewed changes

Updated screenshots baseline

5a27f34

haynlo commented Dec 19, 2024

View reviewed changes

haynlo requested review from jeprubio, a team and yamal-alm and removed request for a team December 19, 2024 14:08

jeprubio approved these changes Dec 19, 2024

View reviewed changes

yamal-alm approved these changes Dec 19, 2024

View reviewed changes

ANDROID-14792 Update. Support custom link tag according to @jeprubio …

f85d561

…suggestion

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ANDROID-14792 Support Checkbox with Links for Compose implementation #400

ANDROID-14792 Support Checkbox with Links for Compose implementation #400

haynlo commented Dec 19, 2024 •

edited

Loading

github-actions bot commented Dec 19, 2024

github-actions bot commented Dec 19, 2024

haynlo Dec 19, 2024

haynlo Dec 19, 2024

haynlo Dec 19, 2024

haynlo Dec 19, 2024

haynlo Dec 19, 2024

haynlo Dec 19, 2024

haynlo Dec 19, 2024

haynlo Dec 19, 2024

haynlo Dec 19, 2024

haynlo Dec 19, 2024

jeprubio left a comment

jeprubio Dec 19, 2024

yamal-alm Dec 19, 2024

haynlo Dec 19, 2024

yamal-alm left a comment

github-actions bot commented Dec 19, 2024

		implementation "androidx.compose.material:material:$compose_ui_version"
		implementation("androidx.compose.material:material-icons-extended:$compose_ui_version")

		@@ -1,11 +1,15 @@
		@file:OptIn(ExperimentalMaterialApi::class) // Required for RippleConfiguration usage


		@OptIn(ExperimentalMaterialApi::class)

ANDROID-14792 Support Checkbox with Links for Compose implementation #400

Are you sure you want to change the base?

ANDROID-14792 Support Checkbox with Links for Compose implementation #400

Conversation

haynlo commented Dec 19, 2024 • edited Loading

🎟️ Jira ticket

🥅 What's the goal?

🚧 How do we do it?

☑️ Checks

🧪 How can I test this?

Ripple effect still being the same after the migration

Demo of main change

github-actions bot commented Dec 19, 2024

github-actions bot commented Dec 19, 2024

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

jeprubio left a 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

yamal-alm left a comment

Choose a reason for hiding this comment

github-actions bot commented Dec 19, 2024

haynlo commented Dec 19, 2024 •

edited

Loading