Updated on 2026-08-14

This commit is contained in:
Tangem 2026-04-07 10:25:11 +02:00
parent 5b8839cf52
commit ec66519042
21 changed files with 301 additions and 100 deletions

View file

@ -1,7 +1,6 @@
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
@ -15,6 +14,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.dp
import com.tangem.core.ui.R
import com.tangem.core.ui.ds.image.TangemIconUM
import com.tangem.core.ui.extensions.TextReference
import com.tangem.core.ui.extensions.stringReference
import com.tangem.core.ui.res.TangemTheme
@ -32,7 +32,7 @@ fun GhostTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
onClick = buttonUM.onClick,
modifier = modifier,
text = buttonUM.text,
iconRes = buttonUM.iconRes,
tangemIconUM = buttonUM.tangemIconUM,
iconPosition = buttonUM.iconPosition,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
@ -47,7 +47,7 @@ fun GhostTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
* @param onClick Lambda to be invoked when the button is clicked.
* @param modifier Modifier to be applied to the button.
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param tangemIconUM Icon for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
@ -60,7 +60,7 @@ fun GhostTangemButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
text: TextReference? = null,
@DrawableRes iconRes: Int? = null,
tangemIconUM: TangemIconUM? = null,
isEnabled: Boolean = true,
isLoading: Boolean = false,
size: TangemButtonSize = TangemButtonSize.X15,
@ -83,7 +83,7 @@ fun GhostTangemButton(
hasPadding = false,
size = size,
iconPosition = iconPosition,
iconRes = iconRes,
tangemIconUM = tangemIconUM,
)
}
@ -116,7 +116,16 @@ private fun GhostTangemButton_Preview(
text = text,
size = TangemButtonSize.X15,
iconPosition = iconPosition,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primary
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
isEnabled = isEnabled,
isLoading = isLoading,
)

View file

@ -1,7 +1,6 @@
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.border
import androidx.compose.foundation.layout.Arrangement
@ -16,6 +15,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.dp
import com.tangem.core.ui.R
import com.tangem.core.ui.ds.image.TangemIconUM
import com.tangem.core.ui.extensions.TextReference
import com.tangem.core.ui.extensions.stringReference
import com.tangem.core.ui.res.TangemTheme
@ -33,7 +33,7 @@ fun OutlineTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier)
onClick = buttonUM.onClick,
modifier = modifier,
text = buttonUM.text,
iconRes = buttonUM.iconRes,
tangemIconUM = buttonUM.tangemIconUM,
iconPosition = buttonUM.iconPosition,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
@ -48,7 +48,7 @@ fun OutlineTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier)
* @param onClick Lambda to be invoked when the button is clicked.
* @param modifier Modifier to be applied to the button.
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param tangemIconUM Icon for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
@ -62,7 +62,7 @@ fun OutlineTangemButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
text: TextReference? = null,
@DrawableRes iconRes: Int? = null,
tangemIconUM: TangemIconUM? = null,
iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
isEnabled: Boolean = true,
isLoading: Boolean = false,
@ -86,7 +86,7 @@ fun OutlineTangemButton(
),
text = text,
contentColor = contentColor,
iconRes = iconRes,
tangemIconUM = tangemIconUM,
isEnabled = isEnabled,
isLoading = isLoading,
size = size,
@ -125,7 +125,16 @@ private fun OutlineTangemButton_Preview(
size = TangemButtonSize.X15,
shape = shape,
iconPosition = iconPosition,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primary
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
isEnabled = isEnabled,
isLoading = isLoading,
)

View file

@ -1,7 +1,6 @@
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
@ -15,6 +14,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.dp
import com.tangem.core.ui.R
import com.tangem.core.ui.ds.image.TangemIconUM
import com.tangem.core.ui.extensions.TextReference
import com.tangem.core.ui.extensions.stringReference
import com.tangem.core.ui.res.TangemTheme
@ -32,7 +32,7 @@ fun PrimaryInverseTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Mo
onClick = buttonUM.onClick,
modifier = modifier,
text = buttonUM.text,
iconRes = buttonUM.iconRes,
tangemIconUM = buttonUM.tangemIconUM,
iconPosition = buttonUM.iconPosition,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
@ -47,7 +47,7 @@ fun PrimaryInverseTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Mo
* @param onClick Lambda to be invoked when the button is clicked.
* @param modifier Modifier to be applied to the button.
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param tangemIconUM Icon for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
@ -61,7 +61,7 @@ fun PrimaryInverseTangemButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
text: TextReference? = null,
@DrawableRes iconRes: Int? = null,
tangemIconUM: TangemIconUM? = null,
iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
isEnabled: Boolean = true,
isLoading: Boolean = false,
@ -88,7 +88,7 @@ fun PrimaryInverseTangemButton(
isLoading = isLoading,
size = size,
iconPosition = iconPosition,
iconRes = iconRes,
tangemIconUM = tangemIconUM,
)
}
@ -123,7 +123,16 @@ private fun PrimaryInverseTangemButton_Preview(
size = TangemButtonSize.X15,
shape = shape,
iconPosition = iconPosition,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primary
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
isEnabled = isEnabled,
isLoading = isLoading,
)

View file

@ -1,7 +1,6 @@
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
@ -15,6 +14,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.dp
import com.tangem.core.ui.R
import com.tangem.core.ui.ds.image.TangemIconUM
import com.tangem.core.ui.extensions.TextReference
import com.tangem.core.ui.extensions.stringReference
import com.tangem.core.ui.res.TangemTheme
@ -33,7 +33,7 @@ fun PrimaryTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier)
modifier = modifier,
text = buttonUM.text,
descriptionText = buttonUM.descriptionText,
iconRes = buttonUM.iconRes,
tangemIconUM = buttonUM.tangemIconUM,
iconPosition = buttonUM.iconPosition,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
@ -48,7 +48,7 @@ fun PrimaryTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier)
* @param onClick Lambda to be invoked when the button is clicked.
* @param modifier Modifier to be applied to the button.
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param tangemIconUM Icon for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
@ -63,7 +63,7 @@ fun PrimaryTangemButton(
modifier: Modifier = Modifier,
text: TextReference? = null,
descriptionText: TextReference? = null,
@DrawableRes iconRes: Int? = null,
tangemIconUM: TangemIconUM? = null,
iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
isEnabled: Boolean = true,
isLoading: Boolean = false,
@ -93,7 +93,7 @@ fun PrimaryTangemButton(
isLoading = isLoading,
size = size,
iconPosition = iconPosition,
iconRes = iconRes,
tangemIconUM = tangemIconUM,
)
}
@ -123,7 +123,16 @@ private fun PrimaryTangemButton_Preview(
size = TangemButtonSize.X15,
shape = shape,
iconPosition = TangemButtonIconPosition.entries[xIndex],
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primaryInverted
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
isEnabled = isEnabled,
isLoading = isLoading,
)

View file

@ -1,7 +1,6 @@
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
@ -16,6 +15,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.dp
import com.tangem.core.ui.R
import com.tangem.core.ui.components.haze.hazeEffectTangem
import com.tangem.core.ui.ds.image.TangemIconUM
import com.tangem.core.ui.extensions.TextReference
import com.tangem.core.ui.extensions.stringReference
import com.tangem.core.ui.res.TangemTheme
@ -33,7 +33,7 @@ fun SecondaryTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifie
onClick = buttonUM.onClick,
modifier = modifier,
text = buttonUM.text,
iconRes = buttonUM.iconRes,
tangemIconUM = buttonUM.tangemIconUM,
iconPosition = buttonUM.iconPosition,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
@ -48,7 +48,7 @@ fun SecondaryTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifie
* @param onClick Lambda to be invoked when the button is clicked.
* @param modifier Modifier to be applied to the button.
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param tangemIconUM Icon for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
@ -62,7 +62,7 @@ fun SecondaryTangemButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
text: TextReference? = null,
@DrawableRes iconRes: Int? = null,
tangemIconUM: TangemIconUM? = null,
iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
isEnabled: Boolean = true,
isLoading: Boolean = false,
@ -88,7 +88,7 @@ fun SecondaryTangemButton(
.then(backgroundModifier),
text = text,
contentColor = contentColor,
iconRes = iconRes,
tangemIconUM = tangemIconUM,
isEnabled = isEnabled,
isLoading = isLoading,
size = size,
@ -127,7 +127,16 @@ private fun SecondaryTangemButton_Preview(
size = TangemButtonSize.X15,
shape = shape,
iconPosition = iconPosition,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primary
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
isEnabled = isEnabled,
isLoading = isLoading,
)

View file

@ -1,7 +1,6 @@
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.*
import androidx.compose.runtime.Composable
@ -14,6 +13,7 @@ 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.ds.image.TangemIconUM
import com.tangem.core.ui.extensions.TextReference
import com.tangem.core.ui.extensions.stringReference
import com.tangem.core.ui.res.TangemTheme
@ -31,7 +31,7 @@ fun StatusTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier)
onClick = buttonUM.onClick,
modifier = modifier,
text = buttonUM.text,
iconRes = buttonUM.iconRes,
tangemIconUM = buttonUM.tangemIconUM,
iconPosition = buttonUM.iconPosition,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
@ -47,7 +47,7 @@ fun StatusTangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier)
* @param onClick Lambda to be invoked when the button is clicked.
* @param modifier Modifier to be applied to the button.
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param tangemIconUM Icon for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
@ -61,7 +61,7 @@ fun StatusTangemButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
text: TextReference? = null,
@DrawableRes iconRes: Int? = null,
tangemIconUM: TangemIconUM? = null,
iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
isEnabled: Boolean = true,
isLoading: Boolean = false,
@ -85,7 +85,7 @@ fun StatusTangemButton(
.then(backgroundModifier),
text = text,
contentColor = contentColor,
iconRes = iconRes,
tangemIconUM = tangemIconUM,
isEnabled = isEnabled,
isLoading = isLoading,
size = size,
@ -135,7 +135,16 @@ private fun StatusTangemButton_Preview(
size = TangemButtonSize.X15,
shape = shape,
iconPosition = iconPosition,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primaryInvertedConstant
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
type = params.type,
isEnabled = isEnabled,
isLoading = isLoading,

View file

@ -21,7 +21,7 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
modifier = modifier,
text = buttonUM.text,
descriptionText = buttonUM.descriptionText,
iconRes = buttonUM.iconRes,
tangemIconUM = buttonUM.tangemIconUM,
iconPosition = buttonUM.iconPosition,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
@ -32,7 +32,7 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
onClick = buttonUM.onClick,
modifier = modifier,
text = buttonUM.text,
iconRes = buttonUM.iconRes,
tangemIconUM = buttonUM.tangemIconUM,
iconPosition = buttonUM.iconPosition,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
@ -43,7 +43,7 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
onClick = buttonUM.onClick,
modifier = modifier,
text = buttonUM.text,
iconRes = buttonUM.iconRes,
tangemIconUM = buttonUM.tangemIconUM,
iconPosition = buttonUM.iconPosition,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
@ -55,7 +55,7 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
onClick = buttonUM.onClick,
modifier = modifier,
text = buttonUM.text,
iconRes = buttonUM.iconRes,
tangemIconUM = buttonUM.tangemIconUM,
iconPosition = buttonUM.iconPosition,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
@ -67,7 +67,7 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
onClick = buttonUM.onClick,
modifier = modifier,
text = buttonUM.text,
iconRes = buttonUM.iconRes,
tangemIconUM = buttonUM.tangemIconUM,
iconPosition = buttonUM.iconPosition,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
@ -78,7 +78,7 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
onClick = buttonUM.onClick,
modifier = modifier,
text = buttonUM.text,
iconRes = buttonUM.iconRes,
tangemIconUM = buttonUM.tangemIconUM,
iconPosition = buttonUM.iconPosition,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,
@ -89,7 +89,7 @@ fun TangemButton(buttonUM: TangemButtonUM, modifier: Modifier = Modifier) {
onClick = buttonUM.onClick,
modifier = modifier,
text = buttonUM.text,
iconRes = buttonUM.iconRes,
tangemIconUM = buttonUM.tangemIconUM,
iconPosition = buttonUM.iconPosition,
isEnabled = buttonUM.isEnabled,
isLoading = buttonUM.isLoading,

View file

@ -1,6 +1,5 @@
package com.tangem.core.ui.ds.button
import androidx.annotation.DrawableRes
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.tween
@ -10,7 +9,10 @@ import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.TextAutoSize
import androidx.compose.material.ripple.RippleAlpha
import androidx.compose.material3.*
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.LocalRippleConfiguration
import androidx.compose.material3.RippleConfiguration
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.ReadOnlyComposable
@ -21,7 +23,6 @@ import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
@ -29,6 +30,8 @@ import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.tangem.core.ui.components.SpacerW
import com.tangem.core.ui.ds.image.TangemIcon
import com.tangem.core.ui.ds.image.TangemIconUM
import com.tangem.core.ui.extensions.*
import com.tangem.core.ui.res.TangemTheme
import com.tangem.core.ui.test.BaseButtonTestTags
@ -41,12 +44,12 @@ private const val LOADING_ANIMATION_DURATION = 150
* @param onClick Lambda to be invoked when the button is clicked.
* @param modifier Modifier to be applied to the button.
* @param text TextReference for the button label.
* @param iconRes Drawable resource ID for the icon to be displayed in the button.
* @param tangemIconUM Icon for the icon to be displayed in the button.
* @param iconPosition Position of the icon (Start or End).
* @param isEnabled Boolean indicating whether the button is enabled.
* @param isLoading Boolean indicating whether the button is in a loading state.
* @param hasPadding Boolean indicating whether the button should have padding around its content.
* @param contentColor Color of the button content (text and icon).
* @param contentColor Color of the button content (text).
* @param size TangemButtonSize defining the size of the button.
*
[REDACTED_AUTHOR]
@ -57,7 +60,7 @@ internal fun TangemButtonInternal(
modifier: Modifier = Modifier,
text: TextReference? = null,
descriptionText: TextReference? = null,
@DrawableRes iconRes: Int? = null,
tangemIconUM: TangemIconUM? = null,
iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
isEnabled: Boolean = true,
isLoading: Boolean = false,
@ -87,10 +90,9 @@ internal fun TangemButtonInternal(
alpha(0f)
},
) {
val isStartIcon = iconRes != null && iconPosition == TangemButtonIconPosition.Start
val isStartIcon = tangemIconUM != null && iconPosition == TangemButtonIconPosition.Start
TangemButtonIcon(
iconRes = iconRes,
iconColor = contentColor,
tangemIconUM = tangemIconUM,
isVisible = isStartIcon,
size = size,
)
@ -105,13 +107,12 @@ internal fun TangemButtonInternal(
size = size,
)
val isEndIcon = iconRes != null && iconPosition == TangemButtonIconPosition.End
val isEndIcon = tangemIconUM != null && iconPosition == TangemButtonIconPosition.End
if (isEndIcon && (text != null || descriptionText != null)) {
SpacerW(TangemTheme.dimens2.x1)
}
TangemButtonIcon(
iconRes = iconRes,
iconColor = contentColor,
tangemIconUM = tangemIconUM,
isVisible = isEndIcon,
size = size,
)
@ -198,22 +199,13 @@ private inline fun ProvideButtonRippleConfiguration(crossinline content: @Compos
}
@Composable
private fun TangemButtonIcon(
@DrawableRes iconRes: Int?,
iconColor: Color,
isVisible: Boolean,
size: TangemButtonSize,
) {
private fun TangemButtonIcon(tangemIconUM: TangemIconUM?, isVisible: Boolean, size: TangemButtonSize) {
AnimatedVisibility(
visible = isVisible,
modifier = Modifier.size(size = size.toContentSize()),
) {
val wrappedIconRes = remember(iconRes) { requireNotNull(iconRes) }
Icon(
painter = painterResource(id = wrappedIconRes),
contentDescription = null,
tint = iconColor,
)
val wrappedIconUM = remember(tangemIconUM) { requireNotNull(tangemIconUM) }
TangemIcon(tangemIconUM = wrappedIconUM)
}
}

View file

@ -1,7 +1,7 @@
package com.tangem.core.ui.ds.button
import androidx.annotation.DrawableRes
import androidx.compose.runtime.Stable
import com.tangem.core.ui.ds.image.TangemIconUM
import com.tangem.core.ui.extensions.TextReference
/**
@ -9,7 +9,7 @@ import com.tangem.core.ui.extensions.TextReference
*
* @param text TextReference for the button label.
* @param descriptionText TextReference for the button description (optional).
* @param iconRes Drawable resource ID for the icon to be displayed in the button (optional).
* @param tangemIconUM Icon 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 isLoading Boolean indicating whether the button is in a loading state.
@ -24,7 +24,7 @@ import com.tangem.core.ui.extensions.TextReference
data class TangemButtonUM(
val text: TextReference? = null,
val descriptionText: TextReference? = null,
@DrawableRes val iconRes: Int? = null,
val tangemIconUM: TangemIconUM? = null,
val iconPosition: TangemButtonIconPosition = TangemButtonIconPosition.Start,
val isEnabled: Boolean = true,
val isLoading: Boolean = false,

View file

@ -259,13 +259,19 @@ private fun TangemMessageContent(
}
}
@Suppress("LongMethod")
@Composable
private fun RowScope.TangemMessageLegacyButtons(buttonState: ButtonsState) {
when (buttonState) {
is ButtonsState.PrimaryButtonConfig -> PrimaryTangemButton(
text = buttonState.text,
descriptionText = buttonState.additionalText,
iconRes = buttonState.iconResId,
tangemIconUM = buttonState.iconResId?.let {
TangemIconUM.Icon(
iconRes = buttonState.iconResId,
tintReference = { TangemTheme.colors2.graphic.neutral.primary },
)
},
onClick = buttonState.onClick,
iconPosition = TangemButtonIconPosition.End,
shape = TangemButtonShape.Rounded,
@ -275,7 +281,12 @@ private fun RowScope.TangemMessageLegacyButtons(buttonState: ButtonsState) {
)
is ButtonsState.SecondaryButtonConfig -> PrimaryInverseTangemButton(
text = buttonState.text,
iconRes = buttonState.iconResId,
tangemIconUM = buttonState.iconResId?.let {
TangemIconUM.Icon(
iconRes = buttonState.iconResId,
tintReference = { TangemTheme.colors2.graphic.neutral.primary },
)
},
onClick = buttonState.onClick,
iconPosition = TangemButtonIconPosition.End,
shape = TangemButtonShape.Rounded,
@ -362,7 +373,10 @@ private class TangemMessagePreviewProvider : PreviewParameterProvider<TangemMess
TangemMessageButtonUM(
text = stringReference("Button"),
type = TangemButtonType.Primary,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = { TangemTheme.colors2.graphic.neutral.primary },
),
onClick = {},
),
),
@ -419,6 +433,10 @@ private fun TangemMessage2_Preview() {
modifier = Modifier.weight(1f),
size = TangemButtonSize.X9,
shape = TangemButtonShape.Rounded,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = { TangemTheme.colors2.graphic.neutral.primary },
),
)
PrimaryTangemButton(
text = stringReference("Button"),

View file

@ -1,6 +1,5 @@
package com.tangem.core.ui.ds.message
import androidx.annotation.DrawableRes
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.tangem.core.ui.ds.button.*
@ -41,14 +40,14 @@ data class TangemMessageUM(
*
* @param text TextReference for the button label.
* @param type TangemButtonType defining the style type of the button.
* @param iconRes Drawable resource ID for the icon to be displayed in the button (optional).
* @param tangemIconUM Icon for the icon to be displayed in the button. (optional).
* @param isLoading Boolean indicating whether the button should show a loading state.
* @param onClick Lambda to be invoked when the button is clicked.
*/
data class TangemMessageButtonUM(
val text: TextReference,
val type: TangemButtonType,
@DrawableRes val iconRes: Int? = null,
val tangemIconUM: TangemIconUM? = null,
val isLoading: Boolean = false,
val onClick: () -> Unit,
) {
@ -57,7 +56,7 @@ data class TangemMessageButtonUM(
text = text,
size = TangemButtonSize.X9,
shape = TangemButtonShape.Rounded,
iconRes = iconRes,
tangemIconUM = tangemIconUM,
iconPosition = TangemButtonIconPosition.End,
type = type,
isLoading = isLoading,

View file

@ -13,8 +13,10 @@ import com.tangem.core.ui.components.buttons.common.TangemButtonIconPosition
import com.tangem.core.ui.ds.button.PrimaryInverseTangemButton
import com.tangem.core.ui.ds.button.TangemButtonShape
import com.tangem.core.ui.ds.button.TangemButtonSize
import com.tangem.core.ui.ds.image.TangemIconUM
import com.tangem.core.ui.extensions.TextReference
import com.tangem.core.ui.res.LocalRedesignEnabled
import com.tangem.core.ui.res.TangemTheme
import com.tangem.features.feed.ui.earn.state.EarnFilterNetworkUM
import com.tangem.features.feed.ui.earn.state.EarnFilterUM
@ -93,7 +95,16 @@ private fun FilterButtonsV2(
is EarnFilterNetworkUM.Network -> TextReference.Str(earnFilterUM.selectedNetworkFilter.text)
},
onClick = onNetworkFilterClick,
iconRes = R.drawable.ic_chewron_down_20,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_chewron_down_20,
tintReference = {
if (earnFilterUM.isNetworkFilterEnabled) {
TangemTheme.colors2.graphic.neutral.primary
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
iconPosition = com.tangem.core.ui.ds.button.TangemButtonIconPosition.End,
size = TangemButtonSize.X9,
shape = TangemButtonShape.Rounded,
@ -105,7 +116,16 @@ private fun FilterButtonsV2(
PrimaryInverseTangemButton(
text = earnFilterUM.selectedTypeFilter.text,
onClick = onTypeFilterClick,
iconRes = R.drawable.ic_chewron_down_20,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_chewron_down_20,
tintReference = {
if (earnFilterUM.isTypeFilterEnabled) {
TangemTheme.colors2.graphic.neutral.primary
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
iconPosition = com.tangem.core.ui.ds.button.TangemButtonIconPosition.End,
size = TangemButtonSize.X9,
shape = TangemButtonShape.Rounded,

View file

@ -15,6 +15,7 @@ import com.tangem.core.ui.components.haze.hazeEffectTangem
import com.tangem.core.ui.ds.button.PrimaryInverseTangemButton
import com.tangem.core.ui.ds.button.TangemButtonShape
import com.tangem.core.ui.ds.button.TangemButtonSize
import com.tangem.core.ui.ds.image.TangemIconUM
import com.tangem.core.ui.ds.tabs.TangemSegmentUM
import com.tangem.core.ui.ds.tabs.TangemSegmentedPicker
import com.tangem.core.ui.extensions.resolveReference
@ -149,7 +150,10 @@ private fun OptionsV2(
isShowDropdownMenu = true
},
iconPosition = RedesignTangemButtonIconPosition.End,
iconRes = R.drawable.ic_chewron_down_20,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_chewron_down_20,
tintReference = { TangemTheme.colors2.graphic.neutral.primary },
),
text = sortMenuUM.selectedOption.text,
size = TangemButtonSize.X9,
shape = TangemButtonShape.Rounded,

View file

@ -26,6 +26,7 @@ import com.tangem.core.ui.components.buttons.common.TangemButtonSize
import com.tangem.core.ui.components.haze.hazeSourceTangem
import com.tangem.core.ui.ds.button.SecondaryTangemButton
import com.tangem.core.ui.ds.button.TangemButtonShape
import com.tangem.core.ui.ds.image.TangemIconUM
import com.tangem.core.ui.extensions.resolveReference
import com.tangem.core.ui.extensions.resourceReference
import com.tangem.core.ui.extensions.stringResourceSafe
@ -261,10 +262,16 @@ internal fun ArticleDetailV2(
modifier = Modifier.padding(horizontal = 24.dp),
text = resourceReference(R.string.news_like),
size = com.tangem.core.ui.ds.button.TangemButtonSize.X9,
iconRes = if (article.isLiked) {
R.drawable.ic_like_20
tangemIconUM = if (article.isLiked) {
TangemIconUM.Icon(
iconRes = R.drawable.ic_heart_filled_20,
tintReference = { TangemTheme.colors2.markers.iconRed },
)
} else {
R.drawable.ic_heart_20
TangemIconUM.Icon(
iconRes = R.drawable.ic_heart_20,
tintReference = { TangemTheme.colors2.button.iconPrimary },
)
},
onClick = {
hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)

View file

@ -14,12 +14,13 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.tangem.core.ui.R
import com.tangem.core.ui.ds.button.*
import com.tangem.core.ui.ds.image.TangemIconUM
import com.tangem.core.ui.extensions.stringReference
import com.tangem.core.ui.res.TangemTheme
private const val STATE_LABEL_WIDTH = 80
@Suppress("LongMethod")
@Suppress("LongMethod", "CyclomaticComplexMethod")
@Composable
internal fun ButtonsStory(modifier: Modifier = Modifier) {
LazyColumn(
@ -35,7 +36,16 @@ internal fun ButtonsStory(modifier: Modifier = Modifier) {
PrimaryTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primaryInverted
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
size = TangemButtonSize.X10,
isEnabled = isEnabled,
shape = shape,
@ -47,7 +57,16 @@ internal fun ButtonsStory(modifier: Modifier = Modifier) {
SecondaryTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primary
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
size = TangemButtonSize.X10,
isEnabled = isEnabled,
shape = shape,
@ -62,7 +81,16 @@ internal fun ButtonsStory(modifier: Modifier = Modifier) {
PrimaryInverseTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primary
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
size = TangemButtonSize.X10,
isEnabled = isEnabled,
shape = shape,
@ -74,7 +102,16 @@ internal fun ButtonsStory(modifier: Modifier = Modifier) {
OutlineTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primary
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
size = TangemButtonSize.X10,
isEnabled = isEnabled,
shape = shape,
@ -86,7 +123,16 @@ internal fun ButtonsStory(modifier: Modifier = Modifier) {
StatusTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primaryInvertedConstant
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
size = TangemButtonSize.X10,
isEnabled = isEnabled,
shape = shape,
@ -98,7 +144,16 @@ internal fun ButtonsStory(modifier: Modifier = Modifier) {
StatusTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primaryInverted
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
size = TangemButtonSize.X10,
type = TangemButtonType.Positive,
isEnabled = isEnabled,
@ -111,7 +166,16 @@ internal fun ButtonsStory(modifier: Modifier = Modifier) {
GhostTangemButton(
onClick = {},
text = if (text) stringReference("Continue") else null,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primary
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
size = TangemButtonSize.X10,
isEnabled = isEnabled,
shape = shape,

View file

@ -105,7 +105,10 @@ internal fun TangemMessageStory(state: TangemMessageStory, modifier: Modifier =
TangemMessageButtonUM(
text = stringReference("Generate"),
type = TangemButtonType.Primary,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = { TangemTheme.colors2.graphic.neutral.primary },
),
onClick = {},
),
),

View file

@ -12,6 +12,7 @@ import com.tangem.core.ui.ds.row.token.TangemTokenRowUM
import com.tangem.core.ui.event.consumedEvent
import com.tangem.core.ui.extensions.resourceReference
import com.tangem.core.ui.extensions.stringReference
import com.tangem.core.ui.res.TangemTheme
import com.tangem.feature.wallet.impl.R
import com.tangem.feature.wallet.presentation.common.WalletPreviewDataLegacy.topBarConfig
import com.tangem.feature.wallet.presentation.preview.WalletBalancePreview
@ -74,7 +75,10 @@ internal object WalletScreenPreviewData {
text = resourceReference(R.string.organize_tokens_title),
type = TangemButtonType.Secondary,
onClick = {},
iconRes = R.drawable.ic_filter_default_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_filter_default_24,
tintReference = { TangemTheme.colors2.graphic.neutral.primaryInverted },
),
size = TangemButtonSize.X9,
shape = TangemButtonShape.Rounded,
),
@ -107,7 +111,10 @@ internal object WalletScreenPreviewData {
text = resourceReference(R.string.organize_tokens_title),
type = TangemButtonType.Secondary,
onClick = {},
iconRes = R.drawable.ic_filter_default_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_filter_default_24,
tintReference = { TangemTheme.colors2.graphic.neutral.primaryInverted },
),
size = TangemButtonSize.X9,
shape = TangemButtonShape.Rounded,
),
@ -134,7 +141,10 @@ internal object WalletScreenPreviewData {
text = resourceReference(R.string.organize_tokens_title),
type = TangemButtonType.Secondary,
onClick = {},
iconRes = R.drawable.ic_filter_default_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_filter_default_24,
tintReference = { TangemTheme.colors2.graphic.neutral.primaryInverted },
),
size = TangemButtonSize.X9,
shape = TangemButtonShape.Rounded,
),

View file

@ -5,8 +5,10 @@ import androidx.compose.runtime.Immutable
import com.tangem.core.ui.ds.button.TangemButtonShape
import com.tangem.core.ui.ds.button.TangemButtonType
import com.tangem.core.ui.ds.button.TangemButtonUM
import com.tangem.core.ui.ds.image.TangemIconUM
import com.tangem.core.ui.extensions.TextReference
import com.tangem.core.ui.extensions.resourceReference
import com.tangem.core.ui.res.TangemTheme
import com.tangem.feature.wallet.impl.R
/**
@ -25,7 +27,16 @@ internal sealed class WalletActionButtons(
val buttonUM: TangemButtonUM
get() = TangemButtonUM(
text = text,
iconRes = iconRes,
tangemIconUM = TangemIconUM.Icon(
iconRes = iconRes,
tintReference = {
if (isEnabled) {
TangemTheme.colors2.graphic.neutral.primary
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
type = TangemButtonType.Secondary,
shape = TangemButtonShape.Rounded,
onClick = onClick,

View file

@ -251,7 +251,12 @@ internal sealed class WalletNotificationUM(val messageUM: TangemMessageUM, val t
TangemMessageButtonUM(
text = resourceReference(id = R.string.common_generate_addresses),
type = TangemButtonType.Primary,
iconRes = tangemIcon,
tangemIconUM = tangemIcon?.let {
TangemIconUM.Icon(
iconRes = tangemIcon,
tintReference = { TangemTheme.colors2.graphic.neutral.primaryInverted },
)
},
onClick = onGenerateClick,
),
),
@ -307,7 +312,10 @@ internal sealed class WalletNotificationUM(val messageUM: TangemMessageUM, val t
buttonsUM = persistentListOf(
TangemMessageButtonUM(
text = buttonText,
iconRes = R.drawable.ic_tangem_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_tangem_24,
tintReference = { TangemTheme.colors2.graphic.neutral.primaryInverted },
),
onClick = onRefreshClick,
type = TangemButtonType.Primary,
isLoading = shouldShowProgress,

View file

@ -4,9 +4,11 @@ import com.tangem.core.ui.ds.button.TangemButtonShape
import com.tangem.core.ui.ds.button.TangemButtonSize
import com.tangem.core.ui.ds.button.TangemButtonType
import com.tangem.core.ui.ds.button.TangemButtonUM
import com.tangem.core.ui.ds.image.TangemIconUM
import com.tangem.core.ui.ds.row.header.TangemHeaderRowUM
import com.tangem.core.ui.extensions.resourceReference
import com.tangem.core.ui.extensions.wrappedList
import com.tangem.core.ui.res.TangemTheme
import com.tangem.domain.account.models.AccountStatusList
import com.tangem.domain.appcurrency.model.AppCurrency
import com.tangem.domain.models.TotalFiatBalance
@ -169,7 +171,16 @@ internal class WalletTokensListUMConverter(
size = TangemButtonSize.X9,
shape = TangemButtonShape.Rounded,
type = TangemButtonType.PrimaryInverse,
iconRes = R.drawable.ic_filter_default_24,
tangemIconUM = TangemIconUM.Icon(
iconRes = R.drawable.ic_filter_default_24,
tintReference = {
if (accountList.totalFiatBalance !is TotalFiatBalance.Loading) {
TangemTheme.colors2.graphic.neutral.primary
} else {
TangemTheme.colors2.graphic.neutral.quaternary
}
},
),
onClick = clickIntents::onOrganizeTokensClick,
)
} else {

View file

@ -171,7 +171,7 @@ private fun ActionButtons(buttons: ImmutableList<TangemButtonUM>) {
horizontalAlignment = Alignment.CenterHorizontally,
) {
SecondaryTangemButton(
iconRes = button.iconRes,
tangemIconUM = button.tangemIconUM,
onClick = button.onClick,
isEnabled = button.isEnabled,
shape = TangemButtonShape.Rounded,