From 9fb3af5506cf6d3316201846ce8e3d20f845c6d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bo=C5=99ek=20Leikep?= Date: Tue, 31 Oct 2023 13:38:02 +0100 Subject: [PATCH 1/2] Updated visual of SegmentedSwitch. --- .../compose/ui/controls/SegmentedSwitch.kt | 27 +++++++++---------- ...pose.ui_ScreenshotTest_segmentedSwitch.png | 4 +-- ....ui_ScreenshotTest_segmentedSwitch_big.png | 4 +-- ...ui_ScreenshotTest_segmentedSwitch_dark.png | 4 +-- 4 files changed, 19 insertions(+), 20 deletions(-) diff --git a/ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/SegmentedSwitch.kt b/ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/SegmentedSwitch.kt index 9f317066c..e54d5629c 100644 --- a/ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/SegmentedSwitch.kt +++ b/ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/SegmentedSwitch.kt @@ -28,7 +28,6 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.CornerRadius import androidx.compose.ui.geometry.Offset -import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.drawscope.Stroke import androidx.compose.ui.platform.LocalLayoutDirection @@ -140,15 +139,17 @@ public fun SegmentedSwitch( Box( modifier = Modifier.height(IntrinsicSize.Min), ) { - val borderColor = if (error == null) { - OrbitTheme.colors.surface.strong - } else { - OrbitTheme.colors.critical.normal - } + val borderColor by animateColorAsState( + targetValue = when (error == null) { + true -> OrbitTheme.colors.surface.normal + false -> OrbitTheme.colors.critical.normal + }, + label = "SegmentedSwitchBorderColor", + ) Surface( shape = OrbitTheme.shapes.normal, - border = BorderStroke(1.dp, borderColor), + border = BorderStroke(2.dp, borderColor), ) { Row( modifier = Modifier @@ -183,10 +184,7 @@ public fun SegmentedSwitch( CompositionLocalProvider( LocalTextStyle provides OrbitTheme.typography.bodyNormal .copy(textAlign = TextAlign.Center), - LocalContentEmphasis provides when (selectedIndex) { - null, index -> ContentEmphasis.Normal - else -> ContentEmphasis.Minor - }, + LocalContentEmphasis provides ContentEmphasis.Normal, ) { option() } @@ -216,17 +214,18 @@ private fun VerticalDivider( index: Int, selectedIndex: Int?, ) { + val bordersSelected = selectedIndex == index - 1 || selectedIndex == index val color by animateColorAsState( targetValue = when { hasError -> OrbitTheme.colors.critical.normal - selectedIndex == index - 1 || selectedIndex == index -> Color.Unspecified - else -> OrbitTheme.colors.surface.strong + bordersSelected -> OrbitTheme.colors.surface.main.copy(alpha = 0f) + else -> OrbitTheme.colors.surface.normal }, label = "SegmentedSwitchDividerColor", ) Surface( modifier = Modifier - .width(1.dp) + .width(2.dp) .fillMaxHeight(), color = color, content = {}, diff --git a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_segmentedSwitch.png b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_segmentedSwitch.png index 8d87326f6..9e6549b7a 100644 --- a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_segmentedSwitch.png +++ b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_segmentedSwitch.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1be41d859630249dac7f90e9944fa5129c4b8083badce02d6e9bd2dd4903e9af -size 72205 +oid sha256:e7b0ec9044db8eb236d6ec18a86fdea1669f46299ebc191929ee0dae5e9e61d5 +size 71547 diff --git a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_segmentedSwitch_big.png b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_segmentedSwitch_big.png index 9b0bf993e..03b2b8c9a 100644 --- a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_segmentedSwitch_big.png +++ b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_segmentedSwitch_big.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d7ad639fefd505cc6ffde81bd5256d3c6e7a34631cccc09004591505b95ca283 -size 66082 +oid sha256:073b7068c74a33be69371fd29f6ba007f7c487974c1d736ab30e54942dd2fb78 +size 65678 diff --git a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_segmentedSwitch_dark.png b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_segmentedSwitch_dark.png index 30333c3c9..fad97fbec 100644 --- a/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_segmentedSwitch_dark.png +++ b/ui/src/test/snapshots/images/kiwi.orbit.compose.ui_ScreenshotTest_segmentedSwitch_dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0842dc763a7688197573a1afc5e377a5ef45a89a1ee157559e4f2f2a79c44802 -size 72928 +oid sha256:fc6a06a1f0dce36dc3debd20ca77931e16ea64d298813725f4469b970acbf550 +size 72949 From 75eb39aa2e6cb365d2582b6c4e44f0ca1f6b1417 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bo=C5=99ek=20Leikep?= Date: Tue, 31 Oct 2023 14:05:10 +0100 Subject: [PATCH 2/2] On SegmentedSwitch, renamed optionFirst and optionSecond slots to optionOne and optionTwo. --- .../catalog/screens/SegmentedSwitchScreen.kt | 4 ++-- .../compose/ui/controls/SegmentedSwitch.kt | 20 +++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/SegmentedSwitchScreen.kt b/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/SegmentedSwitchScreen.kt index 07057edbc..85300a124 100644 --- a/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/SegmentedSwitchScreen.kt +++ b/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/SegmentedSwitchScreen.kt @@ -54,8 +54,8 @@ private fun SegmentedSwitchScreenInner() { ) { var selectedIndexFirst by rememberSaveable { mutableStateOf(null) } SegmentedSwitch( - optionFirst = { Text("Male") }, - optionSecond = { Text("Female") }, + optionOne = { Text("Male") }, + optionTwo = { Text("Female") }, selectedIndex = selectedIndexFirst, onOptionClick = { index -> selectedIndexFirst = index.takeIf { index != selectedIndexFirst } diff --git a/ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/SegmentedSwitch.kt b/ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/SegmentedSwitch.kt index e54d5629c..1ba997971 100644 --- a/ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/SegmentedSwitch.kt +++ b/ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/SegmentedSwitch.kt @@ -48,7 +48,7 @@ import kiwi.orbit.compose.ui.foundation.LocalTextStyle /** * A segmented switch displaying two options. * - * Renders a segmented switch displaying [optionFirst] and [optionSecond]. + * Renders a segmented switch displaying [optionOne] and [optionTwo]. * Modify via custom passed [modifier]. * An information or error footer can be added to the field. * @@ -57,8 +57,8 @@ import kiwi.orbit.compose.ui.foundation.LocalTextStyle * ``` * var selectedIndex by remember { mutableStateOf(null) } * SegmentedSwitch( - * optionFirst = { Text("Off") }, - * optionSecond = { Text("On") }, + * optionOne = { Text("Off") }, + * optionTwo = { Text("On") }, * selectedIndex = selectedIndex, * onOptionClick = { index -> selectedIndex = index }, * label = { Text("Feature") }, @@ -69,8 +69,8 @@ import kiwi.orbit.compose.ui.foundation.LocalTextStyle @Composable public fun SegmentedSwitch( onOptionClick: (selectedIndex: Int) -> Unit, - optionFirst: @Composable () -> Unit, - optionSecond: @Composable () -> Unit, + optionOne: @Composable () -> Unit, + optionTwo: @Composable () -> Unit, selectedIndex: Int?, modifier: Modifier = Modifier, label: @Composable () -> Unit = {}, @@ -79,7 +79,7 @@ public fun SegmentedSwitch( ) { SegmentedSwitch( onOptionClick = onOptionClick, - options = listOf(optionFirst, optionSecond), + options = listOf(optionOne, optionTwo), selectedIndex = selectedIndex, modifier = modifier, label = label, @@ -287,8 +287,8 @@ internal fun SegmentedSwitchPreview() { private fun SegmentedSwitchUnselectedPreview() { var selectedIndex by remember { mutableStateOf(null) } SegmentedSwitch( - optionFirst = { Text("Male") }, - optionSecond = { Text("Female") }, + optionOne = { Text("Male") }, + optionTwo = { Text("Female") }, selectedIndex = selectedIndex, onOptionClick = { index -> selectedIndex = index }, label = { Text("Gender") }, @@ -299,8 +299,8 @@ private fun SegmentedSwitchUnselectedPreview() { private fun SegmentedSwitchSelectedPreview() { var selectedIndex by remember { mutableStateOf(0) } SegmentedSwitch( - optionFirst = { Text("Male") }, - optionSecond = { Text("Female") }, + optionOne = { Text("Male") }, + optionTwo = { Text("Female") }, selectedIndex = selectedIndex, onOptionClick = { index -> selectedIndex = index }, label = { Text("Gender") },