Merge pull request #98 from c0de-wizard/material-3-migration

Material 3 migration
thomaskioko · Nov 1, 2023 · 1000edb · 1000edb
2 parents 1f2077c + 61d5884
commit 1000edb
Show file tree

Hide file tree

Showing 48 changed files with 549 additions and 327 deletions.
diff --git a/android-core/designsystem/build.gradle.kts b/android-core/designsystem/build.gradle.kts
@@ -18,7 +18,6 @@ dependencies {
     implementation(projects.androidCore.resources)
 
     implementation(libs.kenburns)
-    implementation(libs.accompanist.insetsui)
     implementation(libs.androidx.core)
     implementation(libs.androidx.compose.foundation)
     implementation(libs.androidx.compose.material.icons)

diff --git a/...-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/Buttons.kt b/...-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/Buttons.kt
@@ -10,12 +10,12 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Text
 import androidx.compose.material3.ButtonColors
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -54,7 +54,7 @@ fun TvManiacOutlinedButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    textPadding: Dp = 4.dp,
+    textPadding: Dp = 0.dp,
     borderColor: Color = MaterialTheme.colorScheme.secondary,
     leadingIcon: @Composable (() -> Unit)? = null,
 ) {

diff --git a/...oid-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/Card.kt b/...oid-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/Card.kt
@@ -7,10 +7,10 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
-import androidx.compose.material.Text
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 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

diff --git a/...oid-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/Chip.kt b/...oid-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/Chip.kt
@@ -2,13 +2,13 @@ package com.thomaskioko.tvmaniac.compose.components
 
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Text
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FilterChip
 import androidx.compose.material3.FilterChipDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ProvideTextStyle
 import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp

diff --git a/...e/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/ErrorLayout.kt b/...e/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/ErrorLayout.kt
@@ -14,14 +14,13 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.material.Icon
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Collections
 import androidx.compose.material.icons.outlined.ErrorOutline
 import androidx.compose.material.icons.outlined.SignalWifi4Bar
 import androidx.compose.material.icons.outlined.SignalWifiOff
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
@@ -57,7 +56,6 @@ fun ConnectionStatus(
     Box(
         modifier = modifier
             .background(backgroundColor)
-            .statusBarsPadding()
             .fillMaxWidth()
             .padding(8.dp),
         contentAlignment = Alignment.TopCenter,

diff --git a/...re/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/Navigation.kt b/...re/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/Navigation.kt
@@ -0,0 +1,67 @@
+package com.thomaskioko.tvmaniac.compose.components
+
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.NavigationBarItemDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun TvManiacNavigationBar(
+    modifier: Modifier = Modifier,
+    content: @Composable RowScope.() -> Unit,
+) {
+    NavigationBar(
+        modifier = modifier,
+        contentColor = NavigationDefaultColors.navigationContentColor(),
+        tonalElevation = 8.dp,
+        content = content,
+    )
+}
+
+@Composable
+fun RowScope.TvManiacBottomNavigationItem(
+    imageVector: ImageVector,
+    title: String,
+    selected: Boolean,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+) {
+    NavigationBarItem(
+        modifier = modifier,
+        icon = {
+            Icon(
+                imageVector = imageVector,
+                contentDescription = title,
+            )
+        },
+        label = { Text(title) },
+        selected = selected,
+        alwaysShowLabel = true,
+        colors = NavigationBarItemDefaults.colors(
+            selectedIconColor = NavigationDefaultColors.navigationSelectedItemColor(),
+            unselectedIconColor = NavigationDefaultColors.navigationContentColor(),
+            selectedTextColor = NavigationDefaultColors.navigationSelectedItemColor(),
+            unselectedTextColor = NavigationDefaultColors.navigationContentColor(),
+            indicatorColor = NavigationDefaultColors.navigationIndicatorColor(),
+        ),
+        onClick = onClick,
+    )
+}
+
+object NavigationDefaultColors {
+    @Composable
+    fun navigationContentColor() = MaterialTheme.colorScheme.onSurfaceVariant
+
+    @Composable
+    fun navigationSelectedItemColor() = MaterialTheme.colorScheme.secondary
+
+    @Composable
+    fun navigationIndicatorColor() = MaterialTheme.colorScheme.primaryContainer
+}
diff --git a/...oid-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/Text.kt b/...oid-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/Text.kt
@@ -6,10 +6,10 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.CircularProgressIndicator
-import androidx.compose.material.Text
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -18,6 +18,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.font.FontWeight.Companion.Bold
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
@@ -98,6 +99,7 @@ fun TextLoadingItem(
 fun ExpandingText(
     text: String,
     modifier: Modifier = Modifier,
+    fontWeight: FontWeight = FontWeight.Normal,
     textStyle: TextStyle = MaterialTheme.typography.bodyMedium,
     expandable: Boolean = true,
     collapsedMaxLines: Int = 4,
@@ -109,6 +111,7 @@ fun ExpandingText(
     Text(
         text = text,
         style = textStyle,
+        fontWeight = fontWeight,
         overflow = TextOverflow.Ellipsis,
         color = MaterialTheme.colorScheme.onSurface,
         maxLines = if (expanded) expandedMaxLines else collapsedMaxLines,

diff --git a/...d-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/TopBar.kt b/...d-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/components/TopBar.kt
@@ -8,51 +8,58 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.WindowInsetsSides
-import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBars
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.Text
-import androidx.compose.material.TopAppBar
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarColors
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import com.google.accompanist.insets.ui.TopAppBar
 import com.thomaskioko.tvmaniac.compose.extensions.iconButtonBackgroundScrim
 import com.thomaskioko.tvmaniac.compose.theme.TvManiacTheme
 import com.thomaskioko.tvmaniac.resources.R
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun TvManiacTopBar(
     modifier: Modifier = Modifier,
-    backgroundColor: Color = MaterialTheme.colorScheme.background,
+    elevation: Dp = 0.dp,
+    colors: TopAppBarColors = TopAppBarDefaults.centerAlignedTopAppBarColors(),
     title: String? = null,
     showNavigationIcon: Boolean = false,
     actionImageVector: ImageVector? = null,
     onActionClicked: () -> Unit = {},
     onBackClick: () -> Unit = {},
 ) {
     TopAppBar(
+        modifier = modifier
+            .shadow(elevation = elevation),
         title = {
             if (title != null) {
                 Text(
                     text = title,
-                    style = MaterialTheme.typography.headlineSmall.copy(
+                    style = MaterialTheme.typography.titleSmall.copy(
                         color = MaterialTheme.colorScheme.onSurface,
                     ),
                     maxLines = 1,
@@ -67,13 +74,13 @@ fun TvManiacTopBar(
                     painter = painterResource(R.drawable.ic_baseline_arrow_back_24),
                     contentDescription = null,
                     colorFilter = ColorFilter.tint(color = MaterialTheme.colorScheme.onSurface),
-                    modifier = modifier
+                    modifier = Modifier
                         .clickable(onClick = onBackClick)
                         .padding(16.dp),
                 )
             }
         },
-        backgroundColor = backgroundColor,
+        colors = colors,
         actions = {
             if (actionImageVector != null) {
                 IconButton(
@@ -90,6 +97,7 @@ fun TvManiacTopBar(
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun CollapsableAppBar(
     title: String?,
@@ -118,25 +126,21 @@ fun CollapsableAppBar(
     TopAppBar(
         title = {
             Crossfade(
-                showAppBarBackground && title != null,
+                targetState = showAppBarBackground && title != null,
                 label = "titleAnimation",
             ) { show ->
                 if (show) {
                     Text(
-                        text = title!!,
-                        style = MaterialTheme.typography.headlineSmall.copy(
+                        text = title ?: "",
+                        style = MaterialTheme.typography.titleMedium.copy(
                             color = MaterialTheme.colorScheme.onSurface,
                         ),
                         maxLines = 1,
                         overflow = TextOverflow.Ellipsis,
-                        fontWeight = FontWeight.Bold,
                     )
                 }
             }
         },
-        contentPadding = WindowInsets.systemBars
-            .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top)
-            .asPaddingValues(),
         navigationIcon = {
             IconButton(
                 onClick = onNavIconPressed,
@@ -149,12 +153,19 @@ fun CollapsableAppBar(
                 )
             }
         },
-        elevation = elevation,
-        backgroundColor = backgroundColor,
-        modifier = modifier,
+        colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+            containerColor = backgroundColor,
+        ),
+        modifier = modifier
+            .windowInsetsPadding(
+                WindowInsets.systemBars
+                    .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top),
+            )
+            .shadow(elevation = elevation),
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @ThemePreviews
 @Composable
 private fun TopBarPreview() {
@@ -166,6 +177,7 @@ private fun TopBarPreview() {
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @ThemePreviews
 @Composable
 private fun TopBarActionPreview() {
@@ -178,6 +190,7 @@ private fun TopBarActionPreview() {
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @ThemePreviews
 @Composable
 private fun TopBarScrimPreview() {

diff --git a/android-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/theme/Colors.kt b/android-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/theme/Colors.kt
@@ -11,6 +11,7 @@ import kotlin.math.min
 val green = Color(0xFF00b300)
 
 val md_theme_light_primary = Color(0xFF0049c7)
+val md_theme_light_primaryContainer = Color(0xFFdbe8f8)
 val md_theme_light_onPrimary = Color(0xFFFFFFFF)
 val md_theme_light_secondary = Color(0xFF3947EA)
 val md_theme_light_onSecondary = Color(0xFFFFFFFF)
@@ -22,6 +23,7 @@ val md_theme_light_onSurface = Color(0xFF1F2123)
 val md_theme_light_outline = Color(0xFF1646F7)
 
 val md_theme_dark_primary = Color(0xFF1F2123)
+val md_theme_dark_primaryContainer = Color(0xFF1F2123)
 val md_theme_dark_onPrimary = Color(0xFFE0E0FF)
 val md_theme_dark_secondary = Color(0xFFF7d633)
 val md_theme_dark_onSecondary = Color(0xFFFFFFFF)

diff --git a/android-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/theme/Theme.kt b/android-core/designsystem/src/main/kotlin/com/thomaskioko/tvmaniac/compose/theme/Theme.kt
@@ -11,6 +11,7 @@ import androidx.compose.ui.unit.dp
 private val LightColorScheme = lightColorScheme(
     primary = md_theme_light_primary,
     onPrimary = md_theme_light_onPrimary,
+    primaryContainer = md_theme_light_primaryContainer,
     secondary = md_theme_light_secondary,
     onSecondary = md_theme_light_onSecondary,
     error = md_theme_light_error,
@@ -24,6 +25,7 @@ private val LightColorScheme = lightColorScheme(
 private val DarkColorScheme = darkColorScheme(
     primary = md_theme_dark_primary,
     onPrimary = md_theme_dark_onPrimary,
+    primaryContainer = md_theme_dark_primaryContainer,
     secondary = md_theme_dark_secondary,
     onSecondary = md_theme_dark_onSecondary,
     error = md_theme_dark_error,
@@ -51,8 +53,8 @@ fun TvManiacTheme(
     ) {
         MaterialTheme(
             colorScheme = colorScheme,
+            typography = tvManiacTypography,
             content = content,
-            // TODO:: Add Typography
         )
     }
 }