Merge pull request #306 from antonshilov/material3

Migrate sample apps to Material3

Author: antonshilov

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" }

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

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)

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)
                     )
                 )

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()

samples/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
             )
         }
     }

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
             )
         }
     }

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,

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

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() }