Migrate Accessibility codelab main to M3

AccessibilityCodelab/app/build.gradle

@@ -95,7 +95,8 @@ dependencies {
     implementation "androidx.compose.runtime:runtime"
     implementation "androidx.compose.ui:ui"
     implementation "androidx.compose.foundation:foundation-layout"
-    implementation "androidx.compose.material:material"
+//    implementation "androidx.compose.material:material"
+    implementation "androidx.compose.material3:material3"
     implementation "androidx.compose.material:material-icons-extended"
     implementation "androidx.compose.foundation:foundation"
     implementation "androidx.compose.animation:animation"

AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt

@@ -18,6 +18,7 @@ package com.example.jetnews.ui
 
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -27,11 +28,11 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
-import androidx.compose.material.Divider
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
-import androidx.compose.material.TextButton
+import androidx.compose.material3.Divider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Home
 import androidx.compose.material.icons.filled.ListAlt
@@ -54,11 +55,10 @@ fun AppDrawer(
     navigateToInterests: () -> Unit,
     closeDrawer: () -> Unit
 ) {
-
     Column(modifier = Modifier.fillMaxSize()) {
         Spacer(Modifier.height(24.dp))
         JetNewsLogo(Modifier.padding(16.dp))
-        Divider(color = MaterialTheme.colors.onSurface.copy(alpha = .2f))
+        Divider(color = MaterialTheme.colorScheme.onSurface.copy(alpha = .2f))
         DrawerButton(
             icon = Icons.Filled.Home,
             label = "Home",
@@ -87,13 +87,13 @@ private fun JetNewsLogo(modifier: Modifier = Modifier) {
         Image(
             painter = painterResource(R.drawable.ic_jetnews_logo),
             contentDescription = null,
-            colorFilter = ColorFilter.tint(MaterialTheme.colors.primary)
+            colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary)
         )
         Spacer(Modifier.width(8.dp))
         Image(
             painter = painterResource(R.drawable.ic_jetnews_wordmark),
             contentDescription = null,
-            colorFilter = ColorFilter.tint(MaterialTheme.colors.onSurface)
+            colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurface)
         )
     }
 }
@@ -106,7 +106,7 @@ private fun DrawerButton(
     action: () -> Unit,
     modifier: Modifier = Modifier
 ) {
-    val colors = MaterialTheme.colors
+    val colors = MaterialTheme.colorScheme
     val imageAlpha = if (isSelected) {
         1f
     } else {
@@ -149,7 +149,7 @@ private fun DrawerButton(
                 Spacer(Modifier.width(16.dp))
                 Text(
                     text = label,
-                    style = MaterialTheme.typography.body2,
+                    style = MaterialTheme.typography.bodyMedium,
                     color = textIconColor
                 )
             }

AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt

@@ -17,21 +17,28 @@
 package com.example.jetnews.ui
 
 import android.annotation.SuppressLint
-import androidx.compose.material.Scaffold
-import androidx.compose.material.rememberScaffoldState
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.ModalDrawerSheet
+import androidx.compose.material3.ModalNavigationDrawer
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import com.example.jetnews.data.AppContainer
 import com.example.jetnews.ui.theme.JetnewsTheme
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import kotlinx.coroutines.launch
 
-@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
+@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
 @Composable
 fun JetnewsApp(
     appContainer: AppContainer
@@ -44,29 +51,34 @@ fun JetnewsApp(
 
         val navController = rememberNavController()
         val coroutineScope = rememberCoroutineScope()
-        // This top level scaffold contains the app drawer, which needs to be accessible
-        // from multiple screens. An event to open the drawer is passed down to each
-        // screen that needs it.
-        val scaffoldState = rememberScaffoldState()
 
         val navBackStackEntry by navController.currentBackStackEntryAsState()
         val currentRoute = navBackStackEntry?.destination?.route ?: MainDestinations.HOME_ROUTE
-        Scaffold(
-            scaffoldState = scaffoldState,
+
+        val drawerState = rememberDrawerState(DrawerValue.Closed)
+        val scope = rememberCoroutineScope()
+
+        ModalNavigationDrawer(
+            drawerState = drawerState,
             drawerContent = {
-                AppDrawer(
-                    currentRoute = currentRoute,
-                    navigateToHome = { navController.navigate(MainDestinations.HOME_ROUTE) },
-                    navigateToInterests = { navController.navigate(MainDestinations.INTERESTS_ROUTE) },
-                    closeDrawer = { coroutineScope.launch { scaffoldState.drawerState.close() } }
-                )
+                ModalDrawerSheet(modifier = Modifier.width(300.dp), windowInsets = WindowInsets(0.dp, 0.dp, 0.dp, 0.dp)) {
+                    AppDrawer(
+                        currentRoute = currentRoute,
+                        navigateToHome = { navController.navigate(MainDestinations.HOME_ROUTE) },
+                        navigateToInterests = { navController.navigate(MainDestinations.INTERESTS_ROUTE) },
+                        closeDrawer = { coroutineScope.launch { drawerState.close() } }
+                    )
+                }
+            },
+            content = {
+                Scaffold {
+                    JetnewsNavGraph(
+                        appContainer = appContainer,
+                        navController = navController,
+                        drawerState = drawerState
+                    )
+                }
             }
-        ) {
-            JetnewsNavGraph(
-                appContainer = appContainer,
-                navController = navController,
-                scaffoldState = scaffoldState
-            )
-        }
+        )
     }
 }

AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsNavGraph.kt

@@ -16,11 +16,13 @@
 
 package com.example.jetnews.ui
 
-import androidx.compose.material.ScaffoldState
-import androidx.compose.material.rememberScaffoldState
+import androidx.compose.material3.DrawerState
+import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Modifier
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
@@ -46,12 +48,12 @@ object MainDestinations {
 fun JetnewsNavGraph(
     appContainer: AppContainer,
     navController: NavHostController = rememberNavController(),
-    scaffoldState: ScaffoldState = rememberScaffoldState(),
+    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
     startDestination: String = MainDestinations.HOME_ROUTE
 ) {
     val actions = remember(navController) { MainActions(navController) }
     val coroutineScope = rememberCoroutineScope()
-    val openDrawer: () -> Unit = { coroutineScope.launch { scaffoldState.drawerState.open() } }
+    val openDrawer: () -> Unit = { coroutineScope.launch { drawerState.open() } }
 
     NavHost(
         navController = navController,

AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/ArticleScreen.kt

@@ -17,16 +17,15 @@
 package com.example.jetnews.ui.article
 
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
-import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.AlertDialog
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.LocalContentColor
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Text
-import androidx.compose.material.TextButton
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.runtime.Composable
@@ -89,7 +88,7 @@ fun ArticleScreen(
                 title = {
                     Text(
                         text = "Published in: ${post.publication?.name}",
-                        style = MaterialTheme.typography.subtitle2,
+                        style = MaterialTheme.typography.titleSmall,
                         color = LocalContentColor.current
                     )
                 },
@@ -127,7 +126,7 @@ private fun FunctionalityNotAvailablePopup(onDismiss: () -> Unit) {
         text = {
             Text(
                 text = "Functionality not available \uD83D\uDE48",
-                style = MaterialTheme.typography.body2
+                style = MaterialTheme.typography.bodyMedium
             )
         },
         confirmButton = {

AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt

@@ -32,14 +32,12 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.Colors
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.LocalContentColor
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
-import androidx.compose.material.Typography
+import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.Typography
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.AccountCircle
 import androidx.compose.runtime.Composable
@@ -86,15 +84,15 @@ fun PostContent(post: Post, modifier: Modifier = Modifier) {
             PostHeaderImage(post)
         }
         item {
-            Text(text = post.title, style = MaterialTheme.typography.h4)
+            Text(text = post.title, style = MaterialTheme.typography.headlineMedium)
             Spacer(Modifier.height(8.dp))
         }
         post.subtitle?.let { subtitle ->
             item {
-                CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
+                CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
                     Text(
                         text = subtitle,
-                        style = MaterialTheme.typography.body2,
+                        style = MaterialTheme.typography.bodyMedium,
                         lineHeight = 20.sp
                     )
                 }
@@ -144,14 +142,14 @@ private fun PostMetadata(metadata: Metadata) {
         Column {
             Text(
                 text = metadata.author.name,
-                style = typography.caption,
+                style = typography.bodySmall,
                 modifier = Modifier.padding(top = 4.dp)
             )
 
-            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
+            CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
                 Text(
                     text = "${metadata.date} • ${metadata.readTimeMinutes} min read",
-                    style = typography.caption
+                    style = typography.bodySmall
                 )
             }
         }
@@ -165,7 +163,7 @@ private fun Paragraph(paragraph: Paragraph) {
     val annotatedString = paragraphToAnnotatedString(
         paragraph,
         MaterialTheme.typography,
-        MaterialTheme.colors.codeBlockBackground
+        MaterialTheme.colorScheme.codeBlockBackground
     )
     Box(modifier = Modifier.padding(bottom = trailingPadding)) {
         when (paragraph.type) {
@@ -202,7 +200,7 @@ private fun CodeBlockParagraph(
     paragraphStyle: ParagraphStyle
 ) {
     Surface(
-        color = MaterialTheme.colors.codeBlockBackground,
+        color = MaterialTheme.colorScheme.codeBlockBackground,
         shape = MaterialTheme.shapes.small,
         modifier = Modifier.fillMaxWidth()
     ) {
@@ -252,29 +250,29 @@ private data class ParagraphStyling(
 @Composable
 private fun ParagraphType.getTextAndParagraphStyle(): ParagraphStyling {
     val typography = MaterialTheme.typography
-    var textStyle: TextStyle = typography.body1
+    var textStyle: TextStyle = typography.bodyLarge
     var paragraphStyle = ParagraphStyle()
     var trailingPadding = 24.dp
 
     when (this) {
-        ParagraphType.Caption -> textStyle = typography.body1
-        ParagraphType.Title -> textStyle = typography.h4
+        ParagraphType.Caption -> textStyle = typography.bodyLarge
+        ParagraphType.Title -> textStyle = typography.headlineMedium
         ParagraphType.Subhead -> {
-            textStyle = typography.h6
+            textStyle = typography.titleLarge
             trailingPadding = 16.dp
         }
         ParagraphType.Text -> {
-            textStyle = typography.body1.copy(lineHeight = 28.sp)
+            textStyle = typography.bodyLarge.copy(lineHeight = 28.sp)
             paragraphStyle = paragraphStyle.copy(lineHeight = 28.sp)
         }
         ParagraphType.Header -> {
-            textStyle = typography.h5
+            textStyle = typography.headlineSmall
             trailingPadding = 16.dp
         }
-        ParagraphType.CodeBlock -> textStyle = typography.body1.copy(
+        ParagraphType.CodeBlock -> textStyle = typography.bodyLarge.copy(
             fontFamily = FontFamily.Monospace
         )
-        ParagraphType.Quote -> textStyle = typography.body1
+        ParagraphType.Quote -> textStyle = typography.bodyLarge
         ParagraphType.Bullet -> {
             paragraphStyle = ParagraphStyle(textIndent = TextIndent(firstLine = 8.sp))
         }
@@ -303,28 +301,28 @@ fun Markup.toAnnotatedStringItem(
     return when (this.type) {
         MarkupType.Italic -> {
             AnnotatedString.Range(
-                typography.body1.copy(fontStyle = FontStyle.Italic).toSpanStyle(),
+                typography.bodyLarge.copy(fontStyle = FontStyle.Italic).toSpanStyle(),
                 start,
                 end
             )
         }
         MarkupType.Link -> {
             AnnotatedString.Range(
-                typography.body1.copy(textDecoration = TextDecoration.Underline).toSpanStyle(),
+                typography.bodyLarge.copy(textDecoration = TextDecoration.Underline).toSpanStyle(),
                 start,
                 end
             )
         }
         MarkupType.Bold -> {
             AnnotatedString.Range(
-                typography.body1.copy(fontWeight = FontWeight.Bold).toSpanStyle(),
+                typography.bodyLarge.copy(fontWeight = FontWeight.Bold).toSpanStyle(),
                 start,
                 end
             )
         }
         MarkupType.Code -> {
             AnnotatedString.Range(
-                typography.body1
+                typography.bodyLarge
                     .copy(
                         background = codeBlockBackground,
                         fontFamily = FontFamily.Monospace
@@ -336,7 +334,7 @@ fun Markup.toAnnotatedStringItem(
     }
 }
 
-private val Colors.codeBlockBackground: Color
+private val ColorScheme.codeBlockBackground: Color
     get() = onSurface.copy(alpha = .15f)
 
 @Preview("Post content")