Sulkta-OSS/element-x-ada
3
0
Fork 0
Code Issues 1 Pull requests 10 Projects Releases Packages Wiki Activity Actions

Add Modifier and preview for RoomPreviewMembersCountMolecule. Also increase end padding to ensure that rendering is correct for big numbers.

Browse source
This commit is contained in:
Benoit Marty 2024-04-18 01:27:33 +02:00
parent 7eae4d28ef
commit 8b7cc40c29
1 changed files with 22 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

25
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/RoomPreviewMembersCountMolecule.kt
View file

@ -18,6 +18,7 @@ package io.element.android.libraries.designsystem.atomic.molecules
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.layout.widthIn
@ -28,16 +29,21 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text import io.element.android.libraries.designsystem.theme.components.Text
@Composable @Composable
fun RoomPreviewMembersCountMolecule(memberCount: Long) { fun RoomPreviewMembersCountMolecule(
memberCount: Long,
modifier: Modifier = Modifier,
) {
Row( Row(
modifier = Modifier modifier = modifier
.background(color = ElementTheme.colors.bgSubtleSecondary, shape = CircleShape) .background(color = ElementTheme.colors.bgSubtleSecondary, shape = CircleShape)
.widthIn(min = 48.dp) .widthIn(min = 48.dp)
.padding(all = 2.dp), .padding(start = 2.dp, end = 6.dp, top = 2.dp, bottom = 2.dp),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(4.dp) horizontalArrangement = Arrangement.spacedBy(4.dp)
) { ) {
@ -53,3 +59,16 @@ fun RoomPreviewMembersCountMolecule(memberCount: Long) {
) )
} }
} }
@PreviewsDayNight
@Composable
internal fun RoomPreviewMembersCountMoleculePreview() = ElementPreview {
Column(
modifier = Modifier.padding(8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
RoomPreviewMembersCountMolecule(memberCount = 1)
RoomPreviewMembersCountMolecule(memberCount = 888)
RoomPreviewMembersCountMolecule(memberCount = 123456)
}
}