Updated on 2026-08-14

This commit is contained in:
Tangem 2026-03-16 15:34:48 +05:00
commit 91fd458dca
14 changed files with 251 additions and 271 deletions

View file

@ -34,9 +34,9 @@ fun GhostTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
text = buttonUM.text,
iconRes = buttonUM.iconRes,
iconPosition = buttonUM.iconPosition,
enabled = buttonUM.isEnabled,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
size = buttonUM.size,
state = buttonUM.state,
shape = buttonUM.shape,
)
}
@ -49,9 +49,9 @@ fun GhostTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param enabled Boolean indicating whether the button is enabled.
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
* @param size TangemButtonSize defining the size of the button.
* @param state TangemButtonState defining the current state of the button.
*
[REDACTED_AUTHOR]
*/
@ -61,15 +61,16 @@ fun GhostTangemButton(
modifier: Modifier = Modifier,
text: TextReference? = null,
@DrawableRes iconRes: Int? = null,
enabled: Boolean = true,
isEnabled: Boolean = true,
isLoading: Boolean = false,
size: TangemButtonSize = TangemButtonSize.X15,
state: TangemButtonState = TangemButtonState.Default,
iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
shape: TangemButtonShape = TangemButtonShape.Default,
) {
val contentColor = when (state) {
TangemButtonState.Disabled -> TangemTheme.colors2.text.status.disabled
else -> TangemTheme.colors2.text.neutral.primary
val contentColor = if (isEnabled) {
TangemTheme.colors2.text.neutral.primary
} else {
TangemTheme.colors2.text.status.disabled
}
TangemButtonInternal(
onClick = onClick,
@ -77,9 +78,9 @@ fun GhostTangemButton(
.clip(shape = shape.toShape(size)),
text = text,
contentColor = contentColor,
enabled = enabled,
isEnabled = isEnabled,
isLoading = isLoading,
size = size,
state = state,
iconPosition = iconPosition,
iconRes = iconRes,
)
@ -90,9 +91,10 @@ fun GhostTangemButton(
@Preview(showBackground = true, widthDp = 480)
@Preview(showBackground = true, widthDp = 480, uiMode = Configuration.UI_MODE_NIGHT_YES)
private fun GhostTangemButton_Preview(
@PreviewParameter(GhostTangemButtonPreviewProvider::class) params: TangemButtonState,
@PreviewParameter(GhostTangemButtonPreviewProvider::class) params: Pair<Boolean, Boolean>,
) {
TangemThemePreviewRedesign {
val (isEnabled, isLoading) = params
Row(
horizontalArrangement = Arrangement.spacedBy(21.dp),
modifier = Modifier
@ -114,7 +116,8 @@ private fun GhostTangemButton_Preview(
size = TangemButtonSize.X15,
iconPosition = iconPosition,
iconRes = R.drawable.ic_tangem_24,
state = params,
isEnabled = isEnabled,
isLoading = isLoading,
)
}
}
@ -123,13 +126,13 @@ private fun GhostTangemButton_Preview(
}
}
private class GhostTangemButtonPreviewProvider : PreviewParameterProvider<TangemButtonState> {
override val values: Sequence<TangemButtonState>
private class GhostTangemButtonPreviewProvider : PreviewParameterProvider<Pair<Boolean, Boolean>> {
override val values: Sequence<Pair<Boolean, Boolean>>
get() = sequenceOf(
TangemButtonState.Default,
TangemButtonState.Pressed,
TangemButtonState.Loading,
TangemButtonState.Disabled,
true to false,
false to false,
true to true,
false to true,
)
}
// endregion

View file

@ -35,9 +35,9 @@ fun OutlineTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier)
text = buttonUM.text,
iconRes = buttonUM.iconRes,
iconPosition = buttonUM.iconPosition,
enabled = buttonUM.isEnabled,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
size = buttonUM.size,
state = buttonUM.state,
shape = buttonUM.shape,
)
}
@ -50,9 +50,9 @@ fun OutlineTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier)
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param enabled Boolean indicating whether the button is enabled.
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
* @param size TangemButtonSize defining the size of the button.
* @param state TangemButtonState defining the current state of the button.
* @param shape TangemButtonShape defining the shape of the button.
*
[REDACTED_AUTHOR]
@ -64,39 +64,32 @@ fun OutlineTangemButton(
text: TextReference? = null,
@DrawableRes iconRes: Int? = null,
iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
enabled: Boolean = true,
isEnabled: Boolean = true,
isLoading: Boolean = false,
size: TangemButtonSize = TangemButtonSize.X15,
state: TangemButtonState = TangemButtonState.Default,
shape: TangemButtonShape = TangemButtonShape.Default,
) {
val backgroundModifier = when (state) {
TangemButtonState.Loading,
TangemButtonState.Pressed,
TangemButtonState.Disabled,
TangemButtonState.Default,
-> Modifier
.background(TangemTheme.colors2.surface.level1)
.border(
width = 1.dp,
color = TangemTheme.colors2.border.neutral.primary,
shape = shape.toShape(size),
)
}
val contentColor = when (state) {
TangemButtonState.Disabled -> TangemTheme.colors2.text.status.disabled
else -> TangemTheme.colors2.text.neutral.primary
val contentColor = if (isEnabled) {
TangemTheme.colors2.text.neutral.primary
} else {
TangemTheme.colors2.text.status.disabled
}
TangemButtonInternal(
onClick = onClick,
modifier = modifier
.clip(shape.toShape(size))
.then(backgroundModifier),
.background(TangemTheme.colors2.surface.level1)
.border(
width = 1.dp,
color = TangemTheme.colors2.border.neutral.primary,
shape = shape.toShape(size),
),
text = text,
contentColor = contentColor,
iconRes = iconRes,
enabled = enabled,
isEnabled = isEnabled,
isLoading = isLoading,
size = size,
state = state,
iconPosition = iconPosition,
)
}
@ -106,9 +99,10 @@ fun OutlineTangemButton(
@Preview(showBackground = true, widthDp = 480)
@Preview(showBackground = true, widthDp = 480, uiMode = Configuration.UI_MODE_NIGHT_YES)
private fun OutlineTangemButton_Preview(
@PreviewParameter(OutlineTangemButtonPreviewProvider::class) params: TangemButtonState,
@PreviewParameter(OutlineTangemButtonPreviewProvider::class) params: Pair<Boolean, Boolean>,
) {
TangemThemePreviewRedesign {
val (isEnabled, isLoading) = params
Row(
horizontalArrangement = Arrangement.spacedBy(21.dp),
modifier = Modifier
@ -132,7 +126,8 @@ private fun OutlineTangemButton_Preview(
shape = shape,
iconPosition = iconPosition,
iconRes = R.drawable.ic_tangem_24,
state = params,
isEnabled = isEnabled,
isLoading = isLoading,
)
}
}
@ -141,13 +136,13 @@ private fun OutlineTangemButton_Preview(
}
}
private class OutlineTangemButtonPreviewProvider : PreviewParameterProvider<TangemButtonState> {
override val values: Sequence<TangemButtonState>
private class OutlineTangemButtonPreviewProvider : PreviewParameterProvider<Pair<Boolean, Boolean>> {
override val values: Sequence<Pair<Boolean, Boolean>>
get() = sequenceOf(
TangemButtonState.Default,
TangemButtonState.Pressed,
TangemButtonState.Loading,
TangemButtonState.Disabled,
true to false,
false to false,
true to true,
false to true,
)
}
// endregion

View file

@ -34,9 +34,9 @@ fun PrimaryInverseTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Mo
text = buttonUM.text,
iconRes = buttonUM.iconRes,
iconPosition = buttonUM.iconPosition,
enabled = buttonUM.isEnabled,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
size = buttonUM.size,
state = buttonUM.state,
shape = buttonUM.shape,
)
}
@ -49,9 +49,9 @@ fun PrimaryInverseTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Mo
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param enabled Boolean indicating whether the button is enabled.
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
* @param size TangemButtonSize defining the size of the button.
* @param state TangemButtonState defining the current state of the button.
* @param shape TangemButtonShape defining the shape of the button.
*
[REDACTED_AUTHOR]
@ -63,23 +63,19 @@ fun PrimaryInverseTangemButton(
text: TextReference? = null,
@DrawableRes iconRes: Int? = null,
iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
enabled: Boolean = true,
isEnabled: Boolean = true,
isLoading: Boolean = false,
size: TangemButtonSize = TangemButtonSize.X15,
state: TangemButtonState = TangemButtonState.Default,
shape: TangemButtonShape = TangemButtonShape.Default,
) {
val backgroundModifier = when (state) {
TangemButtonState.Default -> Modifier.background(TangemTheme.colors2.button.backgroundPrimaryInverse)
TangemButtonState.Disabled -> Modifier.background(TangemTheme.colors2.button.backgroundDisabled)
TangemButtonState.Loading,
TangemButtonState.Pressed,
-> Modifier
.background(TangemTheme.colors2.button.backgroundPrimaryInverse)
.background(TangemTheme.colors2.overlay.overlayPrimary)
val backgroundModifier = when {
isEnabled -> Modifier.background(TangemTheme.colors2.button.backgroundPrimaryInverse)
else -> Modifier.background(TangemTheme.colors2.button.backgroundDisabled)
}
val contentColor = when (state) {
TangemButtonState.Disabled -> TangemTheme.colors2.text.status.disabled
else -> TangemTheme.colors2.text.neutral.primary
val contentColor = if (isEnabled) {
TangemTheme.colors2.text.neutral.primary
} else {
TangemTheme.colors2.text.status.disabled
}
TangemButtonInternal(
onClick = onClick,
@ -88,9 +84,9 @@ fun PrimaryInverseTangemButton(
.then(backgroundModifier),
text = text,
contentColor = contentColor,
enabled = enabled,
isEnabled = isEnabled,
isLoading = isLoading,
size = size,
state = state,
iconPosition = iconPosition,
iconRes = iconRes,
)
@ -101,9 +97,10 @@ fun PrimaryInverseTangemButton(
@Preview(showBackground = true, widthDp = 480)
@Preview(showBackground = true, widthDp = 480, uiMode = Configuration.UI_MODE_NIGHT_YES)
private fun PrimaryInverseTangemButton_Preview(
@PreviewParameter(PrimaryInverseTangemButtonPreviewProvider::class) params: TangemButtonState,
@PreviewParameter(PrimaryInverseTangemButtonPreviewProvider::class) params: Pair<Boolean, Boolean>,
) {
TangemThemePreviewRedesign {
val (isEnabled, isLoading) = params
Row(
horizontalArrangement = Arrangement.spacedBy(21.dp),
modifier = Modifier
@ -127,7 +124,8 @@ private fun PrimaryInverseTangemButton_Preview(
shape = shape,
iconPosition = iconPosition,
iconRes = R.drawable.ic_tangem_24,
state = params,
isEnabled = isEnabled,
isLoading = isLoading,
)
}
}
@ -136,13 +134,13 @@ private fun PrimaryInverseTangemButton_Preview(
}
}
private class PrimaryInverseTangemButtonPreviewProvider : PreviewParameterProvider<TangemButtonState> {
override val values: Sequence<TangemButtonState>
private class PrimaryInverseTangemButtonPreviewProvider : PreviewParameterProvider<Pair<Boolean, Boolean>> {
override val values: Sequence<Pair<Boolean, Boolean>>
get() = sequenceOf(
TangemButtonState.Default,
TangemButtonState.Pressed,
TangemButtonState.Loading,
TangemButtonState.Disabled,
true to false,
false to false,
true to true,
false to true,
)
}
// endregion

View file

@ -35,9 +35,9 @@ fun PrimaryTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier)
descriptionText = buttonUM.descriptionText,
iconRes = buttonUM.iconRes,
iconPosition = buttonUM.iconPosition,
enabled = buttonUM.isEnabled,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
size = buttonUM.size,
state = buttonUM.state,
shape = buttonUM.shape,
)
}
@ -50,9 +50,9 @@ fun PrimaryTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier)
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param enabled Boolean indicating whether the button is enabled.
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
* @param size TangemButtonSize defining the size of the button.
* @param state TangemButtonState defining the current state of the button.
* @param shape TangemButtonShape defining the shape of the button.
*
[REDACTED_AUTHOR]
@ -65,24 +65,22 @@ fun PrimaryTangemButton(
descriptionText: TextReference? = null,
@DrawableRes iconRes: Int? = null,
iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
enabled: Boolean = true,
isEnabled: Boolean = true,
isLoading: Boolean = false,
size: TangemButtonSize = TangemButtonSize.X15,
state: TangemButtonState = TangemButtonState.Default,
shape: TangemButtonShape = TangemButtonShape.Default,
) {
val backgroundModifier = when (state) {
TangemButtonState.Loading,
TangemButtonState.Default,
-> Modifier.background(TangemTheme.colors2.button.backgroundPrimary)
TangemButtonState.Disabled -> Modifier.background(TangemTheme.colors2.button.backgroundDisabled)
TangemButtonState.Pressed -> Modifier
.background(TangemTheme.colors2.button.backgroundPrimary)
.background(TangemTheme.colors2.overlay.overlaySecondary)
val backgroundModifier = if (isEnabled) {
Modifier.background(TangemTheme.colors2.button.backgroundPrimary)
} else {
Modifier.background(TangemTheme.colors2.button.backgroundDisabled)
}
val contentColor = when (state) {
TangemButtonState.Disabled -> TangemTheme.colors2.text.status.disabled
else -> TangemTheme.colors2.text.neutral.primaryInverted
val contentColor = if (isEnabled) {
TangemTheme.colors2.text.neutral.primaryInverted
} else {
TangemTheme.colors2.text.status.disabled
}
TangemButtonInternal(
onClick = onClick,
modifier = modifier
@ -91,9 +89,9 @@ fun PrimaryTangemButton(
text = text,
descriptionText = descriptionText,
contentColor = contentColor,
enabled = enabled,
isEnabled = isEnabled,
isLoading = isLoading,
size = size,
state = state,
iconPosition = iconPosition,
iconRes = iconRes,
)
@ -104,9 +102,10 @@ fun PrimaryTangemButton(
@Preview(showBackground = true, widthDp = 480)
@Preview(showBackground = true, widthDp = 480, uiMode = Configuration.UI_MODE_NIGHT_YES)
private fun PrimaryTangemButton_Preview(
@PreviewParameter(PrimaryTangemButtonPreviewProvider::class) params: TangemButtonState,
@PreviewParameter(PrimaryTangemButtonPreviewProvider::class) params: Pair<Boolean, Boolean>,
) {
TangemThemePreviewRedesign {
val (isEnabled, isLoading) = params
Row(
horizontalArrangement = Arrangement.spacedBy(21.dp),
modifier = Modifier
@ -125,7 +124,8 @@ private fun PrimaryTangemButton_Preview(
shape = shape,
iconPosition = TangemButtonIconPosition.entries[xIndex],
iconRes = R.drawable.ic_tangem_24,
state = params,
isEnabled = isEnabled,
isLoading = isLoading,
)
}
}
@ -134,13 +134,13 @@ private fun PrimaryTangemButton_Preview(
}
}
private class PrimaryTangemButtonPreviewProvider : PreviewParameterProvider<TangemButtonState> {
override val values: Sequence<TangemButtonState>
private class PrimaryTangemButtonPreviewProvider : PreviewParameterProvider<Pair<Boolean, Boolean>> {
override val values: Sequence<Pair<Boolean, Boolean>>
get() = sequenceOf(
TangemButtonState.Default,
TangemButtonState.Pressed,
TangemButtonState.Loading,
TangemButtonState.Disabled,
true to false,
false to false,
true to true,
false to true,
)
}
// endregion

View file

@ -35,9 +35,9 @@ fun SecondaryTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifie
text = buttonUM.text,
iconRes = buttonUM.iconRes,
iconPosition = buttonUM.iconPosition,
enabled = buttonUM.isEnabled,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
size = buttonUM.size,
state = buttonUM.state,
shape = buttonUM.shape,
)
}
@ -50,9 +50,9 @@ fun SecondaryTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifie
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param enabled Boolean indicating whether the button is enabled.
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
* @param size TangemButtonSize defining the size of the button.
* @param state TangemButtonState defining the current state of the button.
* @param shape TangemButtonShape defining the shape of the button.
*
[REDACTED_AUTHOR]
@ -64,22 +64,22 @@ fun SecondaryTangemButton(
text: TextReference? = null,
@DrawableRes iconRes: Int? = null,
iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
enabled: Boolean = true,
isEnabled: Boolean = true,
isLoading: Boolean = false,
size: TangemButtonSize = TangemButtonSize.X15,
state: TangemButtonState = TangemButtonState.Default,
shape: TangemButtonShape = TangemButtonShape.Default,
) {
val backgroundModifier = when (state) {
TangemButtonState.Loading,
TangemButtonState.Default,
-> Modifier.background(TangemTheme.colors2.button.backgroundSecondary)
TangemButtonState.Disabled -> Modifier.background(TangemTheme.colors2.button.backgroundDisabled)
TangemButtonState.Pressed -> Modifier.background(TangemTheme.colors2.overlay.overlayPrimary)
val backgroundModifier = if (isEnabled) {
Modifier.background(TangemTheme.colors2.button.backgroundSecondary)
} else {
Modifier.background(TangemTheme.colors2.button.backgroundDisabled)
}
val contentColor = when (state) {
TangemButtonState.Disabled -> TangemTheme.colors2.text.status.disabled
else -> TangemTheme.colors2.text.neutral.primary
val contentColor = if (isEnabled) {
TangemTheme.colors2.text.neutral.primary
} else {
TangemTheme.colors2.text.status.disabled
}
TangemButtonInternal(
onClick = onClick,
modifier = modifier
@ -89,9 +89,9 @@ fun SecondaryTangemButton(
text = text,
contentColor = contentColor,
iconRes = iconRes,
enabled = enabled,
isEnabled = isEnabled,
isLoading = isLoading,
size = size,
state = state,
iconPosition = iconPosition,
)
}
@ -101,9 +101,10 @@ fun SecondaryTangemButton(
@Preview(showBackground = true, widthDp = 480)
@Preview(showBackground = true, widthDp = 480, uiMode = Configuration.UI_MODE_NIGHT_YES)
private fun SecondaryTangemButton_Preview(
@PreviewParameter(SecondaryTangemButtonPreviewProvider::class) params: TangemButtonState,
@PreviewParameter(SecondaryTangemButtonPreviewProvider::class) params: Pair<Boolean, Boolean>,
) {
TangemThemePreviewRedesign {
val (isEnabled, isLoading) = params
Row(
horizontalArrangement = Arrangement.spacedBy(21.dp),
modifier = Modifier
@ -127,7 +128,8 @@ private fun SecondaryTangemButton_Preview(
shape = shape,
iconPosition = iconPosition,
iconRes = R.drawable.ic_tangem_24,
state = params,
isEnabled = isEnabled,
isLoading = isLoading,
)
}
}
@ -136,13 +138,13 @@ private fun SecondaryTangemButton_Preview(
}
}
private class SecondaryTangemButtonPreviewProvider : PreviewParameterProvider<TangemButtonState> {
override val values: Sequence<TangemButtonState>
private class SecondaryTangemButtonPreviewProvider : PreviewParameterProvider<Pair<Boolean, Boolean>> {
override val values: Sequence<Pair<Boolean, Boolean>>
get() = sequenceOf(
TangemButtonState.Default,
TangemButtonState.Pressed,
TangemButtonState.Loading,
TangemButtonState.Disabled,
true to false,
false to false,
true to true,
false to true,
)
}
// endregion

View file

@ -3,10 +3,7 @@ package com.tangem.core.ui.ds.button
import android.content.res.Configuration
import androidx.annotation.DrawableRes
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.ReadOnlyComposable
import androidx.compose.ui.Modifier
@ -15,6 +12,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.dp
import androidx.compose.ui.util.fastForEach
import com.tangem.core.ui.R
import com.tangem.core.ui.extensions.TextReference
import com.tangem.core.ui.extensions.stringReference
@ -35,10 +33,10 @@ fun StatusTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier)
text = buttonUM.text,
iconRes = buttonUM.iconRes,
iconPosition = buttonUM.iconPosition,
enabled = buttonUM.isEnabled,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
type = buttonUM.type,
size = buttonUM.size,
state = buttonUM.state,
shape = buttonUM.shape,
)
}
@ -51,9 +49,9 @@ fun StatusTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier)
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param enabled Boolean indicating whether the button is enabled.
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
* @param size TangemButtonSize defining the size of the button.
* @param state TangemButtonState defining the current state of the button.
* @param shape TangemButtonShape defining the shape of the button.
*
[REDACTED_AUTHOR]
@ -65,25 +63,20 @@ fun StatusTangemButton(
text: TextReference? = null,
@DrawableRes iconRes: Int? = null,
iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
enabled: Boolean = true,
isEnabled: Boolean = true,
isLoading: Boolean = false,
type: TangemButtonType = TangemButtonType.Accent,
size: TangemButtonSize = TangemButtonSize.X15,
state: TangemButtonState = TangemButtonState.Default,
shape: TangemButtonShape = TangemButtonShape.Default,
) {
val statusColor = type.getStatusColor()
val contentColor = when (state) {
TangemButtonState.Disabled -> TangemTheme.colors2.text.status.disabled
else -> TangemTheme.colors2.text.neutral.primaryInvertedConstant
val contentColor = when {
isEnabled -> TangemTheme.colors2.text.neutral.primaryInvertedConstant
else -> TangemTheme.colors2.text.status.disabled
}
val backgroundModifier = when (state) {
TangemButtonState.Disabled -> Modifier.background(TangemTheme.colors2.button.backgroundDisabled)
TangemButtonState.Default -> Modifier.background(statusColor)
TangemButtonState.Loading,
TangemButtonState.Pressed,
-> Modifier
.background(statusColor)
.background(TangemTheme.colors2.overlay.overlaySecondary)
val backgroundModifier = when {
isEnabled -> Modifier.background(statusColor)
else -> Modifier.background(TangemTheme.colors2.button.backgroundDisabled)
}
TangemButtonInternal(
onClick = onClick,
@ -93,9 +86,9 @@ fun StatusTangemButton(
text = text,
contentColor = contentColor,
iconRes = iconRes,
enabled = enabled,
isEnabled = isEnabled,
isLoading = isLoading,
size = size,
state = state,
iconPosition = iconPosition,
)
}
@ -113,35 +106,42 @@ private fun TangemButtonType.getStatusColor() = when (this) {
@Preview(showBackground = true, widthDp = 480)
@Preview(showBackground = true, widthDp = 480, uiMode = Configuration.UI_MODE_NIGHT_YES)
private fun StatusTangemButton_Preview(
@PreviewParameter(AccentTangemButtonPreviewProvider::class) params: TangemButtonState,
@PreviewParameter(StatusTangemButtonPreviewProvider::class) params: StatusTangemButtonPreviewData,
) {
TangemThemePreviewRedesign {
Row(
horizontalArrangement = Arrangement.spacedBy(21.dp),
Column(
modifier = Modifier
.background(TangemTheme.colors2.surface.level1)
.padding(8.dp),
.fillMaxWidth()
.background(TangemTheme.colors2.surface.level1),
) {
repeat(4) { yIndex ->
val shape = if (yIndex < 2) TangemButtonShape.Default else TangemButtonShape.Rounded
val text = if (yIndex % 2 == 1) null else stringReference("Button")
Column(verticalArrangement = Arrangement.spacedBy(10.dp)) {
repeat(2) { xIndex ->
val iconPosition = if (xIndex == 1) {
TangemButtonIconPosition.Start
} else {
TangemButtonIconPosition.End
params.statuses.fastForEach { (isEnabled, isLoading) ->
Row(
horizontalArrangement = Arrangement.spacedBy(21.dp),
modifier = Modifier.padding(8.dp),
) {
repeat(4) { yIndex ->
val shape = if (yIndex < 2) TangemButtonShape.Default else TangemButtonShape.Rounded
val text = if (yIndex % 2 == 1) null else stringReference("Button")
Column(verticalArrangement = Arrangement.spacedBy(10.dp)) {
repeat(2) { xIndex ->
val iconPosition = if (xIndex == 1) {
TangemButtonIconPosition.Start
} else {
TangemButtonIconPosition.End
}
StatusTangemButton(
onClick = {},
text = text,
size = TangemButtonSize.X15,
shape = shape,
iconPosition = iconPosition,
iconRes = R.drawable.ic_tangem_24,
type = params.type,
isEnabled = isEnabled,
isLoading = isLoading,
)
}
}
StatusTangemButton(
onClick = {},
text = text,
size = TangemButtonSize.X15,
shape = shape,
iconPosition = iconPosition,
iconRes = R.drawable.ic_tangem_24,
type = TangemButtonType.Accent,
state = params,
)
}
}
}
@ -149,13 +149,28 @@ private fun StatusTangemButton_Preview(
}
}
private class AccentTangemButtonPreviewProvider : PreviewParameterProvider<TangemButtonState> {
override val values: Sequence<TangemButtonState>
private data class StatusTangemButtonPreviewData(
val type: TangemButtonType,
val statuses: List<Pair<Boolean, Boolean>>,
)
private class StatusTangemButtonPreviewProvider : PreviewParameterProvider<StatusTangemButtonPreviewData> {
val statuses = listOf(
true to false,
false to false,
true to true,
false to true,
)
override val values: Sequence<StatusTangemButtonPreviewData>
get() = sequenceOf(
TangemButtonState.Default,
TangemButtonState.Pressed,
TangemButtonState.Loading,
TangemButtonState.Disabled,
StatusTangemButtonPreviewData(
type = TangemButtonType.Positive,
statuses = statuses,
),
StatusTangemButtonPreviewData(
type = TangemButtonType.Accent,
statuses = statuses,
),
)
}
// endregion

View file

@ -23,9 +23,9 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
descriptionText = buttonUM.descriptionText,
iconRes = buttonUM.iconRes,
iconPosition = buttonUM.iconPosition,
enabled = buttonUM.isEnabled,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
size = buttonUM.size,
state = buttonUM.state,
shape = buttonUM.shape,
)
TangemButtonType.Secondary -> SecondaryTangemButton(
@ -34,9 +34,9 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
text = buttonUM.text,
iconRes = buttonUM.iconRes,
iconPosition = buttonUM.iconPosition,
enabled = buttonUM.isEnabled,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
size = buttonUM.size,
state = buttonUM.state,
shape = buttonUM.shape,
)
TangemButtonType.Accent -> StatusTangemButton(
@ -45,10 +45,10 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
text = buttonUM.text,
iconRes = buttonUM.iconRes,
iconPosition = buttonUM.iconPosition,
enabled = buttonUM.isEnabled,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
type = TangemButtonType.Positive,
size = buttonUM.size,
state = buttonUM.state,
shape = buttonUM.shape,
)
TangemButtonType.Positive -> StatusTangemButton(
@ -57,10 +57,10 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
text = buttonUM.text,
iconRes = buttonUM.iconRes,
iconPosition = buttonUM.iconPosition,
enabled = buttonUM.isEnabled,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
type = TangemButtonType.Positive,
size = buttonUM.size,
state = buttonUM.state,
shape = buttonUM.shape,
)
TangemButtonType.Outline -> OutlineTangemButton(
@ -69,9 +69,9 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
text = buttonUM.text,
iconRes = buttonUM.iconRes,
iconPosition = buttonUM.iconPosition,
enabled = buttonUM.isEnabled,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
size = buttonUM.size,
state = buttonUM.state,
shape = buttonUM.shape,
)
TangemButtonType.PrimaryInverse -> PrimaryInverseTangemButton(
@ -80,9 +80,9 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
text = buttonUM.text,
iconRes = buttonUM.iconRes,
iconPosition = buttonUM.iconPosition,
enabled = buttonUM.isEnabled,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
size = buttonUM.size,
state = buttonUM.state,
shape = buttonUM.shape,
)
TangemButtonType.Ghost -> GhostTangemButton(
@ -91,9 +91,9 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
text = buttonUM.text,
iconRes = buttonUM.iconRes,
iconPosition = buttonUM.iconPosition,
enabled = buttonUM.isEnabled,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
size = buttonUM.size,
state = buttonUM.state,
)
}
}

View file

@ -43,10 +43,10 @@ private const val LOADING_ANIMATION_DURATION = 150
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param enabled Boolean indicating whether the button is enabled.
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
* @param contentColor Color of the button content (text and icon).
* @param size TangemButtonSize defining the size of the button.
* @param state TangemButtonState defining the current state of the button.
*
[REDACTED_AUTHOR]
*/
@ -58,16 +58,16 @@ internal fun TangemButtonInternal(
descriptionText: TextReference? = null,
@DrawableRes iconRes: Int? = null,
iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
enabled: Boolean = true,
isEnabled: Boolean = true,
isLoading: Boolean = false,
contentColor: Color = TangemTheme.colors2.text.neutral.primary,
size: TangemButtonSize = TangemButtonSize.X15,
state: TangemButtonState = TangemButtonState.Default,
) {
ProvideButtonRippleConfiguration {
Box(
modifier = modifier
.testTag(BaseButtonTestTags.BUTTON)
.clickableSingle(enabled = enabled, onClick = onClick, role = Role.Button)
.clickableSingle(enabled = isEnabled, onClick = onClick, role = Role.Button)
.height(size.toHeightDp())
.conditionalCompose(text == null) {
width(size.toHeightDp())
@ -81,7 +81,7 @@ internal fun TangemButtonInternal(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.align(Alignment.Center)
.conditional(state == TangemButtonState.Loading) {
.conditional(isLoading) {
alpha(0f)
},
) {
@ -118,7 +118,7 @@ internal fun TangemButtonInternal(
modifier = Modifier
.align(Alignment.Center)
.size(size.toContentSize()),
visible = state == TangemButtonState.Loading,
visible = isLoading,
exit = fadeOut(animationSpec = tween(LOADING_ANIMATION_DURATION)),
enter = fadeIn(animationSpec = tween(LOADING_ANIMATION_DURATION)),
) {
@ -323,16 +323,6 @@ enum class TangemButtonSize {
}
}
/**
* Defines the state of the Tangem button.
*/
enum class TangemButtonState {
Default,
Disabled,
Pressed,
Loading,
}
/**
* Defines the position of the icon in the Tangem button.
*/

View file

@ -11,9 +11,9 @@ import com.tangem.core.ui.extensions.TextReference
* @param descriptionText TextReference for the button description (optional).
* @param iconRes Drawable resource ID for the icon to be displayed in the button (optional).
* @param iconPosition Position of the icon (Start or End).
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
* @param size TangemButtonSize defining the size of the button.
* @param state TangemButtonState defining the current state of the button.
* @param shape TangemButtonShape defining the shape of the button.
* @param type TangemButtonType defining the style type of the button.
* @param onClick Lambda to be invoked when the button is clicked.
@ -27,8 +27,8 @@ data class TangemButtonUM(
@DrawableRes val iconRes: Int? = null,
val iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
val isEnabled: Boolean = true,
val isLoading: Boolean = false,
val size: TangemButtonSize = TangemButtonSize.X15,
val state: TangemButtonState = TangemButtonState.Default,
val shape: TangemButtonShape = TangemButtonShape.Default,
val type: TangemButtonType,
val onClick: () -> Unit,

View file

@ -270,11 +270,7 @@ private fun RowScope.TangemMessageLegacyButtons(buttonState: ButtonsState) {
iconPosition = TangemButtonIconPosition.End,
shape = TangemButtonShape.Rounded,
size = TangemButtonSize.X9,
state = if (buttonState.shouldShowProgress) {
TangemButtonState.Loading
} else {
TangemButtonState.Default
},
isLoading = buttonState.shouldShowProgress,
modifier = Modifier.weight(1f),
)
is ButtonsState.SecondaryButtonConfig -> PrimaryInverseTangemButton(
@ -284,11 +280,7 @@ private fun RowScope.TangemMessageLegacyButtons(buttonState: ButtonsState) {
iconPosition = TangemButtonIconPosition.End,
shape = TangemButtonShape.Rounded,
size = TangemButtonSize.X9,
state = if (buttonState.shouldShowProgress) {
TangemButtonState.Loading
} else {
TangemButtonState.Default
},
isLoading = buttonState.shouldShowProgress,
modifier = Modifier.weight(1f),
)
is ButtonsState.PairButtonsConfig -> {

View file

@ -97,7 +97,7 @@ private fun FilterButtonsV2(
iconPosition = com.tangem.core.ui.ds.button.TangemButtonIconPosition.End,
size = TangemButtonSize.X9,
shape = TangemButtonShape.Rounded,
enabled = earnFilterUM.isNetworkFilterEnabled,
isEnabled = earnFilterUM.isNetworkFilterEnabled,
)
SpacerWMax()
@ -109,7 +109,7 @@ private fun FilterButtonsV2(
iconPosition = com.tangem.core.ui.ds.button.TangemButtonIconPosition.End,
size = TangemButtonSize.X9,
shape = TangemButtonShape.Rounded,
enabled = earnFilterUM.isTypeFilterEnabled,
isEnabled = earnFilterUM.isTypeFilterEnabled,
)
}
}

View file

@ -1,4 +1,5 @@
@file:Suppress("MagicNumber", "LongMethod")
package com.tangem.feature.tester.presentation.storybook.page.buttons
import androidx.compose.foundation.background
@ -30,25 +31,25 @@ internal fun ButtonsStory(modifier: Modifier = Modifier) {
.background(TangemTheme.colors2.surface.level1),
) {
item("primary") {
ButtonSection(title = "Primary") { state, text, shape ->
ButtonSection(title = "Primary") { isEnabled, text, shape ->
PrimaryTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
size = TangemButtonSize.X10,
state = state,
isEnabled = isEnabled,
shape = shape,
)
}
}
item("secondary") {
ButtonSection(title = "Secondary") { state, text, shape ->
ButtonSection(title = "Secondary") { isEnabled, text, shape ->
SecondaryTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
size = TangemButtonSize.X10,
state = state,
isEnabled = isEnabled,
shape = shape,
)
}
@ -57,62 +58,62 @@ internal fun ButtonsStory(modifier: Modifier = Modifier) {
ButtonSection(
title = "PrimaryInverse",
background = TangemTheme.colors2.surface.level2,
) { state, text, shape ->
) { isEnabled, text, shape ->
PrimaryInverseTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
size = TangemButtonSize.X10,
state = state,
isEnabled = isEnabled,
shape = shape,
)
}
}
item("outline") {
ButtonSection(title = "Outline") { state, text, shape ->
ButtonSection(title = "Outline") { isEnabled, text, shape ->
OutlineTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
size = TangemButtonSize.X10,
state = state,
isEnabled = isEnabled,
shape = shape,
)
}
}
item("accent") {
ButtonSection(title = "Accent") { state, text, shape ->
ButtonSection(title = "Accent") { isEnabled, text, shape ->
StatusTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
size = TangemButtonSize.X10,
state = state,
isEnabled = isEnabled,
shape = shape,
)
}
}
item("positive") {
ButtonSection(title = "Positive") { state, text, shape ->
ButtonSection(title = "Positive") { isEnabled, text, shape ->
StatusTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
size = TangemButtonSize.X10,
type = TangemButtonType.Positive,
state = state,
isEnabled = isEnabled,
shape = shape,
)
}
}
item("ghost") {
ButtonSection(title = "Ghost") { state, text, shape ->
ButtonSection(title = "Ghost") { isEnabled, text, shape ->
GhostTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
size = TangemButtonSize.X10,
state = state,
isEnabled = isEnabled,
shape = shape,
)
}
@ -125,7 +126,7 @@ private fun ButtonSection(
title: String,
background: Color = TangemTheme.colors2.surface.level1,
shapes: List<TangemButtonShape> = TangemButtonShape.entries,
button: @Composable (state: TangemButtonState, text: Boolean, shape: TangemButtonShape) -> Unit,
button: @Composable (isEnabled: Boolean, text: Boolean, shape: TangemButtonShape) -> Unit,
) {
Column(
verticalArrangement = Arrangement.spacedBy(8.dp),
@ -152,7 +153,7 @@ private fun ButtonSection(
@Composable
private fun ShapeGroup(
shape: TangemButtonShape,
button: @Composable (state: TangemButtonState, text: Boolean, shape: TangemButtonShape) -> Unit,
button: @Composable (isEnabled: Boolean, text: Boolean, shape: TangemButtonShape) -> Unit,
) {
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
Text(
@ -161,9 +162,8 @@ private fun ShapeGroup(
color = TangemTheme.colors.text.secondary,
)
ColumnHeaderRow()
TangemButtonState.entries.forEach { state ->
StateRow(state = state, shape = shape, button = button)
}
StateRow(isEnabled = true, shape = shape, button = button)
StateRow(isEnabled = false, shape = shape, button = button)
}
}
@ -191,25 +191,25 @@ private fun ColumnHeaderRow() {
@Composable
private fun StateRow(
state: TangemButtonState,
isEnabled: Boolean,
shape: TangemButtonShape,
button: @Composable (state: TangemButtonState, text: Boolean, shape: TangemButtonShape) -> Unit,
button: @Composable (isEnabled: Boolean, text: Boolean, shape: TangemButtonShape) -> Unit,
) {
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Text(
text = state.name,
text = if (isEnabled) "Enabled" else "Disabled",
style = TangemTheme.typography.caption2,
color = TangemTheme.colors.text.tertiary,
modifier = Modifier.width(STATE_LABEL_WIDTH.dp),
)
Box(modifier = Modifier.weight(1f)) {
button(state, true, shape)
button(isEnabled, true, shape)
}
Box(modifier = Modifier.weight(1f)) {
button(state, false, shape)
button(isEnabled, false, shape)
}
}
}

View file

@ -1,6 +1,5 @@
package com.tangem.feature.wallet.child.organizetokens.model.transformer
import com.tangem.core.ui.ds.button.TangemButtonState
import com.tangem.feature.wallet.child.organizetokens.entity.OrganizeTokensUM
import com.tangem.utils.transformer.Transformer
@ -13,18 +12,10 @@ internal class OrganizeSortingProgressStateTransformer(
isEnabled = !isSortingInProgress,
),
cancelButton = prevState.cancelButton.copy(
state = if (isSortingInProgress) {
TangemButtonState.Disabled
} else {
TangemButtonState.Default
},
isEnabled = !isSortingInProgress,
),
applyButton = prevState.applyButton.copy(
state = if (isSortingInProgress) {
TangemButtonState.Loading
} else {
TangemButtonState.Default
},
isLoading = isSortingInProgress,
),
)
}

View file

@ -3,7 +3,6 @@ package com.tangem.feature.wallet.presentation.wallet.state.model
import androidx.annotation.DrawableRes
import androidx.compose.runtime.Immutable
import com.tangem.core.ui.ds.button.TangemButtonShape
import com.tangem.core.ui.ds.button.TangemButtonState
import com.tangem.core.ui.ds.button.TangemButtonType
import com.tangem.core.ui.ds.button.TangemButtonUM
import com.tangem.core.ui.extensions.TextReference
@ -31,11 +30,6 @@ internal sealed class WalletActionButtons(
shape = TangemButtonShape.Rounded,
onClick = onClick,
isEnabled = isEnabled,
state = if (isEnabled) {
TangemButtonState.Default
} else {
TangemButtonState.Disabled
},
)
data class Buy(