PM-15041: Update stepper buttons (#4330)

This commit is contained in:
David Perez 2024-11-19 09:04:41 -06:00 committed by GitHub
parent 95552a7a55
commit da878a9fab
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 69 additions and 3 deletions

View file

@ -0,0 +1,55 @@
package com.x8bit.bitwarden.ui.platform.components.button
import androidx.annotation.DrawableRes
import androidx.compose.material3.FilledIconButton
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.button.color.bitwardenFilledIconButtonColors
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* A filled icon button that displays an icon.
*
* @param vectorIconRes Icon to display on the button.
* @param contentDescription The content description for this icon button.
* @param onClick Callback for when the icon button is clicked.
* @param modifier A [Modifier] for the composable.
* @param isEnabled Whether or not the button should be enabled.
*/
@Composable
fun BitwardenFilledIconButton(
@DrawableRes vectorIconRes: Int,
contentDescription: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
isEnabled: Boolean = true,
) {
FilledIconButton(
modifier = modifier.semantics(mergeDescendants = true) {},
onClick = onClick,
colors = bitwardenFilledIconButtonColors(),
enabled = isEnabled,
) {
Icon(
painter = rememberVectorPainter(id = vectorIconRes),
contentDescription = contentDescription,
)
}
}
@Preview(showBackground = true)
@Composable
private fun BitwardenFilledIconButton_preview() {
BitwardenTheme {
BitwardenFilledIconButton(
vectorIconRes = R.drawable.ic_question_circle,
contentDescription = "Sample Icon",
onClick = {},
)
}
}

View file

@ -5,6 +5,17 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Provides a default set of Bitwarden-styled colors for a filled icon button.
*/
@Composable
fun bitwardenFilledIconButtonColors(): IconButtonColors = IconButtonColors(
containerColor = BitwardenTheme.colorScheme.filledButton.background,
contentColor = BitwardenTheme.colorScheme.filledButton.foreground,
disabledContainerColor = BitwardenTheme.colorScheme.filledButton.backgroundDisabled,
disabledContentColor = BitwardenTheme.colorScheme.filledButton.foregroundDisabled,
)
/** /**
* Provides a default set of Bitwarden-styled colors for a standard icon button. * Provides a default set of Bitwarden-styled colors for a standard icon button.
*/ */

View file

@ -7,7 +7,7 @@ import androidx.compose.ui.text.input.KeyboardType
import com.x8bit.bitwarden.R import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.ZERO_WIDTH_CHARACTER import com.x8bit.bitwarden.ui.platform.base.util.ZERO_WIDTH_CHARACTER
import com.x8bit.bitwarden.ui.platform.base.util.orNullIfBlank import com.x8bit.bitwarden.ui.platform.base.util.orNullIfBlank
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTonalIconButton import com.x8bit.bitwarden.ui.platform.components.button.BitwardenFilledIconButton
import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextFieldWithActions import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextFieldWithActions
/** /**
@ -51,7 +51,7 @@ fun BitwardenStepper(
value = clampedValue?.toString() ?: ZERO_WIDTH_CHARACTER, value = clampedValue?.toString() ?: ZERO_WIDTH_CHARACTER,
actionsTestTag = stepperActionsTestTag, actionsTestTag = stepperActionsTestTag,
actions = { actions = {
BitwardenTonalIconButton( BitwardenFilledIconButton(
vectorIconRes = R.drawable.ic_minus, vectorIconRes = R.drawable.ic_minus,
contentDescription = "\u2212", contentDescription = "\u2212",
onClick = { onClick = {
@ -63,7 +63,7 @@ fun BitwardenStepper(
isEnabled = isDecrementEnabled && !isAtRangeMinimum, isEnabled = isDecrementEnabled && !isAtRangeMinimum,
modifier = Modifier.testTag("DecrementValue"), modifier = Modifier.testTag("DecrementValue"),
) )
BitwardenTonalIconButton( BitwardenFilledIconButton(
vectorIconRes = R.drawable.ic_plus, vectorIconRes = R.drawable.ic_plus,
contentDescription = "+", contentDescription = "+",
onClick = { onClick = {