Merge pull request #46 from kiwicom/material-wrapper

Theming: add MaterialTheme support
kiwicom · Nov 5, 2021 · 2b27ecd · 2b27ecd
2 parents 0124fdb + 037597a
commit 2b27ecd
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 2 deletions.
diff --git a/catalog/build.gradle.kts b/catalog/build.gradle.kts
@@ -89,6 +89,7 @@ dependencies {
     implementation(libs.compose.animation)
     implementation(libs.compose.foundation)
     implementation(libs.compose.layout)
+    implementation(libs.compose.material)
     implementation(libs.compose.materialIconsExtended)
     implementation(libs.compose.navigation)
     implementation(libs.compose.runtime)

diff --git a/catalog/src/main/java/kiwi/orbit/compose/catalog/NavGraph.kt b/catalog/src/main/java/kiwi/orbit/compose/catalog/NavGraph.kt
@@ -5,13 +5,16 @@ import androidx.compose.runtime.remember
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
+import androidx.navigation.compose.dialog
 import androidx.navigation.compose.rememberNavController
 import kiwi.orbit.compose.catalog.screens.AlertScreen
 import kiwi.orbit.compose.catalog.screens.BadgeScreen
 import kiwi.orbit.compose.catalog.screens.ButtonScreen
 import kiwi.orbit.compose.catalog.screens.CardsScreen
 import kiwi.orbit.compose.catalog.screens.CheckboxScreen
 import kiwi.orbit.compose.catalog.screens.ColorsScreen
+import kiwi.orbit.compose.catalog.screens.DialogsMaterialDialog
+import kiwi.orbit.compose.catalog.screens.DialogsScreen
 import kiwi.orbit.compose.catalog.screens.IconsScreen
 import kiwi.orbit.compose.catalog.screens.IllustrationsScreen
 import kiwi.orbit.compose.catalog.screens.MainScreen
@@ -36,6 +39,8 @@ private object MainDestinations {
     const val BUTTON = "button"
     const val CARDS = "cards"
     const val CHECKBOX = "checkbox"
+    const val DIALOGS = "dialogs"
+    const val DIALOGS_MATERIAL_DIALOG = "dialgos_material_dialog"
     const val RADIO = "radio"
     const val STEPPER = "stepper"
     const val SWITCH = "switch"
@@ -89,6 +94,15 @@ fun NavGraph(
         composable(MainDestinations.CHECKBOX) {
             CheckboxScreen(actions::navigateUp)
         }
+        composable(MainDestinations.DIALOGS) {
+            DialogsScreen(
+                actions::navigateUp,
+                actions::showDialogsMaterialDialog,
+            )
+        }
+        dialog(MainDestinations.DIALOGS_MATERIAL_DIALOG) {
+            DialogsMaterialDialog(navController)
+        }
         composable(MainDestinations.RADIO) {
             RadioScreen(actions::navigateUp)
         }
@@ -154,6 +168,14 @@ class MainActions(
         navController.navigate(MainDestinations.CHECKBOX)
     }
 
+    fun showDialogs() {
+        navController.navigate(MainDestinations.DIALOGS)
+    }
+
+    fun showDialogsMaterialDialog() {
+        navController.navigate(MainDestinations.DIALOGS_MATERIAL_DIALOG)
+    }
+
     fun showRadio() {
         navController.navigate(MainDestinations.RADIO)
     }

diff --git a/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/DialogsMaterialDialog.kt b/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/DialogsMaterialDialog.kt
@@ -0,0 +1,30 @@
+package kiwi.orbit.compose.catalog.screens
+
+import androidx.compose.material.AlertDialog
+import androidx.compose.runtime.Composable
+import androidx.navigation.NavController
+import kiwi.orbit.compose.ui.controls.Text
+
+@Composable
+fun DialogsMaterialDialog(navController: NavController) {
+    DialogsMaterialDialog(
+        onClose = { navController.popBackStack() },
+    )
+}
+
+@Suppress("Dependency")
+@Composable
+private fun DialogsMaterialDialog(
+    onClose: () -> Unit,
+) {
+    AlertDialog(
+        onDismissRequest = onClose,
+        title = { androidx.compose.material.Text("Title") },
+        text = { androidx.compose.material.Text("Some message.") },
+        confirmButton = {
+            androidx.compose.material.TextButton(onClick = onClose) {
+                Text("Ok")
+            }
+        }
+    )
+}
diff --git a/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/DialogsScreen.kt b/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/DialogsScreen.kt
@@ -0,0 +1,46 @@
+package kiwi.orbit.compose.catalog.screens
+
+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.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import kiwi.orbit.compose.catalog.Screen
+import kiwi.orbit.compose.ui.controls.ButtonPrimary
+import kiwi.orbit.compose.ui.controls.Text
+
+@Composable
+fun DialogsScreen(
+    onUpClick: () -> Unit,
+    onShowMaterialDialog: () -> Unit,
+) {
+    Screen(
+        title = "Dialogs",
+        onUpClick = onUpClick,
+        withBackground = false,
+    ) {
+        Box(
+            Modifier
+                .fillMaxSize()
+                .verticalScroll(rememberScrollState())
+                .padding(it)
+        ) {
+            DialogsScreenInner(onShowMaterialDialog)
+        }
+    }
+}
+
+@Composable
+private fun DialogsScreenInner(
+    onShowMaterialDialog: () -> Unit,
+) {
+    Column(Modifier.padding(16.dp)) {
+        ButtonPrimary(
+            onClick = onShowMaterialDialog,
+        ) { Text("Show Material Dialog") }
+    }
+}
diff --git a/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/MainScreen.kt b/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/MainScreen.kt
@@ -55,6 +55,7 @@ fun MainScreen(
         Triple("Button", { Icon(MaterialIcons.SmartButton, null) }, actions::showButton),
         Triple("Cards / Tiles", { Icon(MaterialIcons.Article, null) }, actions::showCards),
         Triple("Checkbox", { Icon(MaterialIcons.CheckBox, null) }, actions::showCheckbox),
+        Triple("Dialogs", { Icon(Icons.Chat, null) }, actions::showDialogs),
         Triple("Radio", { Icon(Icons.CircleFilled, null) }, actions::showRadio),
         Triple("Stepper", { Icon(Icons.PlusCircle, null) }, actions::showStepper),
         Triple("Switch", { Icon(MaterialIcons.ToggleOn, null) }, actions::showSwitch),

diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/OrbitTheme.kt b/ui/src/main/java/kiwi/orbit/compose/ui/OrbitTheme.kt
@@ -1,6 +1,7 @@
 package kiwi.orbit.compose.ui
 
 import androidx.compose.foundation.LocalIndication
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.ripple.LocalRippleTheme
 import androidx.compose.material.ripple.RippleTheme
 import androidx.compose.material.ripple.rememberRipple
@@ -21,6 +22,7 @@ import kiwi.orbit.compose.ui.foundation.Shapes
 import kiwi.orbit.compose.ui.foundation.Typography
 import kiwi.orbit.compose.ui.foundation.updateColorsFrom
 
+@Suppress("Dependency")
 @Composable
 public fun OrbitTheme(
     colors: Colors = OrbitTheme.colors,
@@ -42,7 +44,13 @@ public fun OrbitTheme(
         LocalIndication provides rippleIndication,
         LocalTypography provides typography,
     ) {
-        ProvideMergedTextStyle(typography.bodyNormal, content = content)
+        MaterialTheme(
+            colors = rememberedColors.toMaterialColors(),
+            typography = typography.toMaterialTypography(),
+            shapes = shapes.toMaterialShapes(),
+        ) {
+            ProvideMergedTextStyle(typography.bodyNormal, content = content)
+        }
     }
 }
 

diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/foundation/Colors.kt b/ui/src/main/java/kiwi/orbit/compose/ui/foundation/Colors.kt
@@ -130,6 +130,24 @@ public class Colors(
         critical = critical,
         isLight = isLight,
     )
+
+    @Suppress("Dependency")
+    internal fun toMaterialColors(): androidx.compose.material.Colors =
+        androidx.compose.material.Colors(
+            primary = primary.main,
+            primaryVariant = primary.strong,
+            secondary = interactive.main,
+            secondaryVariant = interactive.strong,
+            background = surface.background,
+            surface = surface.main,
+            error = critical.main,
+            onPrimary = primary.onMain,
+            onSecondary = interactive.onMain,
+            onBackground = content.normal,
+            onSurface = content.normal,
+            onError = critical.onMain,
+            isLight = isLight,
+        )
 }
 
 @Composable

diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/foundation/Shapes.kt b/ui/src/main/java/kiwi/orbit/compose/ui/foundation/Shapes.kt
@@ -12,6 +12,14 @@ public data class Shapes(
     val small: CornerBasedShape = RoundedCornerShape(4.dp),
     val normal: CornerBasedShape = RoundedCornerShape(6.dp),
     val large: CornerBasedShape = RoundedCornerShape(12.dp),
-)
+) {
+    @Suppress("Dependency")
+    internal fun toMaterialShapes(): androidx.compose.material.Shapes =
+        androidx.compose.material.Shapes(
+            small = small,
+            medium = normal,
+            large = large,
+        )
+}
 
 internal val LocalShapes: ProvidableCompositionLocal<Shapes> = staticCompositionLocalOf { Shapes() }
diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/foundation/Typography.kt b/ui/src/main/java/kiwi/orbit/compose/ui/foundation/Typography.kt
@@ -85,6 +85,24 @@ public data class Typography internal constructor(
         bodyNormal = bodyNormal.withDefaultFontFamily(defaultFontFamily),
         bodySmall = bodySmall.withDefaultFontFamily(defaultFontFamily),
     )
+
+    @Suppress("Dependency")
+    internal fun toMaterialTypography(): androidx.compose.material.Typography =
+        androidx.compose.material.Typography(
+            defaultFontFamily = displayTitle.fontFamily ?: FontFamily.Default,
+            h1 = displayTitle.copy(fontSize = 96.sp),
+            h2 = displayTitle.copy(fontSize = 60.sp),
+            h3 = displayTitle,
+            h4 = title2,
+            h5 = title2,
+            h6 = title3,
+            subtitle1 = title3,
+            subtitle2 = title4,
+            overline = title5,
+            body1 = bodyLarge,
+            body2 = bodyNormal,
+            button = title4,
+        )
 }
 
 private fun TextStyle.withDefaultFontFamily(default: FontFamily): TextStyle {