From 730a646e87a454f17ecf20717dac696f50d71a70 Mon Sep 17 00:00:00 2001 From: Fernando Garcia Date: Tue, 17 Dec 2024 19:34:09 +0100 Subject: [PATCH] ANDROID-14792 Update. Compose UI version and migrate errors from updating --- build.gradle | 2 +- catalog/build.gradle | 1 + library/build.gradle | 1 + .../mistica/compose/button/Button.kt | 6 ++- .../mistica/compose/button/ButtonStyles.kt | 42 +++++++++---------- .../card/highlightedcard/HighLightedCard.kt | 2 +- .../mistica/compose/input/CheckBoxInput.kt | 33 ++++++--------- 7 files changed, 40 insertions(+), 47 deletions(-) diff --git a/build.gradle b/build.gradle index f2f43594d..381cf29cf 100644 --- a/build.gradle +++ b/build.gradle @@ -3,7 +3,7 @@ buildscript { ext { min_sdk_version = 24 target_sdk_version = 34 - compose_ui_version = "1.5.4" + compose_ui_version = "1.7.6" compose_compiler_version = '1.5.7' kotlin_version = "1.9.21" androidx_appcompat_version = "1.6.0" diff --git a/catalog/build.gradle b/catalog/build.gradle index a30d22b5c..a15b432e4 100644 --- a/catalog/build.gradle +++ b/catalog/build.gradle @@ -56,6 +56,7 @@ dependencies { implementation 'androidx.activity:activity-compose:1.4.0' implementation "androidx.navigation:navigation-compose:2.5.3" implementation "androidx.compose.material:material:$compose_ui_version" + implementation("androidx.compose.material:material-icons-extended:$compose_ui_version") implementation "androidx.compose.ui:ui:$compose_ui_version" implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version" diff --git a/library/build.gradle b/library/build.gradle index 7a9ba0504..000f1bae3 100644 --- a/library/build.gradle +++ b/library/build.gradle @@ -83,6 +83,7 @@ dependencies { implementation "androidx.constraintlayout:constraintlayout-compose:$constraintComposeVersion" implementation "androidx.compose.material:material:$compose_ui_version" + implementation("androidx.compose.material:material-icons-extended:$compose_ui_version") implementation "androidx.compose.ui:ui:$compose_ui_version" implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version" diff --git a/library/src/main/java/com/telefonica/mistica/compose/button/Button.kt b/library/src/main/java/com/telefonica/mistica/compose/button/Button.kt index dc17064fe..821bc8124 100644 --- a/library/src/main/java/com/telefonica/mistica/compose/button/Button.kt +++ b/library/src/main/java/com/telefonica/mistica/compose/button/Button.kt @@ -22,9 +22,10 @@ import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.ButtonDefaults import androidx.compose.material.CircularProgressIndicator import androidx.compose.material.ContentAlpha +import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.LocalContentAlpha +import androidx.compose.material.LocalRippleConfiguration import androidx.compose.material.Text -import androidx.compose.material.ripple.LocalRippleTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.getValue @@ -55,6 +56,7 @@ private val iconSpacing = 10.dp private val easing = CubicBezierEasing(0.77f, 0f, 0.175f, 1f) private const val CHEVRON_ASPECT_RATIO = 8f / 20f +@OptIn(ExperimentalMaterialApi::class) @Composable fun Button( modifier: Modifier = Modifier, @@ -78,7 +80,7 @@ fun Button( var originalWidth: Dp? by remember { mutableStateOf(null) } - CompositionLocalProvider(LocalRippleTheme provides style.rippleTheme) { + CompositionLocalProvider(LocalRippleConfiguration provides style.rippleConfiguration) { androidx.compose.material.Button( modifier = modifier .defaultMinSize(size.minWidth, size.height) diff --git a/library/src/main/java/com/telefonica/mistica/compose/button/ButtonStyles.kt b/library/src/main/java/com/telefonica/mistica/compose/button/ButtonStyles.kt index 484abbae5..825842ec3 100644 --- a/library/src/main/java/com/telefonica/mistica/compose/button/ButtonStyles.kt +++ b/library/src/main/java/com/telefonica/mistica/compose/button/ButtonStyles.kt @@ -1,11 +1,15 @@ +@file:OptIn(ExperimentalMaterialApi::class) // Required for RippleConfiguration usage + package com.telefonica.mistica.compose.button import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.material.ButtonColors import androidx.compose.material.ButtonDefaults +import androidx.compose.material.ExperimentalMaterialApi +import androidx.compose.material.RippleConfiguration +import androidx.compose.material.RippleDefaults import androidx.compose.material.ripple.RippleAlpha -import androidx.compose.material.ripple.RippleTheme import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.dimensionResource @@ -18,21 +22,12 @@ internal class ButtonStyleConfig( val disabledTextColor: Color = textColor, val border: BorderStroke? = null, val disabledBorder: BorderStroke? = null, - val rippleTheme: MisticaRippleTheme + val rippleConfiguration: RippleConfiguration, ) -class MisticaRippleTheme( - private val color: Color, - private val alpha: RippleAlpha? = null -) : RippleTheme { - - @Composable - override fun defaultColor(): Color = color - - @Composable - override fun rippleAlpha(): RippleAlpha = alpha ?: RippleTheme.defaultRippleAlpha(color, !isSystemInDarkTheme()) - -} +@Composable +private fun getMisticaRippleConfiguration(color: Color, alpha: RippleAlpha? = null) = + RippleConfiguration(color, alpha ?: RippleDefaults.rippleAlpha(color, !isSystemInDarkTheme())) @Composable @Suppress("CyclomaticComplexMethod") @@ -65,12 +60,12 @@ private fun primary( ), textColor: Color = MisticaTheme.colors.textButtonPrimary, disabledTextColor: Color = textColor.disabled(), - rippleTheme: MisticaRippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonPrimaryBackgroundPressed), + rippleConfiguration: RippleConfiguration = getMisticaRippleConfiguration(MisticaTheme.colors.buttonPrimaryBackgroundPressed), ) = ButtonStyleConfig( buttonColors = buttonColors, textColor = textColor, disabledTextColor = disabledTextColor, - rippleTheme = rippleTheme + rippleConfiguration = rippleConfiguration, ) @Composable @@ -81,14 +76,14 @@ private fun primaryInverse() = primary( ), textColor = MisticaTheme.colors.textButtonPrimaryInversePressed, disabledTextColor = MisticaTheme.colors.textButtonPrimaryInverse, - rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonPrimaryBackgroundInversePressed), + rippleConfiguration = getMisticaRippleConfiguration(MisticaTheme.colors.buttonPrimaryBackgroundInversePressed), ) @Composable private fun secondary( textColor: Color = MisticaTheme.colors.textButtonSecondary, strokeColor: Color = MisticaTheme.colors.buttonSecondaryBorder, - rippleTheme: MisticaRippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonSecondaryBackgroundPressed) + rippleConfiguration: RippleConfiguration = getMisticaRippleConfiguration(MisticaTheme.colors.buttonSecondaryBackgroundPressed) ) = ButtonStyleConfig( buttonColors = ButtonDefaults.outlinedButtonColors( backgroundColor = Color.Transparent, @@ -105,15 +100,16 @@ private fun secondary( dimensionResource(R.dimen.button_outline_stroke_width), strokeColor.disabled() ), - rippleTheme = rippleTheme + rippleConfiguration = rippleConfiguration ) + @Composable private fun secondaryInverseConfig() = secondary( textColor = MisticaTheme.colors.textButtonSecondaryInverse, strokeColor = MisticaTheme.colors.buttonSecondaryBorderInverse, - rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonSecondaryBackgroundInversePressed) + rippleConfiguration = getMisticaRippleConfiguration(MisticaTheme.colors.buttonSecondaryBackgroundInversePressed) ) @Composable @@ -122,7 +118,7 @@ private fun danger() = primary( backgroundColor = MisticaTheme.colors.buttonDangerBackground, disabledBackgroundColor = MisticaTheme.colors.buttonDangerBackground.disabled() ), - rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonDangerBackgroundPressed) + rippleConfiguration = getMisticaRippleConfiguration(MisticaTheme.colors.buttonDangerBackgroundPressed) ) @Composable @@ -135,7 +131,7 @@ private fun link( ), textColor = textColor, disabledTextColor = textColor.disabled(), - rippleTheme = MisticaRippleTheme(MisticaTheme.colors.buttonLinkBackgroundPressed), + rippleConfiguration = getMisticaRippleConfiguration(MisticaTheme.colors.buttonLinkBackgroundPressed), ) @Composable @@ -156,7 +152,7 @@ private fun dangerLink( ), textColor = textColor, disabledTextColor = textColor.disabled(), - rippleTheme = MisticaRippleTheme(selectedBackgroundColor), + rippleConfiguration = getMisticaRippleConfiguration(selectedBackgroundColor), ) @Composable diff --git a/library/src/main/java/com/telefonica/mistica/compose/card/highlightedcard/HighLightedCard.kt b/library/src/main/java/com/telefonica/mistica/compose/card/highlightedcard/HighLightedCard.kt index 29065de4c..1d66eac87 100644 --- a/library/src/main/java/com/telefonica/mistica/compose/card/highlightedcard/HighLightedCard.kt +++ b/library/src/main/java/com/telefonica/mistica/compose/card/highlightedcard/HighLightedCard.kt @@ -161,7 +161,7 @@ fun HighLightedCard( onClick = onCloseButton ) { Icon( - imageVector = Icons.Default.Close, + imageVector = Icons.Filled.Close, contentDescription = null, tint = MisticaTheme.colors.neutralHigh ) diff --git a/library/src/main/java/com/telefonica/mistica/compose/input/CheckBoxInput.kt b/library/src/main/java/com/telefonica/mistica/compose/input/CheckBoxInput.kt index c6a4c676d..b06b4fd51 100644 --- a/library/src/main/java/com/telefonica/mistica/compose/input/CheckBoxInput.kt +++ b/library/src/main/java/com/telefonica/mistica/compose/input/CheckBoxInput.kt @@ -6,18 +6,13 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.width import androidx.compose.material.Checkbox import androidx.compose.material.CheckboxDefaults -import androidx.compose.material.ExperimentalMaterialApi -import androidx.compose.material.LocalMinimumInteractiveComponentEnforcement -import androidx.compose.material.LocalMinimumTouchTargetEnforcement import androidx.compose.runtime.Composable -import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.telefonica.mistica.compose.theme.MisticaTheme import com.telefonica.mistica.compose.ui.alpha -@OptIn(ExperimentalMaterialApi::class) @Composable fun CheckBoxInput( text: String, @@ -33,22 +28,20 @@ fun CheckBoxInput( modifier = modifier.alpha(enabled) ) { Row { - CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) { - Checkbox( - checked = checked, - onCheckedChange = onCheckedChange, - enabled = enabled, - colors = CheckboxDefaults.colors( - checkedColor = MisticaTheme.colors.controlActivated, - uncheckedColor = MisticaTheme.colors.control, - disabledColor = if (checked) { - MisticaTheme.colors.controlActivated - } else { - MisticaTheme.colors.control - } - ) + Checkbox( + checked = checked, + onCheckedChange = onCheckedChange, + enabled = enabled, + colors = CheckboxDefaults.colors( + checkedColor = MisticaTheme.colors.controlActivated, + uncheckedColor = MisticaTheme.colors.control, + disabledColor = if (checked) { + MisticaTheme.colors.controlActivated + } else { + MisticaTheme.colors.control + } ) - } + ) Spacer(modifier = Modifier.width(8.dp)) TextWithLinks(text, links) }