Upgrade compose-material3 to `1.2.0-alpha05` version (#1011)

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

Also upgrade compileSdk to 34.

build.gradle.kts

@@ -1,4 +1,6 @@
+import com.google.devtools.ksp.gradle.KspTask
 import kotlinx.kover.api.KoverTaskExtension
+import org.apache.tools.ant.taskdefs.optional.ReplaceRegExp
 import org.jetbrains.kotlin.cli.common.toBooleanLenient
 
 buildscript {
@@ -343,3 +345,21 @@ subprojects {
     tasks.findByName("recordPaparazziDebug")?.dependsOn(removeOldScreenshotsTask)
     tasks.findByName("recordPaparazziRelease")?.dependsOn(removeOldScreenshotsTask)
 }
+
+// Workaround for https://github.com/airbnb/Showkase/issues/335
+subprojects {
+    tasks.withType<KspTask>() {
+        doLast {
+            fileTree(buildDir).apply { include("**/*ShowkaseExtension*.kt") }.files.forEach { file ->
+                ReplaceRegExp().apply {
+                    setMatch("public fun Showkase.getMetadata")
+                    setReplace("@Suppress(\"DEPRECATION\") public fun Showkase.getMetadata")
+                    setFlags("g")
+                    setByLine(true)
+                    setFile(file)
+                    execute()
+                }
+            }
+        }
+    }
+}

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/components/SearchMultipleUsersResultItem.kt

@@ -22,7 +22,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
-import io.element.android.libraries.designsystem.theme.components.Divider
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.matrix.ui.components.CheckableMatrixUserRow
 import io.element.android.libraries.matrix.ui.components.CheckableUnresolvedUserRow
 import io.element.android.libraries.matrix.ui.components.aMatrixUser
@@ -63,11 +63,11 @@ internal fun SearchMultipleUsersResultItemPreview() = ElementThemedPreview { Con
 private fun ContentToPreview() {
     Column {
         SearchMultipleUsersResultItem(searchResult = UserSearchResult(aMatrixUser(), isUnresolved = false), isUserSelected = false)
-        Divider()
+        HorizontalDivider()
         SearchMultipleUsersResultItem(searchResult = UserSearchResult(aMatrixUser(), isUnresolved = false), isUserSelected = true)
-        Divider()
+        HorizontalDivider()
         SearchMultipleUsersResultItem(searchResult = UserSearchResult(aMatrixUser(), isUnresolved = true), isUserSelected = false)
-        Divider()
+        HorizontalDivider()
         SearchMultipleUsersResultItem(searchResult = UserSearchResult(aMatrixUser(), isUnresolved = true), isUserSelected = true)
     }
 }

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/components/SearchSingleUserResultItem.kt

@@ -23,7 +23,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
-import io.element.android.libraries.designsystem.theme.components.Divider
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.matrix.ui.components.MatrixUserRow
 import io.element.android.libraries.matrix.ui.components.UnresolvedUserRow
 import io.element.android.libraries.matrix.ui.components.aMatrixUser
@@ -59,7 +59,7 @@ internal fun SearchSingleUserResultItemPreview() = ElementThemedPreview { Conten
 private fun ContentToPreview() {
     Column {
         SearchSingleUserResultItem(searchResult = UserSearchResult(aMatrixUser(), isUnresolved = false))
-        Divider()
+        HorizontalDivider()
         SearchSingleUserResultItem(searchResult = UserSearchResult(aMatrixUser(), isUnresolved = true))
     }
 }

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/components/SearchUserBar.kt

@@ -35,7 +35,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.theme.components.Divider
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.SearchBar
 import io.element.android.libraries.designsystem.theme.components.SearchBarResultState
 import io.element.android.libraries.matrix.api.user.MatrixUser
@@ -117,7 +117,7 @@ fun SearchUserBar(
                             }
                         )
                         if (index < users.lastIndex) {
-                            Divider()
+                            HorizontalDivider()
                         }
                     }
                 } else {
@@ -128,7 +128,7 @@ fun SearchUserBar(
                             onClick = { onUserSelected(searchResult.matrixUser) }
                         )
                         if (index < users.lastIndex) {
-                            Divider()
+                            HorizontalDivider()
                         }
                     }
                 }

features/invitelist/impl/src/main/kotlin/io/element/android/features/invitelist/impl/InviteListView.kt

@@ -43,7 +43,7 @@ import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.aliasScreenTitle
-import io.element.android.libraries.designsystem.theme.components.Divider
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
@@ -161,7 +161,7 @@ fun InviteListContent(
                             )
 
                             if (index != state.inviteList.lastIndex) {
-                                Divider()
+                                HorizontalDivider()
                             }
                         }
                     }

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/accountprovider/AccountProviderView.kt

@@ -38,7 +38,7 @@ import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtom
 import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtomSize
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.components.Divider
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.theme.ElementTheme
@@ -55,7 +55,7 @@ fun AccountProviderView(
     Column(modifier = modifier
         .fillMaxWidth()
         .clickable { onClick() }) {
-        Divider()
+        HorizontalDivider()
         Column(
             modifier = Modifier
                 .fillMaxWidth()

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt

@@ -74,7 +74,7 @@ import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.DayNightPreviews
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.text.toSp
-import io.element.android.libraries.designsystem.theme.components.Divider
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
 import io.element.android.libraries.designsystem.theme.components.hide
@@ -177,7 +177,7 @@ private fun SheetContent(
                             .padding(horizontal = 16.dp)
                         )
                         Spacer(modifier = Modifier.height(14.dp))
-                        Divider()
+                        HorizontalDivider()
                     }
                 }
                 if (state.displayEmojiReactions) {
@@ -188,7 +188,7 @@ private fun SheetContent(
                             onCustomReactionClicked = onCustomReactionClicked,
                             modifier = Modifier.fillMaxWidth(),
                         )
-                        Divider()
+                        HorizontalDivider()
                     }
                 }
                 items(

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/forward/ForwardMessagesView.kt

@@ -52,7 +52,7 @@ import io.element.android.libraries.designsystem.components.dialogs.ErrorDialogD
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.aliasScreenTitle
-import io.element.android.libraries.designsystem.theme.components.Divider
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.RadioButton
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.SearchBar
@@ -161,7 +161,7 @@ fun ForwardMessagesView(
                                     state.eventSink(ForwardMessagesEvents.SetSelectedRoom(roomSummary))
                                 }
                             )
-                            Divider(modifier = Modifier.fillMaxWidth())
+                            HorizontalDivider(modifier = Modifier.fillMaxWidth())
                         }
                     }
                 }
@@ -186,7 +186,7 @@ fun ForwardMessagesView(
                                         state.eventSink(ForwardMessagesEvents.SetSelectedRoom(roomSummary))
                                     }
                                 )
-                                Divider(modifier = Modifier.fillMaxWidth())
+                                HorizontalDivider(modifier = Modifier.fillMaxWidth())
                             }
                         }
                     }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/EmojiPicker.kt

@@ -66,7 +66,7 @@ fun EmojiPicker(
 
     val emojiProvider = remember { GoogleEmojiProvider() }
     val categories = remember { emojiProvider.categories }
-    val pagerState = rememberPagerState()
+    val pagerState = rememberPagerState(pageCount = { emojiProvider.categories.size })
     Column(modifier) {
         TabRow(
             selectedTabIndex = pagerState.currentPage,
@@ -88,7 +88,6 @@ fun EmojiPicker(
         }
 
         HorizontalPager(
-            pageCount = categories.size,
             state = pagerState,
             modifier = Modifier.fillMaxWidth(),
         ) { index ->

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessageEventBubble.kt

@@ -28,6 +28,7 @@ import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -152,7 +153,7 @@ private fun ContentToPreview(state: BubbleState) {
     ) {
         MessageEventBubble(
             state = state,
-            interactionSource = MutableInteractionSource(),
+            interactionSource = remember { MutableInteractionSource() },
         ) {
             // Render the state as a text to better understand the previews
             Box(

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessageStateEventContainer.kt

@@ -26,6 +26,7 @@ import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
@@ -81,13 +82,13 @@ private fun ContentToPreview() {
     Column {
         MessageStateEventContainer(
             isHighlighted = false,
-            interactionSource = MutableInteractionSource(),
+            interactionSource = remember { MutableInteractionSource() },
         ) {
             Spacer(modifier = Modifier.size(width = 120.dp, height = 32.dp))
         }
         MessageStateEventContainer(
             isHighlighted = true,
-            interactionSource = MutableInteractionSource(),
+            interactionSource = remember { MutableInteractionSource() },
         ) {
             Spacer(modifier = Modifier.size(width = 120.dp, height = 32.dp))
         }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineEventTimestampView.kt

@@ -29,6 +29,7 @@ import androidx.compose.material.icons.filled.Error
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -63,7 +64,7 @@ fun TimelineEventTimestampView(
             onClick = onClick,
             onLongClick = onLongClick,
             indication = rememberRipple(bounded = false),
-            interactionSource = MutableInteractionSource()
+            interactionSource = remember { MutableInteractionSource() }
         )
     } else {
         Modifier

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt

@@ -125,7 +125,7 @@ internal fun TimelineItemTextViewDarkPreview(@PreviewParameter(TimelineItemTextB
 fun ContentToPreview(content: TimelineItemTextBasedContent) {
     TimelineItemTextView(
         content = content,
-        interactionSource = MutableInteractionSource(),
+        interactionSource = remember { MutableInteractionSource() },
         extraPadding = ExtraPadding(nbChars = 8),
     )
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/html/HtmlDocument.kt

@@ -29,6 +29,7 @@ import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.Offset
@@ -599,5 +600,5 @@ internal fun HtmlDocumentDarkPreview(@PreviewParameter(DocumentProvider::class)
 
 @Composable
 private fun ContentToPreview(document: Document) {
-    HtmlDocument(document, MutableInteractionSource())
+    HtmlDocument(document, remember { MutableInteractionSource() })
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/reactionsummary/ReactionSummaryView.kt

@@ -107,7 +107,7 @@ private fun SheetContent(
             summary.reactions.indexOfFirst { it.key == selectedReactionKey }
         }
     }
-    val pagerState = rememberPagerState(initialPage = selectedReactionIndex)
+    val pagerState = rememberPagerState(initialPage = selectedReactionIndex, pageCount = { summary.reactions.size })
     val reactionListState = rememberLazyListState()
 
     LaunchedEffect(pagerState.currentPage) {
@@ -123,7 +123,8 @@ private fun SheetContent(
             .fillMaxWidth()
             .fillMaxHeight()
     ) {
-        LazyRow(state = reactionListState,
+        LazyRow(
+            state = reactionListState,
             horizontalArrangement = Arrangement.spacedBy(8.dp),
             contentPadding = PaddingValues(start = 12.dp, end = 12.dp, bottom = 12.dp)
         ) {
@@ -140,7 +141,7 @@ private fun SheetContent(
                 )
             }
         }
-        HorizontalPager(state = pagerState, pageCount = summary.reactions.size) { page ->
+        HorizontalPager(state = pagerState) { page ->
             LazyColumn(modifier = Modifier.fillMaxHeight()) {
                 items(summary.reactions[page].senders) { sender ->
 

features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/root/PreferencesRootView.kt

@@ -37,7 +37,7 @@ import io.element.android.libraries.designsystem.components.preferences.Preferen
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.preview.LargeHeightPreview
-import io.element.android.libraries.designsystem.theme.components.Divider
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.utils.SnackbarHost
 import io.element.android.libraries.designsystem.utils.rememberSnackbarHostState
@@ -73,7 +73,7 @@ fun PreferencesRootView(
                 icon = Icons.Outlined.VerifiedUser,
                 onClick = onVerifyClicked,
             )
-            Divider()
+            HorizontalDivider()
         }
         if (state.showAnalyticsSettings) {
             PreferenceText(
@@ -95,7 +95,7 @@ fun PreferencesRootView(
         if (state.showDeveloperSettings) {
             DeveloperPreferencesView(onOpenDeveloperSettings)
         }
-        Divider()
+        HorizontalDivider()
         LogoutPreferenceView(
             state = state.logoutState,
         )

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/invite/RoomInviteMembersView.kt

@@ -38,7 +38,7 @@ import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.aliasScreenTitle
-import io.element.android.libraries.designsystem.theme.components.Divider
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.SearchBar
 import io.element.android.libraries.designsystem.theme.components.SearchBarResultState
@@ -208,7 +208,7 @@ private fun RoomInviteMembersSearchBar(
                     }
 
                     if (index < results.lastIndex) {
-                        Divider()
+                        HorizontalDivider()
                     }
                 }
             }

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListView.kt

@@ -52,7 +52,7 @@ import io.element.android.features.roomlist.impl.model.RoomListRoomSummary
 import io.element.android.features.roomlist.impl.search.RoomListSearchResultView
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.components.Divider
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Scaffold
@@ -207,7 +207,7 @@ fun RoomListContent(
                         onLongClick = onRoomLongClicked,
                     )
                     if (index != state.roomList.lastIndex) {
-                        Divider()
+                        HorizontalDivider()
                     }
                 }
             }

gradle.properties

@@ -56,3 +56,6 @@ android.experimental.enableTestFixtures=true
 
 # Create BuildConfig files as bytecode to avoid Java compilation phase
 android.enableBuildConfigAsBytecode=true
+
+# This should be removed after upgrading to AGP 8.1.0
+android.suppressUnsupportedCompileSdk=34

gradle/libs.versions.toml

@@ -92,6 +92,7 @@ androidx_startup = { module = "androidx.startup:startup-runtime", version.ref =
 androidx_preference = "androidx.preference:preference:1.2.0"
 
 androidx_compose_bom = { group = "androidx.compose", name = "compose-bom", version.ref = "compose_bom" }
+androidx_compose_material3 = "androidx.compose.material3:material3:1.2.0-alpha05"
 
 # Coroutines
 coroutines_core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "coroutines" }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ClickableLinkText.kt

@@ -109,7 +109,7 @@ private fun ContentToPreview() {
         linkAnnotationTag = "",
         onClick = {},
         onLongClick = {},
-        interactionSource = MutableInteractionSource(),
+        interactionSource = remember { MutableInteractionSource() },
     )
 }
 

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt

@@ -31,6 +31,7 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import coil.compose.AsyncImage
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
@@ -91,10 +92,14 @@ private fun InitialsAvatar(
     Box(
         modifier.background(color = avatarColor),
     ) {
+        val fontSize = avatarData.size.dp.toSp() / 2
+        val originalFont = ElementTheme.typography.fontBodyMdRegular
+        val ratio = fontSize.value / originalFont.fontSize.value
+        val lineHeight = originalFont.lineHeight * ratio
         Text(
             modifier = Modifier.align(Alignment.Center),
             text = avatarData.initial,
-            style = ElementTheme.typography.fontBodyMdRegular.copy(fontSize = avatarData.size.dp.toSp() / 2),
+            style = originalFont.copy(fontSize = fontSize, lineHeight = lineHeight, letterSpacing = 0.sp),
             color = Color.White,
         )
     }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/MainActionButton.kt

@@ -30,6 +30,7 @@ import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -51,7 +52,7 @@ fun MainActionButton(
     contentDescription: String = title,
 ) {
     val ripple = rememberRipple(bounded = false)
-    val interactionSource = MutableInteractionSource()
+    val interactionSource = remember { MutableInteractionSource() }
     Column(
         modifier.clickable(
             enabled = enabled,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceDivider.kt

@@ -21,14 +21,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
-import io.element.android.libraries.designsystem.theme.components.Divider
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.theme.ElementTheme
 
 @Composable
 fun PreferenceDivider(
     modifier: Modifier = Modifier,
 ) {
-    Divider(
+    HorizontalDivider(
         modifier = modifier,
         color = ElementTheme.colors.borderDisabled,
     )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/preview/SheetState.kt

@@ -19,9 +19,13 @@ package io.element.android.libraries.designsystem.preview
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.SheetState
 import androidx.compose.material3.SheetValue
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalDensity
 
 @OptIn(ExperimentalMaterial3Api::class)
-val sheetStateForPreview = SheetState(
+@Composable
+fun sheetStateForPreview() = SheetState(
     skipPartiallyExpanded = true,
     initialValue = SheetValue.Expanded,
+    density = LocalDensity.current,
 )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/DropdownMenuItem.kt

@@ -90,7 +90,7 @@ private fun ContentToPreview() {
             onClick = {},
             trailingIcon = { Icon(Icons.Default.ArrowRight, contentDescription = null) },
         )
-        Divider()
+        HorizontalDivider()
         DropdownMenuItem(
             text = { Text(text = "Item") },
             onClick = {},
@@ -109,7 +109,7 @@ private fun ContentToPreview() {
             leadingIcon = { Icon(Icons.Default.BugReport, contentDescription = null) },
             trailingIcon = { Icon(Icons.Default.ArrowRight, contentDescription = null) },
         )
-        Divider()
+        HorizontalDivider()
         DropdownMenuItem(
             text = { Text(text = "Multiline\nItem") },
             onClick = {},

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/HorizontalDivider.kt

@@ -30,12 +30,12 @@ import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @Composable
-fun Divider(
+fun HorizontalDivider(
     modifier: Modifier = Modifier,
     thickness: Dp = ElementDividerDefaults.thickness,
     color: Color = DividerDefaults.color,
 ) {
-    androidx.compose.material3.Divider(
+    androidx.compose.material3.HorizontalDivider(
         modifier = modifier,
         thickness = thickness,
         color = color,
@@ -48,7 +48,7 @@ object ElementDividerDefaults {
 
 @Preview(group = PreviewGroup.Dividers)
 @Composable
-internal fun DividerPreview() = ElementThemedPreview {
+internal fun HorizontalDividerPreview() = ElementThemedPreview {
     Box(Modifier.padding(vertical = 10.dp), contentAlignment = Alignment.Center) {
         ContentToPreview()
     }
@@ -56,5 +56,5 @@ internal fun DividerPreview() = ElementThemedPreview {
 
 @Composable
 private fun ContentToPreview() {
-    Divider()
+    HorizontalDivider()
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheet.kt

@@ -100,7 +100,7 @@ private fun ContentToPreview() {
     ) {
         ModalBottomSheet(
             onDismissRequest = {},
-            sheetState = sheetStateForPreview,
+            sheetState = sheetStateForPreview(),
         ) {
             Text(
                 text = "Sheet Content",

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheetLayout.kt

@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+// This is actually expected, as we should remove this component soon and use ModalBottomSheet instead
+@file:Suppress("UsingMaterialAndMaterial3Libraries")
+
 package io.element.android.libraries.designsystem.theme.components
 
 import androidx.compose.foundation.background
@@ -40,6 +43,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -111,7 +115,7 @@ private fun ContentToPreview() {
     ModalBottomSheetLayout(
         modifier = Modifier.height(140.dp),
         displayHandle = true,
-        sheetState = ModalBottomSheetState(ModalBottomSheetValue.Expanded),
+        sheetState = ModalBottomSheetState(ModalBottomSheetValue.Expanded, density = LocalDensity.current),
         sheetContent = {
             Text(text = "Sheet Content", modifier = Modifier
                 .padding(start = 16.dp, end = 16.dp, bottom = 20.dp)

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/SearchBar.kt

@@ -62,7 +62,7 @@ fun <T> SearchBar(
     showBackButton: Boolean = true,
     resultState: SearchBarResultState<T> = SearchBarResultState.NotSearching(),
     shape: Shape = SearchBarDefaults.inputFieldShape,
-    tonalElevation: Dp = SearchBarDefaults.Elevation,
+    tonalElevation: Dp = SearchBarDefaults.TonalElevation,
     windowInsets: WindowInsets = SearchBarDefaults.windowInsets,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     inactiveColors: SearchBarColors = ElementSearchBarDefaults.inactiveColors(),

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/AvatarActionBottomSheet.kt

@@ -15,6 +15,7 @@
  */
 
 @file:OptIn(ExperimentalMaterialApi::class)
+@file:Suppress("UsingMaterialAndMaterial3Libraries")
 
 package io.element.android.libraries.matrix.ui.components
 
@@ -32,6 +33,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
@@ -124,7 +126,8 @@ private fun ContentToPreview() {
     AvatarActionBottomSheet(
         actions = persistentListOf(AvatarAction.TakePhoto, AvatarAction.ChoosePhoto, AvatarAction.Remove),
         modalBottomSheetState = ModalBottomSheetState(
-            initialValue = ModalBottomSheetValue.Expanded
+            initialValue = ModalBottomSheetValue.Expanded,
+            density = LocalDensity.current,
         ),
     )
 }

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnresolvedUserRow.kt

@@ -41,7 +41,7 @@ import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.theme.components.Checkbox
-import io.element.android.libraries.designsystem.theme.components.Divider
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.ui.model.getAvatarData
@@ -149,11 +149,11 @@ internal fun CheckableUnresolvedUserRowPreview() =
         val matrixUser = aMatrixUser()
         Column {
             CheckableUnresolvedUserRow(false, matrixUser.getAvatarData(AvatarSize.UserListItem), matrixUser.userId.value)
-            Divider()
+            HorizontalDivider()
             CheckableUnresolvedUserRow(true, matrixUser.getAvatarData(AvatarSize.UserListItem), matrixUser.userId.value)
-            Divider()
+            HorizontalDivider()
             CheckableUnresolvedUserRow(false, matrixUser.getAvatarData(AvatarSize.UserListItem), matrixUser.userId.value, enabled = false)
-            Divider()
+            HorizontalDivider()
             CheckableUnresolvedUserRow(true, matrixUser.getAvatarData(AvatarSize.UserListItem), matrixUser.userId.value, enabled = false)
         }
     }

libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

@@ -49,6 +49,7 @@ import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
@@ -114,8 +115,8 @@ fun TextComposer(
         Spacer(modifier = Modifier.width(12.dp))
         val roundCornerSmall = 20.dp.applyScaleUp()
         val roundCornerLarge = 28.dp.applyScaleUp()
+        var lineCount by remember { mutableIntStateOf(0) }
 
-        var lineCount by remember { mutableStateOf(0) }
         val roundedCornerSize = remember(lineCount, composerMode) {
             if (lineCount > 1 || composerMode is MessageComposerMode.Special) {
                 roundCornerSmall
@@ -288,7 +289,7 @@ private fun EditingModeView(
                 .clickable(
                     enabled = true,
                     onClick = onResetComposerMode,
-                    interactionSource = MutableInteractionSource(),
+                    interactionSource = remember { MutableInteractionSource() },
                     indication = rememberRipple(bounded = false)
                 ),
         )
@@ -351,7 +352,7 @@ private fun ReplyToModeView(
                 .clickable(
                     enabled = true,
                     onClick = onResetComposerMode,
-                    interactionSource = MutableInteractionSource(),
+                    interactionSource = remember { MutableInteractionSource() },
                     indication = rememberRipple(bounded = false)
                 ),
         )
@@ -390,7 +391,7 @@ private fun BoxScope.SendButton(
     composerMode: MessageComposerMode,
     modifier: Modifier = Modifier,
 ) {
-    val interactionSource = MutableInteractionSource()
+    val interactionSource = remember { MutableInteractionSource() }
     Box(
         modifier = modifier
             .clip(CircleShape)

libraries/theme/build.gradle.kts

@@ -23,6 +23,8 @@ android {
     namespace = "io.element.android.libraries.theme"
 
     dependencies {
+        api(libs.androidx.compose.material3)
+
         ksp(libs.showkase.processor)
         kspTest(libs.showkase.processor)
 

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/ElementTheme.kt

@@ -74,7 +74,7 @@ object ElementTheme {
     val materialTypography: Typography
         @Composable
         @ReadOnlyComposable
-        get()= MaterialTheme.typography
+        get() = MaterialTheme.typography
 
     /**
      * Returns whether the theme version used is the light or the dark one.

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/compound/CompoundTypography.kt

@@ -17,9 +17,11 @@
 package io.element.android.libraries.theme.compound
 
 import androidx.compose.material3.Typography
+import androidx.compose.ui.text.PlatformTextStyle
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.LineHeightStyle
 import androidx.compose.ui.unit.em
 import androidx.compose.ui.unit.sp
 import io.element.android.libraries.theme.compound.generated.TypographyTokens
@@ -41,6 +43,8 @@ internal val defaultHeadlineSmall = TextStyle(
     lineHeight = 32.sp,
     fontSize = 24.sp,
     letterSpacing = 0.em,
+    platformStyle = PlatformTextStyle(includeFontPadding = false),
+    lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
 )
 
 // 22px (Material) vs 20px, it's the closest one

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/compound/generated/TypographyTokens.kt

@@ -1,21 +1,7 @@
-/*
- * Copyright (c) 2023 New Vector Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+
 
 // Do not edit directly
-// Generated on Tue, 27 Jun 2023 13:31:52 GMT
+// Generated on Fri, 28 Jul 2023 10:11:16 GMT
 
 
 
@@ -27,6 +13,8 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.em
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.text.PlatformTextStyle
+import androidx.compose.ui.text.style.LineHeightStyle
 
 object TypographyTokens {
     val fontBodyLgMedium = TextStyle(
@@ -35,6 +23,8 @@ object TypographyTokens {
         lineHeight = 22.sp,
         fontSize = 16.sp,
         letterSpacing = 0.015629999999999998.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontBodyLgRegular = TextStyle(
         fontFamily = FontFamily.Default,
@@ -42,6 +32,8 @@ object TypographyTokens {
         lineHeight = 22.sp,
         fontSize = 16.sp,
         letterSpacing = 0.015629999999999998.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontBodyMdMedium = TextStyle(
         fontFamily = FontFamily.Default,
@@ -49,6 +41,8 @@ object TypographyTokens {
         lineHeight = 20.sp,
         fontSize = 14.sp,
         letterSpacing = 0.01786.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontBodyMdRegular = TextStyle(
         fontFamily = FontFamily.Default,
@@ -56,6 +50,8 @@ object TypographyTokens {
         lineHeight = 20.sp,
         fontSize = 14.sp,
         letterSpacing = 0.01786.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontBodySmMedium = TextStyle(
         fontFamily = FontFamily.Default,
@@ -63,6 +59,8 @@ object TypographyTokens {
         lineHeight = 17.sp,
         fontSize = 12.sp,
         letterSpacing = 0.03333.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontBodySmRegular = TextStyle(
         fontFamily = FontFamily.Default,
@@ -70,6 +68,8 @@ object TypographyTokens {
         lineHeight = 17.sp,
         fontSize = 12.sp,
         letterSpacing = 0.03333.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontBodyXsMedium = TextStyle(
         fontFamily = FontFamily.Default,
@@ -77,6 +77,8 @@ object TypographyTokens {
         lineHeight = 15.sp,
         fontSize = 11.sp,
         letterSpacing = 0.04545.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontBodyXsRegular = TextStyle(
         fontFamily = FontFamily.Default,
@@ -84,6 +86,8 @@ object TypographyTokens {
         lineHeight = 15.sp,
         fontSize = 11.sp,
         letterSpacing = 0.04545.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontHeadingLgBold = TextStyle(
         fontFamily = FontFamily.Default,
@@ -91,6 +95,8 @@ object TypographyTokens {
         lineHeight = 34.sp,
         fontSize = 28.sp,
         letterSpacing = 0.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontHeadingLgRegular = TextStyle(
         fontFamily = FontFamily.Default,
@@ -98,6 +104,8 @@ object TypographyTokens {
         lineHeight = 34.sp,
         fontSize = 28.sp,
         letterSpacing = 0.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontHeadingMdBold = TextStyle(
         fontFamily = FontFamily.Default,
@@ -105,6 +113,8 @@ object TypographyTokens {
         lineHeight = 27.sp,
         fontSize = 22.sp,
         letterSpacing = 0.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontHeadingMdRegular = TextStyle(
         fontFamily = FontFamily.Default,
@@ -112,6 +122,8 @@ object TypographyTokens {
         lineHeight = 27.sp,
         fontSize = 22.sp,
         letterSpacing = 0.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontHeadingSmMedium = TextStyle(
         fontFamily = FontFamily.Default,
@@ -119,6 +131,8 @@ object TypographyTokens {
         lineHeight = 25.sp,
         fontSize = 20.sp,
         letterSpacing = 0.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontHeadingSmRegular = TextStyle(
         fontFamily = FontFamily.Default,
@@ -126,6 +140,8 @@ object TypographyTokens {
         lineHeight = 25.sp,
         fontSize = 20.sp,
         letterSpacing = 0.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontHeadingXlBold = TextStyle(
         fontFamily = FontFamily.Default,
@@ -133,6 +149,8 @@ object TypographyTokens {
         lineHeight = 41.sp,
         fontSize = 34.sp,
         letterSpacing = 0.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
     val fontHeadingXlRegular = TextStyle(
         fontFamily = FontFamily.Default,
@@ -140,5 +158,7 @@ object TypographyTokens {
         lineHeight = 41.sp,
         fontSize = 34.sp,
         letterSpacing = 0.em,
+        platformStyle = PlatformTextStyle(includeFontPadding = false),
+        lineHeightStyle = LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.None)
     )
 }

plugins/src/main/kotlin/Versions.kt

@@ -61,7 +61,7 @@ private const val versionPatch = 4
 object Versions {
     val versionCode = 4_000_000 + versionMajor * 1_00_00 + versionMinor * 1_00 + versionPatch
     val versionName = "$versionMajor.$versionMinor.$versionPatch"
-    const val compileSdk = 33
+    const val compileSdk = 34
     const val targetSdk = 33
     const val minSdk = 23
     val javaCompileVersion = JavaVersion.VERSION_17

plugins/src/main/kotlin/extension/CommonExtension.kt

@@ -45,6 +45,7 @@ fun CommonExtension<*, *, *, *>.androidConfig(project: Project) {
         checkDependencies = true
         abortOnError = true
         ignoreTestFixturesSources = true
+        checkGeneratedSources = false
     }
 }
 
@@ -71,6 +72,7 @@ fun CommonExtension<*, *, *, *>.composeConfig(libs: LibrariesForLibs) {
         // error.add("ComposableLambdaParameterNaming")
         error.add("ComposableLambdaParameterPosition")
         ignoreTestFixturesSources = true
+        checkGeneratedSources = false
     }
 }
 

tests/uitests/src/test/kotlin/io/element/android/tests/uitests/ScreenshotTest.kt

@@ -34,6 +34,7 @@ import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.unit.Density
 import androidx.lifecycle.Lifecycle
 import app.cash.paparazzi.Paparazzi
+import app.cash.paparazzi.detectEnvironment
 import com.airbnb.android.showkase.models.Showkase
 import com.android.ide.common.rendering.api.SessionParams
 import com.android.resources.NightMode
@@ -70,6 +71,10 @@ class ScreenshotTest {
 
     @get:Rule
     val paparazzi = Paparazzi(
+        environment = detectEnvironment().run {
+            // Workaround to work with API 34 (https://github.com/cashapp/paparazzi/issues/1025)
+            copy(compileSdkVersion = 33, platformDir = platformDir.replace("34", "33"))
+        },
         maxPercentDifference = 0.01,
         renderingMode = SessionParams.RenderingMode.NORMAL,
     )