update Collapse visual

- move chevron to the right
- proper text style
- whole header clickable

docs/03-components/07-interaction/collapse.mdx

@@ -23,7 +23,7 @@ fun Example() {
         expanded = expanded,
         onExpandClick = { expanded = it },
         title = {
-            Text(text = "This the title")
+            Text(text = "Collapse title")
         },
         content = {
             Text(text = "This is the collapsible content")
@@ -43,7 +43,7 @@ fun Example() {
         expanded = expanded,
         onExpandClick = { expanded = it },
         title = {
-            Text(text = "This the title")
+            Text(text = "Collapse title")
         },
         content = {
             Text(text = "This is the collapsible content")
@@ -64,7 +64,7 @@ composeTestRule.setContent {
         expanded = expanded,
         onExpandClick = { expanded = it },
         title = {
-            Text(text = "This the title", modifier = Modifier.testTag("title"))
+            Text(text = "Collapse title", modifier = Modifier.testTag("title"))
         },
         content = {
             Text(text = "This is the collapsible content", modifier = Modifier.testTag("content"))
@@ -73,7 +73,7 @@ composeTestRule.setContent {
     )
 }
 
-composeTestRule.onNodeWithTag("title").assertIsDisplayed()
+composeTestRule.onNodeWithTag("title", useUnmergedTree = true).assertIsDisplayed()
 composeTestRule.onNodeWithTag("content").assertDoesNotExist()
 
 composeTestRule.onNodeWithTag("collapse").performSemanticsAction(SemanticsActions.Expand)

ui/src/main/java/kiwi/orbit/compose/ui/controls/Collapse.kt

@@ -2,14 +2,18 @@ package kiwi.orbit.compose.ui.controls
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
+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.padding
 import androidx.compose.material3.Divider
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
@@ -20,8 +24,10 @@ import androidx.compose.ui.semantics.expand
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
 import kiwi.orbit.compose.icons.Icons
+import kiwi.orbit.compose.ui.OrbitTheme
 import kiwi.orbit.compose.ui.controls.internal.OrbitPreviews
 import kiwi.orbit.compose.ui.controls.internal.Preview
+import kiwi.orbit.compose.ui.foundation.ProvideMergedTextStyle
 
 /**
  * Hides long or complex information under a block that can be hidden.
@@ -44,6 +50,7 @@ public fun Collapse(
     title: @Composable () -> Unit,
     content: @Composable () -> Unit,
     modifier: Modifier = Modifier,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     withSeparator: Boolean = true,
 ) {
     Column(
@@ -68,17 +75,33 @@ public fun Collapse(
         verticalArrangement = Arrangement.spacedBy(8.dp),
     ) {
         Row(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier
+                .clickable(
+                    enabled = true,
+                    onClick = { onExpandChange(!expanded) },
+                    indication = null,
+                    interactionSource = interactionSource,
+                )
+                .padding(vertical = 12.dp),
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.SpaceBetween,
         ) {
-            title()
-            CollapseArrow(expanded = expanded, onClick = { onExpandChange(!expanded) })
+            ProvideMergedTextStyle(OrbitTheme.typography.bodyNormalMedium) {
+                Box(Modifier.weight(1f)) {
+                    title()
+                }
+            }
+            CollapseArrow(
+                expanded = expanded,
+                interactionSource = interactionSource,
+                onClick = { onExpandChange(!expanded) },
+            )
         }
-        AnimatedVisibility(visible = expanded, modifier = Modifier.fillMaxWidth()) {
-            content()
+        AnimatedVisibility(visible = expanded) {
+            ProvideMergedTextStyle(OrbitTheme.typography.bodyNormal) {
+                content()
+            }
         }
-
         if (withSeparator) {
             Divider()
         }
@@ -88,16 +111,17 @@ public fun Collapse(
 @Composable
 private fun CollapseArrow(
     expanded: Boolean,
+    interactionSource: MutableInteractionSource,
     onClick: () -> Unit,
 ) {
     val arrowRotationDegree by animateFloatAsState(
         targetValue = if (expanded) 180f else 0f,
     )
-
     IconButton(
         onClick = onClick,
-        modifier = Modifier
-            .rotate(arrowRotationDegree),
+        modifier = Modifier.rotate(arrowRotationDegree),
+        interactionSource = interactionSource,
+        minimumInteractiveComponentEnforcement = false,
     ) {
         Icon(
             painter = Icons.ChevronDown,
@@ -115,7 +139,7 @@ internal fun CollapsePreview() {
             expanded = expanded,
             onExpandChange = { expanded = it },
             title = {
-                Text(text = "This the title")
+                Text(text = "Collapse title")
             },
             content = {
                 Text(text = "This is the collapsible content")

ui/src/test/kotlin/kiwi/orbit/compose/ui/controls/CollapseTest.kt

@@ -29,7 +29,7 @@ internal class CollapseTest {
                 expanded = expanded,
                 onExpandChange = { expanded = it },
                 title = {
-                    Text(text = "This the title", modifier = Modifier.testTag("title"))
+                    Text(text = "Collapse title", modifier = Modifier.testTag("title"))
                 },
                 content = {
                     Text(text = "This is the collapsible content", modifier = Modifier.testTag("content"))
@@ -38,7 +38,7 @@ internal class CollapseTest {
             )
         }
 
-        composeTestRule.onNodeWithTag("title").assertIsDisplayed()
+        composeTestRule.onNodeWithTag("title", useUnmergedTree = true).assertIsDisplayed()
         composeTestRule.onNodeWithTag("content").assertDoesNotExist()
 
         composeTestRule.onNodeWithTag("collapse").performSemanticsAction(SemanticsActions.Expand)