[Elevation] Remove tonal elevation animations as this interferes with ripple opacities
Test: Existing tests
Relnote: Tonal Elevation no longer animates in different interaction states.
Bug: 299279152
Change-Id: Icdd12f4e11256ea166b3f4808f05228c28442ae7
diff --git a/compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/FloatingActionButtonTest.kt b/compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/FloatingActionButtonTest.kt
index 9dfb619..925e620 100644
--- a/compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/FloatingActionButtonTest.kt
+++ b/compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/FloatingActionButtonTest.kt
@@ -552,7 +552,7 @@
val pressedElevation = 2.dp
val hoveredElevation = 3.dp
val focusedElevation = 4.dp
- lateinit var tonalElevation: State<Dp>
+ var tonalElevation: Dp = Dp.Unspecified
lateinit var shadowElevation: State<Dp>
rule.setMaterialContent(lightColorScheme()) {
@@ -563,12 +563,12 @@
focusedElevation = focusedElevation
)
- tonalElevation = fabElevation.tonalElevation(interactionSource)
+ tonalElevation = fabElevation.tonalElevation()
shadowElevation = fabElevation.shadowElevation(interactionSource)
}
rule.runOnIdle {
- assertThat(tonalElevation.value).isEqualTo(defaultElevation)
+ assertThat(tonalElevation).isEqualTo(defaultElevation)
assertThat(shadowElevation.value).isEqualTo(defaultElevation)
}
@@ -577,7 +577,7 @@
}
rule.runOnIdle {
- assertThat(tonalElevation.value).isEqualTo(pressedElevation)
+ assertThat(tonalElevation).isEqualTo(defaultElevation)
assertThat(shadowElevation.value).isEqualTo(pressedElevation)
}
}
@@ -589,7 +589,7 @@
val pressedElevation = 2.dp
val hoveredElevation = 3.dp
val focusedElevation = 4.dp
- lateinit var tonalElevation: State<Dp>
+ var tonalElevation: Dp = Dp.Unspecified
lateinit var shadowElevation: State<Dp>
rule.setMaterialContent(lightColorScheme()) {
@@ -600,12 +600,12 @@
focusedElevation = focusedElevation
)
- tonalElevation = fabElevation.tonalElevation(interactionSource)
+ tonalElevation = fabElevation.tonalElevation()
shadowElevation = fabElevation.shadowElevation(interactionSource)
}
rule.runOnIdle {
- assertThat(tonalElevation.value).isEqualTo(defaultElevation)
+ assertThat(tonalElevation).isEqualTo(defaultElevation)
assertThat(shadowElevation.value).isEqualTo(defaultElevation)
}
@@ -614,7 +614,7 @@
}
rule.runOnIdle {
- assertThat(tonalElevation.value).isEqualTo(5.dp)
+ assertThat(tonalElevation).isEqualTo(5.dp)
assertThat(shadowElevation.value).isEqualTo(5.dp)
}
}
@@ -626,7 +626,7 @@
var pressedElevation by mutableStateOf(2.dp)
val hoveredElevation = 3.dp
val focusedElevation = 4.dp
- lateinit var tonalElevation: State<Dp>
+ var tonalElevation: Dp = Dp.Unspecified
lateinit var shadowElevation: State<Dp>
rule.setMaterialContent(lightColorScheme()) {
@@ -637,12 +637,12 @@
focusedElevation = focusedElevation
)
- tonalElevation = fabElevation.tonalElevation(interactionSource)
+ tonalElevation = fabElevation.tonalElevation()
shadowElevation = fabElevation.shadowElevation(interactionSource)
}
rule.runOnIdle {
- assertThat(tonalElevation.value).isEqualTo(defaultElevation)
+ assertThat(tonalElevation).isEqualTo(defaultElevation)
assertThat(shadowElevation.value).isEqualTo(defaultElevation)
}
@@ -651,7 +651,7 @@
}
rule.runOnIdle {
- assertThat(tonalElevation.value).isEqualTo(pressedElevation)
+ assertThat(tonalElevation).isEqualTo(defaultElevation)
assertThat(shadowElevation.value).isEqualTo(pressedElevation)
}
@@ -661,7 +661,7 @@
// We are still pressed, so we should now show the updated value for the pressed state
rule.runOnIdle {
- assertThat(tonalElevation.value).isEqualTo(5.dp)
+ assertThat(tonalElevation).isEqualTo(defaultElevation)
assertThat(shadowElevation.value).isEqualTo(5.dp)
}
}
diff --git a/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Button.kt b/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Button.kt
index 88b46ce..259114e 100644
--- a/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Button.kt
+++ b/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Button.kt
@@ -117,7 +117,7 @@
val containerColor = colors.containerColor(enabled).value
val contentColor = colors.contentColor(enabled).value
val shadowElevation = elevation?.shadowElevation(enabled, interactionSource)?.value ?: 0.dp
- val tonalElevation = elevation?.tonalElevation(enabled, interactionSource)?.value ?: 0.dp
+ val tonalElevation = elevation?.tonalElevation(enabled) ?: 0.dp
Surface(
onClick = onClick,
modifier = modifier.semantics { role = Role.Button },
@@ -769,8 +769,7 @@
private val disabledElevation: Dp,
) {
/**
- * Represents the tonal elevation used in a button, depending on its [enabled] state and
- * [interactionSource]. This should typically be the same value as the [shadowElevation].
+ * Represents the tonal elevation used in a button, depending on its [enabled] state.
*
* Tonal elevation is used to apply a color shift to the surface to give the it higher emphasis.
* When surface's color is [ColorScheme.surface], a higher elevation will result in a darker
@@ -779,16 +778,14 @@
* See [shadowElevation] which controls the elevation of the shadow drawn around the button.
*
* @param enabled whether the button is enabled
- * @param interactionSource the [InteractionSource] for this button
*/
- @Composable
- internal fun tonalElevation(enabled: Boolean, interactionSource: InteractionSource): State<Dp> {
- return animateElevation(enabled = enabled, interactionSource = interactionSource)
+ internal fun tonalElevation(enabled: Boolean): Dp {
+ return if (enabled) defaultElevation else disabledElevation
}
/**
* Represents the shadow elevation used in a button, depending on its [enabled] state and
- * [interactionSource]. This should typically be the same value as the [tonalElevation].
+ * [interactionSource].
*
* Shadow elevation is used to apply a shadow around the button to give it higher emphasis.
*
diff --git a/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Card.kt b/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Card.kt
index 8a55fb0..bbec175 100644
--- a/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Card.kt
+++ b/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Card.kt
@@ -86,7 +86,7 @@
shape = shape,
color = colors.containerColor(enabled = true).value,
contentColor = colors.contentColor(enabled = true).value,
- tonalElevation = elevation.tonalElevation(enabled = true, interactionSource = null).value,
+ tonalElevation = elevation.tonalElevation(enabled = true),
shadowElevation = elevation.shadowElevation(enabled = true, interactionSource = null).value,
border = border,
) {
@@ -147,7 +147,7 @@
shape = shape,
color = colors.containerColor(enabled).value,
contentColor = colors.contentColor(enabled).value,
- tonalElevation = elevation.tonalElevation(enabled, interactionSource).value,
+ tonalElevation = elevation.tonalElevation(enabled),
shadowElevation = elevation.shadowElevation(enabled, interactionSource).value,
border = border,
interactionSource = interactionSource,
@@ -564,8 +564,7 @@
private val disabledElevation: Dp
) {
/**
- * Represents the tonal elevation used in a card, depending on its [enabled] state and
- * [interactionSource]. This should typically be the same value as the [shadowElevation].
+ * Represents the tonal elevation used in a card, depending on its [enabled].
*
* Tonal elevation is used to apply a color shift to the surface to give the it higher emphasis.
* When surface's color is [ColorScheme.surface], a higher elevation will result in a darker
@@ -574,22 +573,13 @@
* See [shadowElevation] which controls the elevation of the shadow drawn around the card.
*
* @param enabled whether the card is enabled
- * @param interactionSource the [InteractionSource] for this card
*/
- @Composable
- internal fun tonalElevation(
- enabled: Boolean,
- interactionSource: InteractionSource?
- ): State<Dp> {
- if (interactionSource == null) {
- return remember { mutableStateOf(defaultElevation) }
- }
- return animateElevation(enabled = enabled, interactionSource = interactionSource)
- }
+ internal fun tonalElevation(enabled: Boolean): Dp =
+ if (enabled) defaultElevation else disabledElevation
/**
* Represents the shadow elevation used in a card, depending on its [enabled] state and
- * [interactionSource]. This should typically be the same value as the [tonalElevation].
+ * [interactionSource].
*
* Shadow elevation is used to apply a shadow around the card to give it higher emphasis.
*
diff --git a/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Chip.kt b/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Chip.kt
index 4f00d2c..09096d6 100644
--- a/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Chip.kt
+++ b/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Chip.kt
@@ -1325,7 +1325,7 @@
enabled = enabled,
shape = shape,
color = colors.containerColor(enabled).value,
- tonalElevation = elevation?.tonalElevation(enabled, interactionSource)?.value ?: 0.dp,
+ tonalElevation = elevation?.tonalElevation(enabled) ?: 0.dp,
shadowElevation = elevation?.shadowElevation(enabled, interactionSource)?.value ?: 0.dp,
border = border,
interactionSource = interactionSource,
@@ -1373,7 +1373,7 @@
enabled = enabled,
shape = shape,
color = colors.containerColor(enabled, selected).value,
- tonalElevation = elevation?.tonalElevation(enabled, interactionSource)?.value ?: 0.dp,
+ tonalElevation = elevation?.tonalElevation(enabled) ?: 0.dp,
shadowElevation = elevation?.shadowElevation(enabled, interactionSource)?.value ?: 0.dp,
border = border,
interactionSource = interactionSource,
@@ -1454,8 +1454,7 @@
private val disabledElevation: Dp
) {
/**
- * Represents the tonal elevation used in a chip, depending on its [enabled] state and
- * [interactionSource]. This should typically be the same value as the [shadowElevation].
+ * Represents the tonal elevation used in a chip, depending on its [enabled] state.
*
* Tonal elevation is used to apply a color shift to the surface to give the it higher emphasis.
* When surface's color is [ColorScheme.surface], a higher elevation will result in a darker
@@ -1464,19 +1463,14 @@
* See [shadowElevation] which controls the elevation of the shadow drawn around the chip.
*
* @param enabled whether the chip is enabled
- * @param interactionSource the [InteractionSource] for this chip
*/
- @Composable
- internal fun tonalElevation(
- enabled: Boolean,
- interactionSource: InteractionSource
- ): State<Dp> {
- return animateElevation(enabled = enabled, interactionSource = interactionSource)
+ internal fun tonalElevation(enabled: Boolean): Dp {
+ return if (enabled) elevation else disabledElevation
}
/**
* Represents the shadow elevation used in a chip, depending on its [enabled] state and
- * [interactionSource]. This should typically be the same value as the [tonalElevation].
+ * [interactionSource].
*
* Shadow elevation is used to apply a shadow around the chip to give it higher emphasis.
*
@@ -1617,8 +1611,7 @@
val disabledElevation: Dp
) {
/**
- * Represents the tonal elevation used in a chip, depending on [enabled] and
- * [interactionSource]. This should typically be the same value as the [shadowElevation].
+ * Represents the tonal elevation used in a chip, depending on [enabled].
*
* Tonal elevation is used to apply a color shift to the surface to give the it higher emphasis.
* When surface's color is [ColorScheme.surface], a higher elevation will result in a darker
@@ -1627,19 +1620,14 @@
* See [shadowElevation] which controls the elevation of the shadow drawn around the Chip.
*
* @param enabled whether the chip is enabled
- * @param interactionSource the [InteractionSource] for this chip
*/
- @Composable
- internal fun tonalElevation(
- enabled: Boolean,
- interactionSource: InteractionSource
- ): State<Dp> {
- return animateElevation(enabled = enabled, interactionSource = interactionSource)
+ internal fun tonalElevation(enabled: Boolean): Dp {
+ return if (enabled) elevation else disabledElevation
}
/**
* Represents the shadow elevation used in a chip, depending on [enabled] and
- * [interactionSource]. This should typically be the same value as the [tonalElevation].
+ * [interactionSource].
*
* Shadow elevation is used to apply a shadow around the surface to give it higher emphasis.
*
diff --git a/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/FloatingActionButton.kt b/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/FloatingActionButton.kt
index ae586c8..dd8ce60 100644
--- a/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/FloatingActionButton.kt
+++ b/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/FloatingActionButton.kt
@@ -108,7 +108,7 @@
shape = shape,
color = containerColor,
contentColor = contentColor,
- tonalElevation = elevation.tonalElevation(interactionSource = interactionSource).value,
+ tonalElevation = elevation.tonalElevation(),
shadowElevation = elevation.shadowElevation(interactionSource = interactionSource).value,
interactionSource = interactionSource,
) {
@@ -496,9 +496,8 @@
return animateElevation(interactionSource = interactionSource)
}
- @Composable
- internal fun tonalElevation(interactionSource: InteractionSource): State<Dp> {
- return animateElevation(interactionSource = interactionSource)
+ internal fun tonalElevation(): Dp {
+ return defaultElevation
}
@Composable
