From f921257b078be9da27cad3c23b96cdb7e0c78acc Mon Sep 17 00:00:00 2001 From: Jan Skrasek Date: Wed, 29 Mar 2023 11:21:14 +0200 Subject: [PATCH] update Collapse visual - move chevron to the right - proper text style - whole header clickable --- .../03-components/07-interaction/collapse.mdx | 8 ++-- .../orbit/compose/ui/controls/Collapse.kt | 46 ++++++++++++++----- .../orbit/compose/ui/controls/CollapseTest.kt | 4 +- ...bit.compose.ui_ScreenshotTest_collapse.png | 4 +- ...compose.ui_ScreenshotTest_collapse_big.png | 4 +- ...ompose.ui_ScreenshotTest_collapse_dark.png | 4 +- 6 files changed, 47 insertions(+), 23 deletions(-) diff --git a/docs/03-components/07-interaction/collapse.mdx b/docs/03-components/07-interaction/collapse.mdx index b87396be5..658bda869 100644 --- a/docs/03-components/07-interaction/collapse.mdx +++ b/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) diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/controls/Collapse.kt b/ui/src/main/java/kiwi/orbit/compose/ui/controls/Collapse.kt index 6c47250c5..57f7ff13d 100644 --- a/ui/src/main/java/kiwi/orbit/compose/ui/controls/Collapse.kt +++ b/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") diff --git a/ui/src/test/kotlin/kiwi/orbit/compose/ui/controls/CollapseTest.kt b/ui/src/test/kotlin/kiwi/orbit/compose/ui/controls/CollapseTest.kt index bd155b449..7e9367dcf 100644 --- a/ui/src/test/kotlin/kiwi/orbit/compose/ui/controls/CollapseTest.kt +++ b/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) diff --git a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_collapse.png b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_collapse.png index 1275a8224..59fac7d9f 100644 --- a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_collapse.png +++ b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_collapse.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:999bb53a906c806a48e50e8735d370a9561ee305b65c6caeb6f9903e6c778860 -size 19468 +oid sha256:b28a9a7006eb6f3f2747ec4706292b9f8cb32c2860e031bb3063c896af1e9818 +size 19724 diff --git a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_collapse_big.png b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_collapse_big.png index ea602411f..30b653f1f 100644 --- a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_collapse_big.png +++ b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_collapse_big.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:02651701bd3f5238d9b8636d9d9f72fa53506e83478ce223db475ffa9ff47e8c -size 28675 +oid sha256:5176d2250d559789ef14002d4f944eb8150738f2de2473e4d55e3066dc2f4c78 +size 30419 diff --git a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_collapse_dark.png b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_collapse_dark.png index 740f51220..2670bd6b2 100644 --- a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_collapse_dark.png +++ b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_collapse_dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a3d58152887383040d5e214ef363d61d3f05802286805de9f23b3166c0c1b320 -size 20160 +oid sha256:4301268d1125989096fb8445ea21286c55538b9d422751a3ce963c4c57589ad1 +size 20276