Merge pull request #5526 from element-hq/feature/bma/chipIteration

Let room filters follow the design.
2025-10-13 16:58:14 +02:00 · 2025-10-13 16:58:14 +02:00 · 17fe2dd455
commit 17fe2dd455
parent d441c43993 2a0e1133bb
34 changed files with 93 additions and 71 deletions
--- a/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/filters/RoomListFiltersView.kt
+++ b/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/filters/RoomListFiltersView.kt
@ -19,6 +19,7 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.CircleShape
@ -34,6 +35,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
@ -48,6 +50,9 @@ import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.testtags.TestTags
 import io.element.android.libraries.testtags.testTag

+/**
+ * Ref: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=2191-606
+ */
@Composable
 fun RoomListFiltersView(
    state: RoomListFiltersState,
@ -143,9 +148,12 @@ private fun RoomListClearFiltersButton(
            .clip(CircleShape)
            .background(ElementTheme.colors.bgActionPrimaryRest)
            .clickable(onClick = onClick)
+            .padding(4.dp)
    ) {
        Icon(
-            modifier = Modifier.align(Alignment.Center),
+            modifier = Modifier
+                .align(Alignment.Center)
+                .size(16.dp),
            imageVector = CompoundIcons.Close(),
            tint = ElementTheme.colors.iconOnSolidPrimary,
            contentDescription = stringResource(id = R.string.screen_roomlist_clear_filters),
@ -170,21 +178,34 @@ private fun RoomListFilterView(
        animationSpec = spring(stiffness = Spring.StiffnessMediumLow),
        label = "chip text colour",
    )
+    val borderColour = animateColorAsState(
+        targetValue = if (selected) Color.Transparent else ElementTheme.colors.borderInteractiveSecondary,
+        animationSpec = spring(stiffness = Spring.StiffnessMediumLow),
+        label = "chip border colour",
+    )

    FilterChip(
        selected = selected,
        onClick = { onClick(roomListFilter) },
-        modifier = modifier.height(36.dp),
+        modifier = modifier.height(32.dp),
        shape = CircleShape,
        colors = FilterChipDefaults.filterChipColors(
            containerColor = background.value,
            selectedContainerColor = background.value,
            labelColor = textColour.value,
-            selectedLabelColor = textColour.value
+            selectedLabelColor = textColour.value,
        ),
        label = {
-            Text(text = stringResource(id = roomListFilter.stringResource))
-        }
+            Text(
+                text = stringResource(id = roomListFilter.stringResource),
+                style = ElementTheme.typography.fontBodyMdRegular,
+            )
+        },
+        border = FilterChipDefaults.filterChipBorder(
+            enabled = true,
+            selected = selected,
+            borderColor = borderColour.value,
+        ),
    )
 }

@ -192,6 +213,7 @@ private fun RoomListFilterView(
@Composable
 internal fun RoomListFiltersViewPreview(@PreviewParameter(RoomListFiltersStateProvider::class) state: RoomListFiltersState) = ElementPreview {
    RoomListFiltersView(
+        modifier = Modifier.padding(vertical = 4.dp),
        state = state,
    )
 }
--- a/tests/uitests/src/test/snapshots/images/features.home.impl.components_DefaultRoomListTopBarMultiAccount_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl.components_DefaultRoomListTopBarMultiAccount_Day_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:03c8caa1e34ae21b40e3caf4ba811a9d4d46ee5ec2d22d6e0297c527e8311297
-size 26167
+oid sha256:b9595d23fae3fb23bf1a893744c3e28f99b163091d374dabd65d24dbde69af6c
+size 25617
--- a/tests/uitests/src/test/snapshots/images/features.home.impl.components_DefaultRoomListTopBarMultiAccount_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl.components_DefaultRoomListTopBarMultiAccount_Night_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d3e9cc7b076dfba2e977bd9b4b07a556d27f7587e81f199ee5424c39f4683f79
-size 23673
+oid sha256:fd357c3f6b143b3dcc4f8a23cd0c8e34b801709630a2c31406b4563e928f64ed
+size 22757
--- a/tests/uitests/src/test/snapshots/images/features.home.impl.components_DefaultRoomListTopBarWithIndicator_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl.components_DefaultRoomListTopBarWithIndicator_Day_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2b850d625de1abbe020e1aade5f854af6d91f543ff6f46d859cd6c37db350e96
-size 26508
+oid sha256:b9b7f028749ba909fbeb0c8c2a81ccc6337b3f9c7a8af20e5492c938b1ac8d7a
+size 25962
--- a/tests/uitests/src/test/snapshots/images/features.home.impl.components_DefaultRoomListTopBarWithIndicator_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl.components_DefaultRoomListTopBarWithIndicator_Night_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3420f8cb3bd5d33d5cae776e57cfcaf496d2e0d26037029380e9171bad2ea177
-size 24034
+oid sha256:13b6b3cd99a2561e5116c5dd9950fdb1db61cf3a5a83014c67900bc455f0b53c
+size 23171
--- a/tests/uitests/src/test/snapshots/images/features.home.impl.components_DefaultRoomListTopBar_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl.components_DefaultRoomListTopBar_Day_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:efb9a3d83c703a3222b25a4f5f577a29ceafb749afa8e8901050590beb164bc3
-size 26258
+oid sha256:9c8add737c25478dc3be8fc638661fb03be922702136d4ae83bfcfca4287e5c1
+size 25709
--- a/tests/uitests/src/test/snapshots/images/features.home.impl.components_DefaultRoomListTopBar_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl.components_DefaultRoomListTopBar_Night_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ebfd6e53dde99f12ce1817a15f6f6112c478095eb3a4d3c8ec4397a8118d389b
-size 23736
+oid sha256:9b330c24f0a118665aa3f6eb68b2573deed4167cd3ddbbbe08eed8ddc27c639d
+size 22814
--- a/tests/uitests/src/test/snapshots/images/features.home.impl.filters_RoomListFiltersView_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl.filters_RoomListFiltersView_Day_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:23e4d2f712ba17e2c7e015c3b5c31992c16abd0edb02b54bfb63724c4b62792a
-size 14030
+oid sha256:630596148bba4f160f99b691885a7b3387110f875f92071f20f9f02836009252
+size 13393
--- a/tests/uitests/src/test/snapshots/images/features.home.impl.filters_RoomListFiltersView_Day_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl.filters_RoomListFiltersView_Day_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1d9f89148d3d67c91d8375088e3774dfa01e9d90acc9334725baf7c8aa2ae5fd
-size 12195
+oid sha256:3cfd337f819250d81d93a10d62f857469f4b32de8ea9c92ad317b14dfd623c11
+size 12108
--- a/tests/uitests/src/test/snapshots/images/features.home.impl.filters_RoomListFiltersView_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl.filters_RoomListFiltersView_Night_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8557515b328ac70ba0c0a7336990a8496c7c110fd71d22a2c347d2f59b4fb188
-size 13521
+oid sha256:34eb5ac6367a76db546eeac3ac7b197eb9cb153e8b6186af5c3839a5ffeab6b5
+size 12634
--- a/tests/uitests/src/test/snapshots/images/features.home.impl.filters_RoomListFiltersView_Night_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl.filters_RoomListFiltersView_Night_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9aa41ea9aae055f81f29189960e5c9ee7b394b3f2b27c5c8bb59fa5a74737171
-size 11793
+oid sha256:ea1b84b720e246f5f4dff5193f72b32fea3060cc1dfffeaba95ba3cd7c975140
+size 11699
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeViewA11y_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeViewA11y_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b2e52e92c69be9d083d6d55e03a7f2ae2176517ba913bd285903cea9a83fe63c
-size 126094
+oid sha256:b9d9c029f8aa66d921be752b3bd5c70d00aa80b8dc6fed343a4ab7b9be5a187f
+size 125045
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:356b69abbb9e002ec0a83180150fb3a04e8afffbd70e8f20f9592c7af83da4f9
-size 65651
+oid sha256:6a249702f230f3dc0c9ee097fc11496df64c11436680e3f790d1fbf9051c4119
+size 65098
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_13_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_13_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8af9abdb9af652dcd100b0919488852158dcd383e1407d6596409c1c595202eb
-size 88965
+oid sha256:a1e803f9818ffed85454a4d7c02d2b5fa63e9fc6280c521cddfd8253225ed790
+size 89858
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_14_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_14_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:01384a14c49b7e9df154ac56c760e036f050538322c5a0c369e2aa824f28b675
-size 83473
+oid sha256:86eb0a74576e1023a0e79e2c42083efa0ab7e59f57688f431cdb825937106d03
+size 83133
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:38a30f5099d4990e4172ba7f6831ecfec540abf51608ac1f99c46846190968f3
-size 67672
+oid sha256:bc9668d1caef19e9a4fe76ff4ed0eab8107aa493c3adcaef7ebbbb878925ac62
+size 66408
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_2_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_2_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:356b69abbb9e002ec0a83180150fb3a04e8afffbd70e8f20f9592c7af83da4f9
-size 65651
+oid sha256:6a249702f230f3dc0c9ee097fc11496df64c11436680e3f790d1fbf9051c4119
+size 65098
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_3_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_3_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:af895f2282acdb069b511110514a258d0579c92280e0c1ea51245b06e903080f
-size 62769
+oid sha256:3df1fc44ef9b4c71349aefaa06a09583b25b5baa2765c572fde2579d543c7dc8
+size 62134
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_5_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_5_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:356b69abbb9e002ec0a83180150fb3a04e8afffbd70e8f20f9592c7af83da4f9
-size 65651
+oid sha256:6a249702f230f3dc0c9ee097fc11496df64c11436680e3f790d1fbf9051c4119
+size 65098
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_6_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_6_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c9a60d84f39fc3ef9d2f195bba774eec69029a65e362b4d626fdf7777ef87d4a
-size 53308
+oid sha256:e609fcb03b38d2265b91f6cccbd91092b050c34f979116a20e1d2f72c9fb7d9c
+size 52933
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_7_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_7_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0a4e4134b94e49fa3d13869d61b9a5d8636532ab24ede12b7ebb8ee39fd2e86c
-size 53119
+oid sha256:58536ac6068bce6399048fb5a082791ce4d2d74dc9e39d96e6483c818067a3b1
+size 52741
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_8_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_8_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6956c433583232ff3ce3b3801d93bd2f6887722238ae909136aa59e3123be368
-size 51330
+oid sha256:a5eb9e2d9245b31509ecd22351cc11b6d5fe27dcad76ab1eab36d692cf0fed2b
+size 50942
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_9_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_9_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:988b2f85ee11077fdf3e1640010ede4f2af05fa22c000ab01560082f4a3c1cde
-size 83310
+oid sha256:a6c524b3c587eea43d5d753757fe42434ee751709559851ec9e0ca283c6f2236
+size 82960
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c45c3c1366669137741bad749c2a7bdd7e17df74f791c7a1e1328ce33c97aea8
-size 61105
+oid sha256:ea48147772f8fa99aca0345a5a98f8d2ea6fd26793edab55f7d920a7e3f56414
+size 60213
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_13_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_13_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c5fe9b4c81283662333aa5660f0c3f07e6209107ad591154841e2d6b4d55677e
-size 83852
+oid sha256:3911b9f33b862f1fa47ac80420f1ded92d8c7c304a0b0af8c7132033eca63da1
+size 84486
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_14_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_14_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4c6e83649d247f1ce450600a4875487079910810196a4f6e0e82703bfb04223b
-size 78585
+oid sha256:58917137b3500639edcd3308f665cb9111450bf0c34fe07880076f43725ae145
+size 78202
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6917011813550fb50229e6d8326110aa1eccc7b2891f13b26ef29afd79e72916
-size 63088
+oid sha256:5bfc8aff1305c39b400c95831a6b07f00c376c328b3ad2281cf4b6b74970f67c
+size 61538
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_2_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_2_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c45c3c1366669137741bad749c2a7bdd7e17df74f791c7a1e1328ce33c97aea8
-size 61105
+oid sha256:ea48147772f8fa99aca0345a5a98f8d2ea6fd26793edab55f7d920a7e3f56414
+size 60213
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_3_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_3_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1b65c77c82e2a175dc73c87b119a0defe9e0d44b71e6f6abf5f39a1edd0f6a82
-size 58825
+oid sha256:494864f07f4ca2ef426f611842f580fa6d2c5d04c61385acd649e50ee49e9405
+size 58119
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_5_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_5_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c45c3c1366669137741bad749c2a7bdd7e17df74f791c7a1e1328ce33c97aea8
-size 61105
+oid sha256:ea48147772f8fa99aca0345a5a98f8d2ea6fd26793edab55f7d920a7e3f56414
+size 60213
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_6_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_6_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4484aa90c69fb2b8e15a0ab79ec6d8268dc1f9c53f60f483aa9da971b03d0614
-size 50523
+oid sha256:0493d1a09ba7d41e0ef0b66ef4068528af281cfaa9f7187d64d17316ca97d2fd
+size 50038
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_7_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_7_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3ede57bbda30891887e319e3021e93b4ace769fe4ece5881a11def1007691ecf
-size 50366
+oid sha256:4215bf2ac9870ec1d6f3832adc8e8bfd2ce4d1ab2c1ef5584a0a934e880969be
+size 49887
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_8_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_8_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fc60a51acd5b968a67901550ab52df73a8ac9d99609a3a09361b19fe1c25d767
-size 48574
+oid sha256:9977db4bcc333f7fa0f662e8cc73170fe96a90bcb545f5471cb6e107f159f943
+size 48083
--- a/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_9_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Night_9_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f3cd78e49e05786a2063cf41faaade789fa3e7da2b1ac693e1f9bf6ad606745d
-size 78531
+oid sha256:21cbfa635df606c3fa17345a1ad1055e47f2265b059cb10580dfc464c694870e
+size 78085