Skip to content

Commit 49ddbbd

Browse files
AnkitGerrit Code Review
Ankit
authored and
Gerrit Code Review
committed
Merge "Updated ToggleButton and ToggleControls for M3" into androidx-main
2 parents 474edff + 10a7b7a commit 49ddbbd

File tree

16 files changed

+189
-78
lines changed

16 files changed

+189
-78
lines changed

Diff for: ‎wear/compose/compose-material-core/src/androidTest/kotlin/androidx/wear/compose/materialcore/ToggleButtonTest.kt

+2
Original file line numberDiff line numberDiff line change
@@ -1123,6 +1123,8 @@ private fun ToggleButtonWithDefaults(
11231123
toggleControlWidth = selectionControlWidth,
11241124
toggleControlHeight = selectionControlHeight,
11251125
labelSpacerSize = 0.dp,
1126+
toggleControlSpacing = 6.dp,
1127+
iconSpacing = 6.dp,
11261128
ripple = EmptyIndication,
11271129
)
11281130

Diff for: ‎wear/compose/compose-material-core/src/main/java/androidx/wear/compose/materialcore/ToggleButton.kt

+9-4
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,8 @@ fun ToggleButton(
189189
toggleControlWidth: Dp,
190190
toggleControlHeight: Dp,
191191
labelSpacerSize: Dp,
192+
toggleControlSpacing: Dp,
193+
iconSpacing: Dp,
192194
ripple: Indication
193195
) {
194196
// One and only one of toggleControl and selectionControl should be provided.
@@ -232,15 +234,18 @@ fun ToggleButton(
232234
.padding(contentPadding),
233235
verticalAlignment = Alignment.CenterVertically
234236
) {
235-
ToggleButtonIcon(content = icon)
237+
ToggleButtonIcon(
238+
spacerSize = iconSpacing,
239+
content = icon
240+
)
236241
Labels(
237242
label = label,
238243
secondaryLabel = secondaryLabel,
239244
spacerSize = labelSpacerSize
240245
)
241246
Spacer(
242247
modifier = Modifier.size(
243-
TOGGLE_CONTROL_SPACING
248+
toggleControlSpacing
244249
)
245250
)
246251
ToggleControl(
@@ -413,14 +418,15 @@ fun SplitToggleButton(
413418

414419
@Composable
415420
private fun ToggleButtonIcon(
421+
spacerSize: Dp,
416422
content: @Composable (BoxScope.() -> Unit)? = null
417423
) {
418424
if (content != null) {
419425
Box(
420426
modifier = Modifier.wrapContentSize(align = Alignment.Center),
421427
content = content
422428
)
423-
Spacer(modifier = Modifier.size(ICON_SPACING))
429+
Spacer(modifier = Modifier.size(spacerSize))
424430
}
425431
}
426432

@@ -472,5 +478,4 @@ private fun PaddingValues.splitHorizontally() =
472478
)
473479

474480
private val TOGGLE_CONTROL_SPACING = 4.dp
475-
private val ICON_SPACING = 6.dp
476481
private val SPLIT_WIDTH = 52.dp

Diff for: ‎wear/compose/compose-material/src/main/java/androidx/wear/compose/material/SelectableChip.kt

+4
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,8 @@ public fun SelectableChip(
156156
toggleControlHeight = SELECTABLE_CONTROL_HEIGHT,
157157
toggleControlWidth = SELECTABLE_CONTROL_WIDTH,
158158
labelSpacerSize = 0.dp,
159+
toggleControlSpacing = TOGGLE_CONTROL_SPACING,
160+
iconSpacing = ICON_SPACING,
159161
ripple = rippleOrFallbackImplementation()
160162
)
161163

@@ -831,3 +833,5 @@ private class DefaultSplitSelectableChipColors(
831833

832834
private val SELECTABLE_CONTROL_HEIGHT = 24.dp
833835
private val SELECTABLE_CONTROL_WIDTH = 24.dp
836+
private val TOGGLE_CONTROL_SPACING = 4.dp
837+
private val ICON_SPACING = 6.dp

Diff for: ‎wear/compose/compose-material/src/main/java/androidx/wear/compose/material/ToggleChip.kt

+4
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,8 @@ public fun ToggleChip(
158158
toggleControlHeight = TOGGLE_CONTROL_HEIGHT,
159159
toggleControlWidth = TOGGLE_CONTROL_WIDTH,
160160
labelSpacerSize = 0.dp,
161+
toggleControlSpacing = TOGGLE_CONTROL_SPACING,
162+
iconSpacing = ICON_SPACING,
161163
ripple = rippleOrFallbackImplementation()
162164
)
163165

@@ -1066,3 +1068,5 @@ private class DefaultSplitToggleChipColors(
10661068

10671069
private val TOGGLE_CONTROL_HEIGHT = 24.dp
10681070
private val TOGGLE_CONTROL_WIDTH = 24.dp
1071+
private val TOGGLE_CONTROL_SPACING = 4.dp
1072+
private val ICON_SPACING = 6.dp

Diff for: ‎wear/compose/compose-material3/api/current.txt

+2-2
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ package androidx.wear.compose.material3 {
131131
}
132132

133133
public final class CheckboxDefaults {
134-
method @androidx.compose.runtime.Composable public androidx.wear.compose.material3.CheckboxColors colors(optional long checkedBoxColor, optional long checkedCheckmarkColor, optional long uncheckedBoxColor, optional long uncheckedCheckmarkColor);
134+
method @androidx.compose.runtime.Composable public androidx.wear.compose.material3.CheckboxColors colors(optional long checkedBoxColor, optional long checkedCheckmarkColor, optional long uncheckedBoxColor, optional long uncheckedCheckmarkColor, optional long disabledCheckedBoxColor, optional long disabledCheckedCheckmarkColor, optional long disabledUncheckedBoxColor, optional long disabledUncheckedCheckmarkColor);
135135
field public static final androidx.wear.compose.material3.CheckboxDefaults INSTANCE;
136136
}
137137

@@ -440,7 +440,7 @@ package androidx.wear.compose.material3 {
440440
}
441441

442442
public final class RadioDefaults {
443-
method @androidx.compose.runtime.Composable public androidx.wear.compose.material3.RadioColors colors(optional long selectedColor, optional long unselectedColor);
443+
method @androidx.compose.runtime.Composable public androidx.wear.compose.material3.RadioColors colors(optional long selectedColor, optional long unselectedColor, optional long disabledSelectedColor, optional long disabledUnselectedColor);
444444
field public static final androidx.wear.compose.material3.RadioDefaults INSTANCE;
445445
}
446446

Diff for: ‎wear/compose/compose-material3/api/restricted_current.txt

+2-2
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ package androidx.wear.compose.material3 {
131131
}
132132

133133
public final class CheckboxDefaults {
134-
method @androidx.compose.runtime.Composable public androidx.wear.compose.material3.CheckboxColors colors(optional long checkedBoxColor, optional long checkedCheckmarkColor, optional long uncheckedBoxColor, optional long uncheckedCheckmarkColor);
134+
method @androidx.compose.runtime.Composable public androidx.wear.compose.material3.CheckboxColors colors(optional long checkedBoxColor, optional long checkedCheckmarkColor, optional long uncheckedBoxColor, optional long uncheckedCheckmarkColor, optional long disabledCheckedBoxColor, optional long disabledCheckedCheckmarkColor, optional long disabledUncheckedBoxColor, optional long disabledUncheckedCheckmarkColor);
135135
field public static final androidx.wear.compose.material3.CheckboxDefaults INSTANCE;
136136
}
137137

@@ -440,7 +440,7 @@ package androidx.wear.compose.material3 {
440440
}
441441

442442
public final class RadioDefaults {
443-
method @androidx.compose.runtime.Composable public androidx.wear.compose.material3.RadioColors colors(optional long selectedColor, optional long unselectedColor);
443+
method @androidx.compose.runtime.Composable public androidx.wear.compose.material3.RadioColors colors(optional long selectedColor, optional long unselectedColor, optional long disabledSelectedColor, optional long disabledUnselectedColor);
444444
field public static final androidx.wear.compose.material3.RadioDefaults INSTANCE;
445445
}
446446

Diff for: ‎wear/compose/compose-material3/src/androidTest/kotlin/androidx/wear/compose/material3/RadioButtonScreenshotTest.kt

+8-1
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,13 @@
1717
package androidx.wear.compose.material3
1818

1919
import android.os.Build
20+
import androidx.compose.foundation.background
21+
import androidx.compose.foundation.layout.Box
2022
import androidx.compose.runtime.Composable
2123
import androidx.compose.runtime.CompositionLocalProvider
2224
import androidx.compose.testutils.assertAgainstGolden
2325
import androidx.compose.ui.Modifier
26+
import androidx.compose.ui.graphics.Color
2427
import androidx.compose.ui.platform.LocalLayoutDirection
2528
import androidx.compose.ui.platform.testTag
2629
import androidx.compose.ui.test.captureToImage
@@ -229,7 +232,11 @@ class RadioButtonScreenshotTest {
229232
) {
230233
rule.setContentWithTheme {
231234
CompositionLocalProvider(LocalLayoutDirection provides layoutDirection) {
232-
content()
235+
Box(
236+
modifier = Modifier.background(Color.Black)
237+
) {
238+
content()
239+
}
233240
}
234241
}
235242

Diff for: ‎wear/compose/compose-material3/src/androidTest/kotlin/androidx/wear/compose/material3/RadioButtonTest.kt

+11-2
Original file line numberDiff line numberDiff line change
@@ -543,12 +543,21 @@ class RadioButtonTest {
543543
}
544544

545545
@Test
546-
fun radio_button_height_defaults_52dp() {
546+
fun radio_button_height_defaults_52dp_with_secondary_label() {
547547
rule.setContentWithThemeForSizeAssertions {
548-
RadioButtonWithDefaults()
548+
RadioButtonWithDefaults(
549+
secondaryLabel = { Text("Secondary label") }
550+
)
549551
}.assertHeightIsEqualTo(52.dp)
550552
}
551553

554+
@Test
555+
fun radio_button_height_defaults_48dp_without_secondary_label() {
556+
rule.setContentWithThemeForSizeAssertions {
557+
RadioButtonWithDefaults()
558+
}.assertHeightIsEqualTo(48.dp)
559+
}
560+
552561
@Test
553562
fun split_radio_button_height_defaults_52dp() {
554563
rule.setContentWithThemeForSizeAssertions {

Diff for: ‎wear/compose/compose-material3/src/androidTest/kotlin/androidx/wear/compose/material3/ToggleButtonScreenshotTest.kt

+8-1
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,13 @@
1717
package androidx.wear.compose.material3
1818

1919
import android.os.Build
20+
import androidx.compose.foundation.background
21+
import androidx.compose.foundation.layout.Box
2022
import androidx.compose.runtime.Composable
2123
import androidx.compose.runtime.CompositionLocalProvider
2224
import androidx.compose.testutils.assertAgainstGolden
2325
import androidx.compose.ui.Modifier
26+
import androidx.compose.ui.graphics.Color
2427
import androidx.compose.ui.platform.LocalLayoutDirection
2528
import androidx.compose.ui.platform.testTag
2629
import androidx.compose.ui.test.captureToImage
@@ -422,7 +425,11 @@ class ToggleButtonScreenshotTest {
422425
) {
423426
rule.setContentWithTheme {
424427
CompositionLocalProvider(LocalLayoutDirection provides layoutDirection) {
425-
content()
428+
Box(
429+
modifier = Modifier.background(Color.Black)
430+
) {
431+
content()
432+
}
426433
}
427434
}
428435

Diff for: ‎wear/compose/compose-material3/src/androidTest/kotlin/androidx/wear/compose/material3/ToggleButtonTest.kt

+58-23
Original file line numberDiff line numberDiff line change
@@ -515,12 +515,21 @@ class ToggleButtonTest {
515515
}
516516

517517
@Test
518-
fun toggle_button_height_defaults_52dp() {
518+
fun toggle_button_height_defaults_52dp_with_secondary_label() {
519519
rule.setContentWithThemeForSizeAssertions {
520-
ToggleButtonWithDefaults()
520+
ToggleButtonWithDefaults(
521+
secondaryLabel = { Text("Secondary label") }
522+
)
521523
}.assertHeightIsEqualTo(52.dp)
522524
}
523525

526+
@Test
527+
fun toggle_button_height_defaults_48dp_without_secondary_label() {
528+
rule.setContentWithThemeForSizeAssertions {
529+
ToggleButtonWithDefaults()
530+
}.assertHeightIsEqualTo(48.dp)
531+
}
532+
524533
@Test
525534
fun split_toggle_button_height_defaults_52dp() {
526535
rule.setContentWithThemeForSizeAssertions {
@@ -726,15 +735,11 @@ private fun ComposeContentTestRule.verifyToggleButtonColors(
726735
var actualIconColor = Color.Transparent
727736
var actualSecondaryLabelColor = Color.Transparent
728737
setContentWithTheme {
729-
expectedContainerColor = toggle_button_container_color(checked)
730-
.withDisabledAlphaApplied(enabled = enabled)
738+
expectedContainerColor = toggle_button_container_color(checked, enabled)
731739
.compositeOver(testBackgroundColor)
732-
expectedLabelColor = toggle_button_content_color(checked)
733-
.withDisabledAlphaApplied(enabled = enabled)
734-
expectedSecondaryLabelColor = toggle_button_secondary_label_color(checked)
735-
.withDisabledAlphaApplied(enabled = enabled)
736-
expectedIconColor = toggle_button_icon_color(checked)
737-
.withDisabledAlphaApplied(enabled = enabled)
740+
expectedLabelColor = toggle_button_content_color(checked, enabled)
741+
expectedSecondaryLabelColor = toggle_button_secondary_label_color(checked, enabled)
742+
expectedIconColor = toggle_button_icon_color(enabled)
738743
Box(
739744
Modifier
740745
.fillMaxSize()
@@ -776,12 +781,12 @@ private fun ComposeContentTestRule.verifySplitToggleButtonColors(
776781
var actualLabelColor = Color.Transparent
777782
var actualSecondaryLabelColor = Color.Transparent
778783
setContentWithTheme {
779-
expectedContainerColor = toggle_button_container_color(checked)
784+
expectedContainerColor = split_toggle_button_container_color(checked)
780785
.withDisabledAlphaApplied(enabled = enabled)
781786
.compositeOver(testBackgroundColor)
782-
expectedLabelColor = toggle_button_content_color(checked)
787+
expectedLabelColor = split_toggle_button_content_color(checked)
783788
.withDisabledAlphaApplied(enabled = enabled)
784-
expectedSecondaryLabelColor = toggle_button_secondary_label_color(checked)
789+
expectedSecondaryLabelColor = split_toggle_button_secondary_label_color(checked)
785790
.withDisabledAlphaApplied(enabled = enabled)
786791
Box(
787792
Modifier
@@ -813,34 +818,64 @@ private fun ComposeContentTestRule.verifySplitToggleButtonColors(
813818

814819
@Composable
815820
private fun toggle_button_container_color(
816-
checked: Boolean
821+
checked: Boolean,
822+
enabled: Boolean,
817823
): Color {
818-
return if (checked) MaterialTheme.colorScheme.primaryContainer
819-
else MaterialTheme.colorScheme.surfaceContainer
824+
return if (checked && enabled) MaterialTheme.colorScheme.primaryContainer
825+
else if (!checked && enabled) MaterialTheme.colorScheme.surfaceContainer
826+
else MaterialTheme.colorScheme.onSurface.toDisabledColor(disabledAlpha = 0.12f)
820827
}
821828

822829
@Composable
823830
private fun toggle_button_content_color(
824-
checked: Boolean
831+
checked: Boolean,
832+
enabled: Boolean
825833
): Color {
826-
return if (checked) MaterialTheme.colorScheme.onPrimaryContainer
827-
else MaterialTheme.colorScheme.onSurface
834+
return if (checked && enabled) MaterialTheme.colorScheme.onPrimaryContainer
835+
else if (!checked && enabled) MaterialTheme.colorScheme.onSurface
836+
else MaterialTheme.colorScheme.onSurface.toDisabledColor(disabledAlpha = 0.38f)
828837
}
829838

830839
@Composable
831840
private fun toggle_button_secondary_label_color(
832-
checked: Boolean
841+
checked: Boolean,
842+
enabled: Boolean
833843
): Color {
834-
return if (checked) MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 0.8f)
835-
else MaterialTheme.colorScheme.onSurfaceVariant
844+
return if (checked && enabled) MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 0.8f)
845+
else if (!checked && enabled) MaterialTheme.colorScheme.onSurfaceVariant
846+
else MaterialTheme.colorScheme.onSurface.toDisabledColor(disabledAlpha = 0.38f)
836847
}
837848

838849
@Composable
839850
private fun toggle_button_icon_color(
851+
enabled: Boolean
852+
): Color {
853+
return if (enabled) MaterialTheme.colorScheme.primary
854+
else MaterialTheme.colorScheme.onSurface.toDisabledColor(disabledAlpha = 0.38f)
855+
}
856+
857+
@Composable
858+
private fun split_toggle_button_container_color(
859+
checked: Boolean
860+
): Color {
861+
return if (checked) MaterialTheme.colorScheme.primaryContainer
862+
else MaterialTheme.colorScheme.surfaceContainer
863+
}
864+
865+
@Composable
866+
private fun split_toggle_button_content_color(
840867
checked: Boolean
841868
): Color {
842869
return if (checked) MaterialTheme.colorScheme.onPrimaryContainer
843-
else MaterialTheme.colorScheme.primary
870+
else MaterialTheme.colorScheme.onSurface
871+
}
872+
873+
@Composable
874+
private fun split_toggle_button_secondary_label_color(
875+
checked: Boolean
876+
): Color {
877+
return if (checked) MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 0.8f)
878+
else MaterialTheme.colorScheme.onSurfaceVariant
844879
}
845880

846881
@Composable

Diff for: ‎wear/compose/compose-material3/src/main/java/androidx/wear/compose/material3/RadioButton.kt

+13-6
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,10 @@ fun RadioButton(
132132
// Stadium/Pill shaped toggle button
133133
Row(
134134
modifier = modifier
135-
.defaultMinSize(minHeight = MIN_HEIGHT)
135+
.defaultMinSize(
136+
minHeight = if (secondaryLabel == null) MIN_HEIGHT_WITHOUT_SECONDARY_LABEL
137+
else MIN_HEIGHT
138+
)
136139
.height(IntrinsicSize.Min)
137140
.width(IntrinsicSize.Max)
138141
.clip(shape = shape)
@@ -514,7 +517,7 @@ object RadioButtonDefaults {
514517

515518
internal val LabelSpacerSize = 2.dp
516519
private val HorizontalPadding = 14.dp
517-
private val VerticalPadding = 6.dp
520+
private val VerticalPadding = 8.dp
518521

519522
/**
520523
* The default content padding used by [RadioButton]
@@ -542,20 +545,23 @@ object RadioButtonDefaults {
542545
unselectedIconColor = fromToken(RadioButtonTokens.UnselectedIconColor),
543546
disabledSelectedContainerColor =
544547
fromToken(RadioButtonTokens.DisabledSelectedContainerColor)
545-
.toDisabledColor(disabledAlpha = RadioButtonTokens.DisabledOpacity),
548+
.toDisabledColor(
549+
disabledAlpha = RadioButtonTokens.DisabledSelectedContainerOpacity
550+
),
546551
disabledSelectedContentColor =
547552
fromToken(RadioButtonTokens.DisabledSelectedContentColor)
548553
.toDisabledColor(disabledAlpha = RadioButtonTokens.DisabledOpacity),
549554
disabledSelectedSecondaryContentColor =
550555
fromToken(RadioButtonTokens.DisabledSelectedSecondaryLabelColor)
551-
.copy(alpha = RadioButtonTokens.DisabledSelectedSecondaryLabelOpacity)
552556
.toDisabledColor(disabledAlpha = RadioButtonTokens.DisabledOpacity),
553557
disabledSelectedIconColor =
554558
fromToken(RadioButtonTokens.DisabledSelectedIconColor)
555559
.toDisabledColor(disabledAlpha = RadioButtonTokens.DisabledOpacity),
556560
disabledUnselectedContainerColor =
557561
fromToken(RadioButtonTokens.DisabledUnselectedContainerColor)
558-
.toDisabledColor(disabledAlpha = RadioButtonTokens.DisabledOpacity),
562+
.toDisabledColor(
563+
disabledAlpha = RadioButtonTokens.DisabledUnselectedContainerOpacity
564+
),
559565
disabledUnselectedContentColor =
560566
fromToken(RadioButtonTokens.DisabledUnselectedContentColor)
561567
.toDisabledColor(disabledAlpha = RadioButtonTokens.DisabledOpacity),
@@ -1123,7 +1129,8 @@ private val COLOR_ANIMATION_SPEC: AnimationSpec<Color> =
11231129
tween(MotionTokens.DurationMedium1, 0, MotionTokens.EasingStandardDecelerate)
11241130
private val SELECTION_CONTROL_WIDTH = 32.dp
11251131
private val SELECTION_CONTROL_HEIGHT = 24.dp
1126-
private val SELECTION_CONTROL_SPACING = 4.dp
1132+
private val SELECTION_CONTROL_SPACING = 6.dp
11271133
private val ICON_SPACING = 6.dp
11281134
private val MIN_HEIGHT = 52.dp
1135+
private val MIN_HEIGHT_WITHOUT_SECONDARY_LABEL = 48.dp
11291136
private val SPLIT_WIDTH = 52.dp

0 commit comments

Comments
 (0)