Merge pull request #825 from android/refactor/interest_item

Refactor InterestsItem to a Material3 ListItem

feature/interests/src/main/java/com/google/samples/apps/nowinandroid/feature/interests/InterestsItem.kt

@@ -18,22 +18,20 @@ package com.google.samples.apps.nowinandroid.feature.interests
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Icon
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.ListItemDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-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.semantics.semantics
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.google.samples.apps.nowinandroid.core.designsystem.component.DynamicAsyncImage
 import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaIconToggleButton
@@ -51,23 +49,18 @@ fun InterestsItem(
     modifier: Modifier = Modifier,
     iconModifier: Modifier = Modifier,
     description: String = "",
-    itemSeparation: Dp = 16.dp,
-) {
-    Row(
-        verticalAlignment = Alignment.CenterVertically,
-        modifier = modifier,
-    ) {
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            modifier = Modifier
-                .weight(1f)
-                .clickable { onClick() }
-                .padding(vertical = itemSeparation),
 ) {
+    ListItem(
+        leadingContent = {
             InterestsIcon(topicImageUrl, iconModifier.size(64.dp))
-            Spacer(modifier = Modifier.width(24.dp))
+        },
-            InterestContent(name, description)
+        headlineContent = {
-        }
+            Text(text = name)
+        },
+        supportingContent = {
+            Text(text = description)
+        },
+        trailingContent = {
             NiaIconToggleButton(
                 checked = following,
                 onCheckedChange = onFollowButtonClick,
@@ -88,26 +81,14 @@ fun InterestsItem(
                     )
                 },
             )
-    }
+        },
-}
+        colors = ListItemDefaults.colors(
-
+            containerColor = Color.Transparent,
-@Composable
-private fun InterestContent(name: String, description: String, modifier: Modifier = Modifier) {
-    Column(modifier) {
-        Text(
-            text = name,
-            style = MaterialTheme.typography.headlineSmall,
-            modifier = Modifier.padding(
-                vertical = if (description.isEmpty()) 0.dp else 4.dp,
         ),
+        modifier = modifier
+            .semantics(mergeDescendants = true) { /* no-op */ }
+            .clickable(enabled = true, onClick = onClick),
     )
-        if (description.isNotEmpty()) {
-            Text(
-                text = description,
-                style = MaterialTheme.typography.bodyMedium,
-            )
-        }
-    }
 }
 
 @Composable

feature/search/src/androidTest/java/com/google/samples/apps/nowinandroid/feature/search/SearchScreenTest.kt

@@ -20,11 +20,14 @@ import androidx.activity.ComponentActivity
 import androidx.compose.ui.test.assertCountEquals
 import androidx.compose.ui.test.assertIsDisplayed
 import androidx.compose.ui.test.assertIsFocused
+import androidx.compose.ui.test.hasScrollToNodeAction
 import androidx.compose.ui.test.junit4.createAndroidComposeRule
 import androidx.compose.ui.test.onAllNodesWithContentDescription
+import androidx.compose.ui.test.onFirst
 import androidx.compose.ui.test.onNodeWithContentDescription
 import androidx.compose.ui.test.onNodeWithTag
 import androidx.compose.ui.test.onNodeWithText
+import androidx.compose.ui.test.performScrollToIndex
 import com.google.samples.apps.nowinandroid.core.data.model.RecentSearchQuery
 import com.google.samples.apps.nowinandroid.core.model.data.DarkThemeConfig.DARK
 import com.google.samples.apps.nowinandroid.core.model.data.ThemeBrand.ANDROID
@@ -139,15 +142,18 @@ class SearchScreenTest {
         composeTestRule
             .onNodeWithText(topicsString)
             .assertIsDisplayed()
+
+        val scrollableNode = composeTestRule
+            .onAllNodes(hasScrollToNodeAction())
+            .onFirst()
+
+        followableTopicTestData.forEachIndexed { index, followableTopic ->
+            scrollableNode.performScrollToIndex(index)
+
             composeTestRule
-            .onNodeWithText(followableTopicTestData[0].topic.name)
+                .onNodeWithText(followableTopic.topic.name)
-            .assertIsDisplayed()
-        composeTestRule
-            .onNodeWithText(followableTopicTestData[1].topic.name)
-            .assertIsDisplayed()
-        composeTestRule
-            .onNodeWithText(followableTopicTestData[2].topic.name)
                 .assertIsDisplayed()
+        }
 
         composeTestRule
             .onAllNodesWithContentDescription(followButtonContentDesc)