Merge pull request #306 from antonshilov/material3

Migrate sample apps to Material3
bumble-tech · Dec 20, 2022 · e766b8d · e766b8d
2 parents 7b502eb + 9992041
commit e766b8d
Show file tree

Hide file tree

Showing 59 changed files with 183 additions and 186 deletions.
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -35,7 +35,7 @@ coil-compose = { module = "io.coil-kt:coil-compose", version.ref = "coil" }
 compose-animation-core = { module = "androidx.compose.animation:animation-core", version.ref = "compose" }
 compose-foundation-layout = { module = "androidx.compose.foundation:foundation-layout", version.ref = "compose" }
 compose-foundation = { module = "androidx.compose.foundation:foundation", version.ref = "compose" }
-compose-material = { module = "androidx.compose.material:material", version.ref = "compose" }
+compose-material = "androidx.compose.material3:material3:1.0.1"
 compose-runtime = { module = "androidx.compose.runtime:runtime", version.ref = "compose" }
 compose-ui-test-junit4 = { module = "androidx.compose.ui:ui-test-junit4", version.ref = "compose" }
 compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling", version.ref = "compose" }

diff --git a/samples/app/build.gradle.kts b/samples/app/build.gradle.kts
@@ -10,7 +10,7 @@ android {
     compileSdk = libs.versions.androidCompileSdk.get().toInt()
 
     defaultConfig {
-        applicationId = "com.bumble.appyx"
+        applicationId = "com.bumble.appyx.samples"
         minSdk = libs.versions.androidMinSdk.get().toInt()
         targetSdk = libs.versions.androidTargetSdk.get().toInt()
         versionCode = 1

diff --git a/samples/app/src/main/kotlin/com/bumble/appyx/app/MainActivity.kt b/samples/app/src/main/kotlin/com/bumble/appyx/app/MainActivity.kt
@@ -4,8 +4,8 @@ import android.os.Bundle
 import androidx.activity.compose.setContent
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.layout.Column
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.tooling.preview.Preview
@@ -28,7 +28,7 @@ class MainActivity : NodeActivity() {
         setContent {
             AppyxSampleAppTheme {
                 // A surface container using the 'background' color from the theme
-                Surface(color = MaterialTheme.colors.background) {
+                Surface(color = MaterialTheme.colorScheme.background) {
                     Column {
                         NodeHost(integrationPoint = appyxIntegrationPoint) {
                             SamplesContainerNode(buildContext = it)

diff --git a/samples/app/src/main/kotlin/com/bumble/appyx/app/composable/Page.kt b/samples/app/src/main/kotlin/com/bumble/appyx/app/composable/Page.kt
@@ -10,8 +10,8 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.ExperimentalUnitApi
@@ -52,7 +52,7 @@ fun Page(
         ) {
             Text(
                 text = title,
-                style = MaterialTheme.typography.h4,
+                style = MaterialTheme.typography.headlineMedium,
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(bottom = 8.dp)
@@ -63,7 +63,7 @@ fun Page(
             ) {
                 Text(
                     text = body,
-                    style = MaterialTheme.typography.body1.copy(
+                    style = MaterialTheme.typography.bodyLarge.copy(
                         lineHeight = TextUnit(1.5f, TextUnitType.Em)
                     )
                 )

diff --git a/samples/app/src/main/kotlin/com/bumble/appyx/app/composable/graph/Tree.kt b/samples/app/src/main/kotlin/com/bumble/appyx/app/composable/graph/Tree.kt
@@ -9,7 +9,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.width
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateMapOf
 import androidx.compose.runtime.mutableStateOf
@@ -39,7 +39,7 @@ fun Tree(
     idx: Int = 0,
     gapHeight: Dp = 40.dp,
     lineColor: Color = if (isSystemInDarkTheme()) Color.Black else Color(0xFFDDDDDD),
-    activeLineColor: Color = MaterialTheme.colors.primary,
+    activeLineColor: Color = MaterialTheme.colorScheme.primary,
     strokeWidth: Float = 7f,
 ) {
     val children = graphNode.children()

diff --git a/...les/app/src/main/kotlin/com/bumble/appyx/app/composable/graph/nodeimpl/SimpleGraphNode.kt b/...les/app/src/main/kotlin/com/bumble/appyx/app/composable/graph/nodeimpl/SimpleGraphNode.kt
@@ -7,8 +7,8 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
@@ -77,7 +77,7 @@ class SimpleGraphNode(
                 .wrapContentSize()
                 .padding(start = horizontalPadding, end = horizontalPadding)
                 .background(
-                    color = MaterialTheme.colors.surface,
+                    color = MaterialTheme.colorScheme.surface,
                     shape = RoundedCornerShape(cornerRadius)
                 )
                 .alpha(alpha)
@@ -91,7 +91,7 @@ class SimpleGraphNode(
                 text = label,
                 modifier = Modifier.align(Alignment.Center),
                 color = Color.Black,
-                style = MaterialTheme.typography.caption
+                style = MaterialTheme.typography.bodySmall
             )
         }
     }

diff --git a/samples/app/src/main/kotlin/com/bumble/appyx/app/composable/graph/nodeimpl/TestImpl.kt b/samples/app/src/main/kotlin/com/bumble/appyx/app/composable/graph/nodeimpl/TestImpl.kt
@@ -5,7 +5,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
@@ -79,10 +79,10 @@ class TestImpl(
                 )
                 .padding(4.dp)
         ) {
-            androidx.compose.material.Text(
+            androidx.compose.material3.Text(
                 text = "$id",
                 modifier = Modifier.align(Alignment.Center),
-                style = MaterialTheme.typography.caption
+                style = MaterialTheme.typography.bodySmall
             )
         }
     }

diff --git a/samples/app/src/main/kotlin/com/bumble/appyx/app/node/backstack/InsideTheBackStack.kt b/samples/app/src/main/kotlin/com/bumble/appyx/app/node/backstack/InsideTheBackStack.kt
@@ -9,8 +9,8 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -77,7 +77,7 @@ class InsideTheBackStack(
         Box(
             modifier = Modifier
                 .fillMaxSize()
-                .background(color = MaterialTheme.colors.background)
+                .background(color = MaterialTheme.colorScheme.background)
         ) {
             Column(
                 horizontalAlignment = Alignment.CenterHorizontally,

diff --git a/samples/app/src/main/kotlin/com/bumble/appyx/app/node/backstack/app/ChildNode.kt b/samples/app/src/main/kotlin/com/bumble/appyx/app/node/backstack/app/ChildNode.kt
@@ -5,7 +5,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Text
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip

diff --git a/samples/app/src/main/kotlin/com/bumble/appyx/app/node/backstack/app/composable/Buttons.kt b/samples/app/src/main/kotlin/com/bumble/appyx/app/node/backstack/app/composable/Buttons.kt
@@ -1,8 +1,8 @@
 package com.bumble.appyx.app.node.backstack.app.composable
 
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Button
-import androidx.compose.material.ButtonDefaults
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
@@ -19,7 +19,7 @@ fun CustomButton(
         modifier = modifier.padding(horizontal = 8.dp),
         onClick = onClick,
         colors = ButtonDefaults.buttonColors(
-            backgroundColor = appyx_yellow1,
+            containerColor = appyx_yellow1,
             contentColor = appyx_dark
         )
     ) { content() }

diff --git a/...src/main/kotlin/com/bumble/appyx/app/node/backstack/app/composable/PeekInsideBackStack.kt b/...src/main/kotlin/com/bumble/appyx/app/node/backstack/app/composable/PeekInsideBackStack.kt
@@ -11,8 +11,8 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -78,15 +78,15 @@ private fun <T> BackStackElement(
     ) {
         Text(
             text = element.key.navTarget.toString(),
-            color = MaterialTheme.colors.onSurface,
+            color = MaterialTheme.colorScheme.onSurface,
             fontSize = 16.sp,
             fontWeight = FontWeight.Bold
         )
         Text(
             text = element.targetState.javaClass.simpleName.toString()
                 .replace("Destroyed", "Destr")
                 .uppercase(Locale.getDefault()),
-            color = MaterialTheme.colors.onSurface,
+            color = MaterialTheme.colorScheme.onSurface,
             fontSize = 9.sp,
         )
     }

diff --git a/samples/app/src/main/kotlin/com/bumble/appyx/app/node/child/GenericChildNode.kt b/samples/app/src/main/kotlin/com/bumble/appyx/app/node/child/GenericChildNode.kt
@@ -7,8 +7,8 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
@@ -119,7 +119,7 @@ class GenericChildNode(
             ) {
                 Text(
                     text = "Child (${id.substring(0, 4)})",
-                    style = MaterialTheme.typography.caption
+                    style = MaterialTheme.typography.bodySmall
                 )
                 Text(
                     text = "$counter",

diff --git a/samples/app/src/main/kotlin/com/bumble/appyx/app/node/samples/SampleItem.kt b/samples/app/src/main/kotlin/com/bumble/appyx/app/node/samples/SampleItem.kt
@@ -8,10 +8,10 @@ import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -20,7 +20,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.bumble.appyx.app.ui.AppyxSampleAppTheme
 
-@OptIn(ExperimentalMaterialApi::class)
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SampleItem(
     title: String,
@@ -35,7 +35,7 @@ fun SampleItem(
             .fillMaxSize()
             .aspectRatio(16f / 9),
         shape = MaterialTheme.shapes.medium,
-        elevation = 4.dp,
+        shadowElevation = 4.dp,
     ) {
         Row(
             Modifier
@@ -52,15 +52,15 @@ fun SampleItem(
             Column(horizontalAlignment = Alignment.Start) {
                 Text(
                     text = title,
-                    style = MaterialTheme.typography.h4,
+                    style = MaterialTheme.typography.headlineMedium,
                     textAlign = TextAlign.Start
                 )
                 Spacer(
                     modifier = Modifier.size(8.dp)
                 )
                 Text(
                     text = subtitle,
-                    style = MaterialTheme.typography.caption,
+                    style = MaterialTheme.typography.bodySmall,
                     textAlign = TextAlign.Start
                 )
             }

diff --git a/samples/app/src/main/kotlin/com/bumble/appyx/app/node/samples/SamplesContainerNode.kt b/samples/app/src/main/kotlin/com/bumble/appyx/app/node/samples/SamplesContainerNode.kt
@@ -6,8 +6,8 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.runtime.Composable

diff --git a/samples/app/src/main/kotlin/com/bumble/appyx/app/node/slideshow/WhatsAppyxSlideShow.kt b/samples/app/src/main/kotlin/com/bumble/appyx/app/node/slideshow/WhatsAppyxSlideShow.kt
@@ -13,11 +13,11 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.material.Button
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
-import androidx.compose.material.TextButton
+import androidx.compose.material3.Button
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
 import androidx.compose.runtime.collectAsState
@@ -138,7 +138,7 @@ class WhatsAppyxSlideShow(
         Column(
             modifier = modifier
                 .fillMaxSize()
-                .background(MaterialTheme.colors.surface),
+                .background(MaterialTheme.colorScheme.surface),
         ) {
             Children(
                 modifier = Modifier
@@ -241,7 +241,7 @@ fun OnboardingContainerNodePreviewDark() {
 @ExperimentalAnimationApi
 @ExperimentalComposeUiApi
 private fun PreviewContent() {
-    Surface(color = MaterialTheme.colors.background) {
+    Surface(color = MaterialTheme.colorScheme.background) {
         Box(Modifier.fillMaxSize()) {
             NodeHost(integrationPoint = IntegrationPointStub()) {
                 WhatsAppyxSlideShow(root(null))

diff --git a/samples/app/src/main/kotlin/com/bumble/appyx/app/node/slideshow/slide/app/ApplicationTree.kt b/samples/app/src/main/kotlin/com/bumble/appyx/app/node/slideshow/slide/app/ApplicationTree.kt
@@ -6,8 +6,8 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
@@ -173,7 +173,7 @@ fun ApplicationTreePreviewDark() {
 @ExperimentalUnitApi
 @ExperimentalComposeUiApi
 private fun PreviewContent() {
-    Surface(color = MaterialTheme.colors.background) {
+    Surface(color = MaterialTheme.colorScheme.background) {
         Box(Modifier.fillMaxSize()) {
             NodeHost(integrationPoint = IntegrationPointStub()) {
                 ApplicationTree(

diff --git a/samples/app/src/main/kotlin/com/bumble/appyx/app/node/slideshow/slide/app/StatefulNode1.kt b/samples/app/src/main/kotlin/com/bumble/appyx/app/node/slideshow/slide/app/StatefulNode1.kt
@@ -9,8 +9,8 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -160,7 +160,7 @@ fun StatefulNode1PreviewDark() {
 @ExperimentalAnimationApi
 @ExperimentalComposeUiApi
 private fun PreviewContent() {
-    Surface(color = MaterialTheme.colors.background) {
+    Surface(color = MaterialTheme.colorScheme.background) {
         Box(Modifier.fillMaxSize()) {
             NodeHost(integrationPoint = IntegrationPointStub()) {
                 StatefulNode1(