change (room avatar) : introduce TextAvatar component

2025-06-13 18:12:57 +02:00
parent c2f0899003
commit 08bbd7219c
1 changed files with 76 additions and 0 deletions
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/TextAvatar.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/TextAvatar.kt
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.libraries.designsystem.components.avatar
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.requiredSize
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import io.element.android.compound.theme.AvatarColors
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewGroup
+import io.element.android.libraries.designsystem.text.toSp
+import io.element.android.libraries.designsystem.theme.components.Text
+
+@Composable
+internal fun TextAvatar(
+    text: String,
+    size: Dp,
+    colors: AvatarColors,
+    contentDescription: String?,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier
+            .requiredSize(size)
+            .clip(CircleShape)
+            .background(color = colors.background)
+    ) {
+        val fontSize = size.toSp() / 2
+        val originalFont = ElementTheme.typography.fontHeadingMdBold
+        val ratio = fontSize.value / originalFont.fontSize.value
+        val lineHeight = originalFont.lineHeight * ratio
+        Text(
+            modifier = Modifier
+                .clearAndSetSemantics {
+                    contentDescription?.let {
+                        this.contentDescription = it
+                    }
+                }
+                .align(Alignment.Center),
+            text = text,
+            style = originalFont.copy(fontSize = fontSize, lineHeight = lineHeight, letterSpacing = 0.sp),
+            color = colors.foreground,
+        )
+    }
+}
+
+@Preview(group = PreviewGroup.Avatars)
+@Composable
+internal fun TextAvatarPreview() = ElementPreview {
+        TextAvatar(
+            text = "AB",
+            size = 40.dp,
+            colors = AvatarColors(
+                background = ElementTheme.colors.bgSubtlePrimary,
+                foreground = ElementTheme.colors.iconPrimary,
+            ),
+            contentDescription = null,
+        )
+    }